jQuery capture all changes to named inpt on a form

Posted by Brian M. Hunt on Stack Overflow See other posts from Stack Overflow or by Brian M. Hunt
Published on 2010-06-10T22:35:44Z Indexed on 2010/06/10 22:43 UTC
Read the original article Hit count: 366

I'm trying to determine when any of a set of named input/select/radio/checked/hidden fields in a form change.

In particular, I'd like to capture when any changes are made to fields matching jQuery's selector $("form :input"), and where that input is has a name attribute. However, the form isn't static i.e. some of the fields are dynamically added later.

My initial thought is to keep track of when new named elements matching :input are added, and then add an event handler, like this:

function on_change() {
   alert("The form element with name " + $(this).attr("name") + " has changed");
}

function reg_new_e_handler(input_element) {
    input_element.change(on_change);
}

However, I'm quite hopeful I can avoid this with some jQuery magic. In particular, is there a way to register an event handler in jQuery that would handle input elements that match the following:

$("form :input").filter( function () { $(this).attr("name") } ).change(on_change);

However, have this event set update whenever new input elements are added.

I've thought that it may be possible to capture keyup event on the form node with $("form").keyup(on_change), but I'm not so sure how one could capture change events.

I'd also like this to capture keyup events.

Thank you for reading.

Brian

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery