Detect specific field id on form change with jQuery

Question

I have a simple form which currently uses jQuery to do some dynamic calculations based on user form input.

Most form fields are disabled and their value is calculated using the values of the non-disabled fields. Part of the calculation involves an AJAX call to save the field value to a database.

I could use the following code:

$('#specific-field').change(function() {
    calculateThings();
});

But this would involve repeating for every field whose value can be altered.

I could also do this:

$('form').change(function() {
    calculateThings();
});

But then I'd have to save and update every database field every time a change is made, when only one field at a time will potentially contain a different value.

Is there a way to merge the two possibilities, where I can monitor changes at the form level but then detect which specific field within the form was changed?

score 2 · Answer 1 · answered Aug 06 '13 at 11:05

2

Couldn't you do something like:

$('.genericFieldClass').change(function() {
    calculateThings();
});

answered Aug 06 '13 at 11:05

Remko

968
6
19

David MacCrimmon · Answer 2 · 2013-08-06T11:22:57.673

1

You could do the following:

$("select").change(function () { 
    var changedSelectId = $(this).attr("id");
});

edited Aug 06 '13 at 11:22

answered Aug 06 '13 at 11:11

David MacCrimmon

966
1
6
19

score 0 · Answer 3 · answered Aug 06 '13 at 11:05

You could get all the input fields in the form by using:

$('form input').change(function() {
    calculateThings();
});

And if you have a select just add form select in there:

$('form input, form select').change(function() {
    calculateThings();
});

score 0 · Answer 4 · edited May 23 '17 at 12:12

0

You can't do it because the change event does not propagate.

You can add a class like changeinput to all the input elements which can be changed then

$('.changeinput').change(function() {
    calculateThings();
});

edited May 23 '17 at 12:12

Community

1
1

answered Aug 06 '13 at 11:05

Arun P Johny

384,651
66
527
531

score 0 · Answer 5 · answered Aug 06 '13 at 11:05

Classes were designed to allow multiple elements to have the same functionality applied to them. With that in mind try this:

$('.dynamic-field').change(function() {
    calculateThings();
});

You can then give the elements which should trigger the calculation the class 'dynamic-field' and you're done.

score 0 · Answer 6 · edited Feb 20 '15 at 19:43

0

would this help?

$('input,select,textarea').change(function(){
   var elementChanged = $(this).attr("id");
   //ajax call you wanna do and whatever else
});

edited Feb 20 '15 at 19:43

GitaarLAB

14,536
11
60
80

answered Aug 06 '13 at 11:08

pythonian29033

5,148
5
31
56

score 0 · Answer 7 · answered Aug 06 '13 at 11:08

Add a class to the form elements or use the child selector if you know the type of inputs you want to watch out for. If you use a class:

<input type="" class="myClass" />
<input type="" class="myClass" />
<input type="" class="myClass" />
<input type="" class="myClass" />

In the jquery:

$('.myClass').change(function() {
   calculateThings();
});

Or without using class:

$('form').children("input[type='text']").each(function(){             // Or whatever input type you want to look out for
    $(this).change(function(){
       calculatethings();
    });
});

Detect specific field id on form change with jQuery

7 Answers7