Jquery array of input IDs detect change

Question

I have a question about detecting changes if inputs in array of input IDs.

For example I have an array of input IDs: var arrayOfInputs = ['#firstname', '#lastname', '#email', '#phone'];

My problem is that I want to detect any input change in these fields, BUT I don't want to write a bulky script code for each input field separately.

So question is: do there is a way to detect input change for all these inputs in array with one or two lines of code with jQuery?

Maybe I should use something other than array of IDs?

I don't want to write a bulky script code for each input field separately. Have you heard about for loop? — hindmost
– hindmost, Commented Jul 19, 2015 at 7:51

T.J. Crowder · Accepted Answer · 2015-07-19 07:51:58Z

3

So question is: do there is a way to detect input change for all these inputs in array with one or two lines of code with jQuery?

Yes:

$(arrayOfInputs.join(",")).on("change", function() {
    // Here, `this` will refer to the input that changed
});

Live Demo:

var arrayOfInputs = ['#firstname', '#lastname', '#email', '#phone'];
$(arrayOfInputs.join(",")).on("change", function() {
  snippet.log(this.id + " changed");
});

<div><input type="text" id="firstname"></div>
<div><input type="text" id="lastname"></div>
<div><input type="text" id="email"></div>
<div><input type="text" id="phone"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Maybe I should use something other than array of IDs?

Yes, give them all a common class or data-* attribute or something instead of listing IDs.

Live Demo:

$(".watch-me").on("change", function() {
  snippet.log(this.id + " changed");
});

<div><input type="text" class="watch-me" id="firstname"></div>
<div><input type="text" class="watch-me" id="lastname"></div>
<div><input type="text" class="watch-me" id="email"></div>
<div><input type="text" class="watch-me" id="phone"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

answered Jul 19, 2015 at 7:51

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Royi Namir Over a year ago

IMHO - this will only work if the input loses focus. not at typing stage. ( like ng does). But I like the idea of splitting

T.J. Crowder Over a year ago

@RoyiNamir: Right, that's how change works. For more proactive notification, there's input, keydown, keypress, paste, ...

Royi Namir Over a year ago

Related , would you use here keydown/keyup or keypress ? ( i know that keypress is for visual chars....) but still , what would be your approach here ?

T.J. Crowder Over a year ago

@RoyiNamir: It would depend entirely on what I wanted to do in response.

Royi Namir Over a year ago

I really meant that. Your code is much shorter / dynamic. And yet , the more verbose code has been accepted....

|

Bhavin Solanki · Accepted Answer · 2015-07-19 07:51:53Z

1

You can use each() to do that things in sort code.

var arrayOfInputs = ['#firstname', '#lastname', '#email', '#phone'];
$.each(arrayOfInputs, function(index, data){
  $(data).on('change',function(){
     alert($(this).val());
  });
});

answered Jul 19, 2015 at 7:51

Bhavin Solanki

4,8143 gold badges28 silver badges47 bronze badges

5 Comments

T.J. Crowder Over a year ago

No, you don't need each here.

Bhavin Solanki Over a year ago

if you want different type of check for different input then you need to use each i think

T.J. Crowder Over a year ago

No, if you want a different check for each input, you don't want each, you want to hook up separate handlers.

Macas Over a year ago

ty, this works perfectly. Plus I changed 'change' to 'input' and this will work event better for me. Thanks.

T.J. Crowder Over a year ago

@Mac444s: You do understand that the loop in the above is pointless?

Collectives™ on Stack Overflow

Jquery array of input IDs detect change

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related