Select form from multiple forms in JQuery

Question

Using Jquery change(), how can I select just form1 fields instead of just all form fields? Here's my code below. Right now its detecting changes for the fields of both forms, however I only want it to detect changes in fields in form1.

<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input type="text" name="textfield" id="textfield" />
<label for="select"></label>
<select name="select" id="select">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</form>

<form id="form2" name="form2" method="post" action="">
<label for="textfield2"></label>
<input type="text" name="textfield2" id="textfield2" />
<label for="select2"></label>
<select name="select2" id="select2">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</form>

<script>
$(':input').change(function() {
        alert('Handler for .change() called.');
        }); 
</script>

clem · Accepted Answer · 2012-02-29 23:43:25Z

1

to detect only change events from form1:

$('#form1 :input').change(function() {
   alert('Handler for .change() called.');
});

to do the same for form2 you'd have to change it to

$('#form2 :input').change(function() {...

answered Feb 29, 2012 at 23:43

clem

3,3661 gold badge24 silver badges33 bronze badges

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

Comments

escusado · Accepted Answer · 2012-02-29 23:47:15Z

1

http://jsfiddle.net/escusado/nVxFh/

'change' event bubbles so you can catch it at a container level:

$('#form1').change(function(){
  $('#console').text('te');
  //change actions
});

answered Feb 29, 2012 at 23:47

escusado

4652 gold badges5 silver badges10 bronze badges

Comments

Developer · Accepted Answer · 2012-02-29 23:44:23Z

0

You can add a class specific to your form 1 stuff and refer to that

<form class="form1sel" id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input class="form1sel" type="text" name="textfield" id="textfield" />
<label for="select"></label>
<select class="form1sel" name="select" id="select">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</form>

<script>
$('.form1sel').change(function() {
    alert('Handler for .change() called.');
}); 
</script>

or just use a more specific selector

<script>
$('#form1 :input').change(function() {
    alert('Handler for .change() called.');
}); 
</script>

answered Feb 29, 2012 at 23:44

Developer

2,00612 silver badges11 bronze badges

Collectives™ on Stack Overflow

Select form from multiple forms in JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related