JQuery input elements

Question

I need to get all input elements within a div and then attach event handlers, so that whenever values change it updates a hidden field. Children elements within the div might already contain event handlers, if so the attach should chain it.

Any help is much appreciated.

Answer 1

jQuery handles chaining automatically, so the following should work:

$("div input").change(function() { whatever(); });

Answer 2

Well, I'm curious why you need to update a hidden field and have your data duplicated. But if you insist, here is a "one size fits all solution", although you may lose some flexibility doing this instead of manually attaching each element.

First, the HTML:

<form id="form">
   <input type="text" id="txtName" />
   <input type="hidden" id="hdnName" />

   <input type="text" id="txtEmail" />
   <input type="hidden" id="hdnEmail" />

   <select id="selGender">
      <option value="male">Male</option>
      <option value="female">Female</option>
   </select>
   <input type="hidden" id="hdnGender" />
</form>

Now, the Javascript:

$(document).ready(function() {
   $("#form").find("input[type='text'], select").change(function() {
      $this = $(this);

      var id = $this.attr("id");
      id = id.split(3, id.length - 1);

      $("#hdn" + id).val($this.val())
   });
});

For this to work, it assumes you have each of your fields as text fields, also that they follow the naming convention I used here ([txt|sel]FieldName, hdnFieldName)

Answer 3

$("#divID :input").change(function(){
    // write your code here
});

where divID is the unique id of the div. This selects all input, textarea, select and button elements inside the div.

See :input Selector

If you want to avoid the button element you can use the not operator like

$("#divI :input:not('button')").change(function(){

});