Using multiple jQuery selectors?

Question

This is my example code:

<input type="text" id="input1" />
<input type="text" id="input2" />

<div id="result"></div>

And in jQuery I want to listen to both inputs change somehow like this:

$('#input1,#input2').change(function(){

var val1 = $('#input1').val();
var val2 = $('#input2').val();

[...some more code...]

});

but I just can't get it to work... Any help? Thanks in advance...

That should work fine. Have you placed your JavaScript code inside $(document).ready(function() { ... })? — VisioN
– VisioN, Commented Oct 17, 2012 at 10:03
This code should work. Where did you register this lines? in document.ready? Please make sure your HTML ids are 'input1' rendered in browser. Just checking view source will help — Murali Murugesan
– Murali Murugesan, Commented Oct 17, 2012 at 10:03
works just fine.. note that the change happens when the input box loses focus. (else you should uses the key events) — VDP
– VDP, Commented Oct 17, 2012 at 10:04

Pez Cuckow · Accepted Answer · 2012-10-17 10:04:46Z

5

What doesn't work? See http://jsfiddle.net/XYSwz/

Html

<input type="text" id="input1" />
<input type="text" id="input2" />
<div id="result"></div>

jQuery

$(document).ready(function() {
    $('#input1, #input2').change(function(){
        var val1 = $('#input1').val();
        var val2 = $('#input2').val();
    
        alert(val1);
        alert(val2);
    });
});

answered Oct 17, 2012 at 10:04

Pez Cuckow

14.5k19 gold badges83 silver badges132 bronze badges

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

Comments

Alessandro Minoccheri · Accepted Answer · 2012-10-17 10:04:45Z

1

Try this code:

$(document).ready(function() {
  $('#input1,#input2').change(function(){
    var val1 = $('#input1').val();
    var val2 = $('#input2').val();
     alert(val1);//test
     alert(val2);//test
  });
});

JSFIDDLE

answered Oct 17, 2012 at 10:04

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

Comments

BenM · Accepted Answer · 2012-10-17 10:05:07Z

1

Your code should function as is.

You could always try the add() function:

$(function() {
    $('#input1').add('#input2').change(function() {
        var val1 = $('#input1').val();
        var val2 = $('#input2').val();

    });
});

If your elements are created dynamically, you'll need to use the on() or live() function:

$(function() {
    $('#input1').add('#input2').on('change', function() {
        var val1 = $('#input1').val();
        var val2 = $('#input2').val();

    });
});

answered Oct 17, 2012 at 10:05

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Collectives™ on Stack Overflow

Using multiple jQuery selectors?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related