Change event to check change on any form element

Question

I have a from with disabled button, which gets enabled when the form is valid. With the function below I'm checking for changes and it works if the form consists only of inputs. How can I check for change on other elements like select or checkbox?

$("#create-rule-form").parsley();
$('input').on('keyup', function() {
  $("#create-rule-form").parsley().validate();
  if ($("#create-rule-form").parsley().isValid()) {
    $('#create-rule-btn').prop('disabled', false);
  } else {
    $('#create-rule-btn').prop('disabled', 'disabled');
  }
});

Possible duplicate of [Detecting data changes in forms using jQuery](https://stackoverflow.com/questions/807159/detecting-data-changes-in-forms-using-jquery) — Ali Sheikhpour, Oct 20 '19 at 14:52

Barmar · Accepted Answer · 2019-10-20T14:57:38.937

2

Use jQuery's :input selector, it matches all tags that are used for form input.

$(":input").on('edit change').function() {
  // code here
});

edited Oct 20 '19 at 14:57

answered Oct 20 '19 at 14:50

Barmar

741,623
53
500
612

Neat, but it's `:input`, not `::input`. – Anis R. Oct 20 '19 at 14:56
Thanks, just a typo. – Barmar Oct 20 '19 at 14:57

Anis R. · Answer 2 · 2019-10-20T15:02:14.620

0

You can use $('form').find('*') to select all of the form's children and grandchildren, and then apply the event to all of them like below.

Also, on a side note, I believe the event you should handle is change instead of keyup, as keyup will not work with checkboxes and dropdowns.

$('form').find('*').on('change', function() {
  //do stuff
});

edited Oct 20 '19 at 15:02

answered Oct 20 '19 at 14:53

Anis R.

6,656
2
15
37

They might not be direct children. – Barmar Oct 20 '19 at 14:58

Change event to check change on any form element

2 Answers2