18

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 below the first 3.

My current change statement:

    $('input.#invent').change(function () {

works fine for the change event on the first textbox, but the others with the same information do not fire it when changed

What is the best strategy for getting the change event to fire when any of the 3+ textboxes change??

informatik01
  • 16,038
  • 10
  • 74
  • 104
user2182715
  • 349
  • 1
  • 2
  • 8

6 Answers6

24

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
});
webaholik
  • 1,619
  • 1
  • 19
  • 30
14

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.

dsgriffin
  • 66,495
  • 17
  • 137
  • 137
7

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 () {

    });
});
Eli
  • 14,779
  • 5
  • 59
  • 77
  • using an elements unique `id` value can be beneficial for selecting when there is a known pattern to the element(s) `id`. Such as `control_1235`, `control_12543`, etc. – GoldBishop Nov 15 '17 at 15:55
3

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
}):
palaѕн
  • 72,112
  • 17
  • 116
  • 136
2

@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();
                    });
                });
sarathkumar
  • 428
  • 3
  • 13
  • why do this? seems overly complex, when you could simply do `$('input[type=text]').on('change', function(){....});` or even `$('input[type=text]').change(function(){....});` – GoldBishop Nov 15 '17 at 15:57
0

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

Use a class instead :-).

Alytrem
  • 2,620
  • 1
  • 12
  • 13
  • that's right. just adding something same ID on multiple elements is also semantically wrong. Remembers ID's can be used to link specific parts of page, something that was done by anchor tag's before. Not your answer but keep it in mind, while writing that markup – lazyprogrammer Apr 07 '13 at 15:52
  • this is technically incorrect, you can use the elements `id` attribute to capture multiple controls. Regarding Templating, you can use a known `id` pattern to capture multiple elements. – GoldBishop Nov 15 '17 at 15:56