Question

I’m trying to submit a form which contains dynamic elements that were added to the DOM by jQ after the page has completed loading.

When I run a serialize() on the form, it’s grabbing the data for all fields that are hardcoded into the page – but not the dynamic fields.

Here are some code snippets of the same..

HTML

<form id="someform" name="someform" method="post" action"">
    <input type="text" name="afield" />
 <ul id="somelist">
 </ul>
 <input type="submit" name="submit" />
</form>

<img id="add" src="add-button.png" />

<div class="new_unit" style="display:none">
 <input type="text" name="somefield" />
</div>

JavaScript

<script type="text/javascript">
// Adds a new field to the form
$( '#add' ).click( function() {
 $( '#somelist' ).append( '<li>' + $( '.new_unit' ).html() + '</li>' );
});

// Validate before submission
$( '#someform' ).validate({
 .......,
 .....,
 submitHandler: submit_form
});

function submit_form() {
 _data = $( '#someform' ).serialize();
 alert( _data );
}
</script>

Upon hitting the submit button, data in the static field, afield is showing up… but any of the somefields added by jQuery aren’t.

I found a couple of similar questions here. I’m complying to the suggested solution yet no effect.

I’m using the latest jQuery (1.4.1) – and have considered playing with the live() event binder. I have a feeling that may help solve this issue, but cannot figure out how to use it in conjunction with the validate() plugin.

Any suggestions ?

Thanks,
m^e

Answer 1

The problem is that your dynamically added fields are all named the same. You either have to give them different names or, depending on what you use on the server, you could give them a name like somefield[] to aggregate them (PHP and I believe Python deal with this).

To give them a different name, it might be slightly easier to do this:

<input type="text" id="copy" />

and:

$("#add").click(function() {
  $("#copy").clone().removeAttr("id").attr("name", "field[]")
    .appendTo("#somelist").wrap("<li>")
});