One jQuery Change Event on Multiple Elements

Question

I have 3 textboxes, all with the same id\'s that I process into ASP by bringing it into a controller array

I have a link that adds an unlimited number of textboxes b

Answer 1

Lets say your HTML is like this:

<input type="text" id="invent" />
<input type="text" id="invent" />
<input type="text" id="invent" />
<input type="text" id="invent1" />
<input type="text" id="invent2" />
<input type="text" id="invent3" />

Now the Id must be unique. So put a class to all the inputs like invent and the HTML will be:

<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />

And call the on change event like:

// This would be called now for all the text-boxes
$('input.invent').change(function () {
   // Your code here
}):

In case, you can't add class for all the text-boxes. You cam simply do this:

$("input:text").change(function () {
   // Your code here
}):

Answer 2

Since id is unique, you should using class instead. Then you can iterate over your class using each and apply $(this) to target current change input:

$('input.invent').each(function () {
    $(this).change(function () {

    });
});

Answer 3

Best strategy (95% of the time): use a class to add a listener for multiple elements. ID's are expected to be unique. Classes are made for this and will give you the most extensibility in the future.

HTML:

<input type="text" name="input1" class="invent" />
<input type="text" name="input2" class="invent" />

jQuery:

$('.invent').change(function () {
   // Do magical things
});

For the other 5%:

If you'd rather use unique IDs or unique field names instead of a single class as described in the selected answer, you can add a listener for multiple uniquely named elements like so:

HTML:

<input type="text" name="something1" id="invent1" />
<input type="text" name="something2" id="invent2" />
<input type="text" name="something3" id="invent3" />

you can use jQuery multiple selectors:

$('#invent1, #invent2, #invent3').change(function () {
   // Do magical things
});

OR you can use jQuery starts with attribute selector:

//target based on what input id starts with
$('[id^="invent"]').change(function () {
   // Do magical things
});

// OR target based on input name attribute starts with
$('input[name^="something"]').change(function () {
   // Do magical things
});

Answer 4

You cannot use ID to reference more than one element. An ID must be UNIQUE on any HTML page !

Use a class instead :-).

Answer 5

@Eli answers exactly matches for you. If you want to read all the Text-boxes then you can use the following method.

  $('input[type=text]').each(function () {
                    $(this).change(function () {
                        alert($(this).val());
                        $(this).focus();
                    });
                });

Answer 6

Change all three elements with the #invent ID to a class instead (ID's must to be unique), or it's only going to work for the first element, like what's currently happening in your case.

Then, you can target all of the elements that have the .invent class:

$('input.invent').change(function () {
   // Here, $(this) refers to the specific element of the .invent class which 'changed'
}):

Read more about the difference between ID and Class selectors here.