jQuery serializeArray not picking up dynamically created form elements

Question

Hi, I've got a form that's dynamically created using ajax (as data for the form elements has to come from a database) and I want to serialize the elements of the form to submit by ajax. I'm currently just testing my theory using code from the jQuery website just to see if I can pick up the form elements and this is where the problem lies:

$(document).ready(function() {
    $('#btnCustomSearch').live('click', function() {
            $('#results').html('');
            alert($('#customSearchTable :input').serializeArray());
            // get all the inputs into an array.
            var fields = $('#customSearchTable :input').serializeArray();
            jQuery.each(fields, function(i, field) {
                $("#results").append(field.name + " = " + field.value + ", ");
            });

            // now we'll reformat the data as we need

            // here we'll send the data via ajax

    });
});

I need to make some changes to the data prior to submission and this code is not written yet, but what I'm finding is that any input elements on the page that existed at time of page loading are picked up correct, any elements that are populated using Javascript are picked up correctly, but any created using ajax are ignored.

I know this is normally resolved using "live", but I'm unclear as to how to resolve this with serializeArray(). Using Ajax additional form elements are added to the #customSearchTable and these are the ones not being picked up.

Any help great appreciated.

Thanks

Answer 1

For anyone else that finds this as an "issue", please note that as per Nick Craver's comment above, all that's required is to ensure that the "name" attribute is appended to the new form elements that are created dynamically. This resolved my problem! Thank you very much indeed Nick!

Answer 2

I'll expound upon the comment a bit more here:

When you call .serializeArray() it's looping through just as a <form> submission would or as close as possible anyway, to get the elements to be submitted. The key part is here:

.filter(function() {
  return this.name && !this.disabled &&
         (this.checked || rselectTextarea.test(this.nodeName) ||
         rinput.test(this.type));
})

Just as a <form> submit wouldn't include elements without a name attribute, the .filter() call using this.name will filter those elements out of ones to be serialized.