jQuery serializeArray not picking up dynamically created form elements

Question

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

This method doesn't care when the elements were added, it seems that they aren't being added correctly as form elements, can you post that code? For example, do they have a `name` attribute on them? — Nick Craver, Sep 02 '10 at 11:45
Nick, thanks so much, you're right, the dynamically generated form elements were missing the name attribute.... DOH!!! Thanks so much!! — Cydaps, Sep 02 '10 at 12:10

score 8 · Accepted Answer · answered Sep 03 '10 at 01:34

8

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.

answered Sep 03 '10 at 01:34

Nick Craver

623,446
136
1,297
1,155

Thanks Nick, hope that clarifies it for anyone else having the same issue. – Cydaps Sep 03 '10 at 07:41
got a fix for `` elements added to an already named ``? – lsl Feb 10 '14 at 00:52
1

@Louis how do you mean? I'm not sure I follow here...any ` – Nick Craver Feb 10 '14 at 03:26
@NickCraver I'm creating the empty ``s in a template, and adding the options dynamically with `$('').val(stringkey).html(stringkey).appendTo('#stringkeys');`, when I call `.serialize()` on the form the selected options aren't being returned if that makes sense? – lsl Feb 10 '14 at 03:38
1

@Louis `.val()` isn't valid on an ` – Nick Craver Feb 10 '14 at 14:05

score 1 · Answer 2 · answered Sep 02 '10 at 12:11

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!

jQuery serializeArray not picking up dynamically created form elements

2 Answers2

Linked