Question

I’m using jQuery to dynamically create new fields for email addresses which consist of a SELECT dropdown box to specify the type of email address and a text INPUT for the email address.

HTML

<form enctype="multipart/form-data" action="handler.php" method="post" />
<ul class="ul-lov">
<li>
    <select name="email_type_id[]" class="float-l edit-email-type">
      <option value="1">No Label</option>
      <option value="5">Email</option>
      <option value="10" selected="selected">Personal</option>
      <option value="20">Work</option>
      <option value="30">Other</option>
    </select>
    <input type="text" name="email_value[]" value="[e-mail]" class="float-l edit-email"> 
    <img src="/gui/minus-button.png" class="minus">
    <img src="/gui/plus-button.png" class="addlov">
</li>
</ul>
</form>

jQuery:
When the user clicks the “plus-button.png”, it will run the following code. Essentially it just creates a copy of the current LI and strips the values.

// Click plus
$('.addlov').live('click', (function() {        
    $(this).closest('ul').append(
        $(this).parent('li').clone(true).children('input, select').val('').end()
    );
    $(this).remove();
}));

This all works good and well, the problem is that when I submit the form, the dynamically created fields are ignored. On submit, I’m serializing the form data and displaying in an alert to verify this. I’ve tried everything, can’t seem to see what the issue is!? Any ideas?

Answer 1

I figured it out…

The form snippet I posted above was a small part of a much larger app. The app still only uses one form on the page. There are numerous form elements in different divs. The reason it wasn’t working is because my FORM tag was not outside of all of the divs.

Here’s an example of how my code was set up:

<div id="topform">
    <form action="handler.php" method="post">
    // some form items
</div>
<div id="moreformstuff">
    // some form items
</div>
<div id="bottomformstuff">
    // some form items
    </form>
</div>

So I moved my tags around like this:

<form action="handler.php" method="post">
<div id="topform">        
    // some form items
</div>
<div id="moreformstuff">
    // some form items
</div>
<div id="bottomformstuff">
    // some form items
</div>
</form>

And everything now works fine. :/ Hope this helps someone else to not waste hours with the same issue!