1

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.

Improve this question

3 Answers 3

Reset to default
2 
$("#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(){ });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

jQuery handles chaining automatically, so the following should work:

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

4 Comments

I have put an alert in the function body, but I don't get any alerts. Does it work for you? I was testing on the select boxes. By the way there can be variety of input elements including select, text boxes, radio button etc.
Yes, my code should work for text boxes, radio buttons and select boxes at least (text boxes only fire the even when they lose focus, though, not on every keypress). The most likely reason that it doesn't work is that you're not selecting the elements you expect in the selector (i.e. the "div input" bit). To test out that theory, try: $("div input").each(function() { alert(this); }); That should tell you if you're actually selecting the right elements.
It won't work for select boxes, though, since it only looks for input tags. You'd need to change the selector to something like $("input, select").
Oh right, duh! Yeah, select boxes have a different tag, so you need to use the right one. Or the ":input" selector as rahul says below.
1

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)

Improve this answer

3 Comments

Will this attach event handler to text area also?
Not as it is written, although it isn't much more difficult to extend this code in such a way. (textarea support can be added as easily as select support if I'm not mistaken)
My requirement is I have one div where html elements are inserted through html template. Whenever any of the html element values are changed within the div, I need to loop through all the elements and store their values in a single hidden field that I can retrieve from server side.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.