Form element added using jQuery is not sent on POST

Question

I have a zend_form where I'm allowing the user to add form elements dynamically. Elements are added dynamically using jQuery : something like...

$(function(){
  $('#more_answers').click(function(){
    var elemNum = $('.dummy-element').size();

    $("<dd class='dummy-element' id='dummyanswer_"+elemNum+"-element'><input type='text' value='' id='dummyanswer_"+elemNum+"' name='dummyanswer_"+elemNum+"'></dd>").insertBefore('#more_answers-element');

    return false;
  });
});

The element is added correctly-within the tags. When I submit,the element added is not submitted. I checked in the in the Net view in firebug and the variable is indeed not passed at all.

What could the issue be? Would it have anything to do with zend_form specifically? I have added elements in the past to Zend_Forms using raw JavaScript and it was working just fine.

Any thoughts?

Thanks, I really appreciate it!

More markup for form elements as requested:

<dd class="dummy-element" id="dummyanswer_2-element">
  <input type="text" value="" id="dummyanswer_2" name="dummyanswer_2">
</dd> <!-- this element was NOT added using jquery -->
<dd id="dummyanswer_3-element" class="dummy-element">
  <input type="text" name="dummyanswer_3" id="dummyanswer_3" value="">
</dd> <!-- this element was added using jquery -->
<dd id="more_answers-element">
  <input width="170px" height="30px" type="image" style="" class="addDummyAnswer" src="/images/add_more_dummy_answers_button_370X60px.png" id="more_answers" name="more_answers">
</dd>

Answer 1

I had a similar problem once. If the form is inside a table, the element added (the input) will be a child of the table cell, not a child of the Form and will not be "linked" to the form as one of the form fields, even if the table tags are inside the form tags.

If you add the input field directly as a child of the form DOM node, then it will be "linked" to the form as one of its fields and should be submitted normally.

The big question is, can one somehow "link" an added input element to a form, when that element is added dynamically to the DOM as a child of a non-form node? I was never able to find a solution.

I had this problem when working on a Firefox extension, so this behavior was observed on Firefox. Not sure how other browsers handle the situation. Maybe you are experiencing something similar.

Answer 2

Ok solved - I was looking at the source in firefox and things were indeed rendered properly. However, I opened the same thing in web developer and the form tag was hidden. it looked something like this:

             <dl class = "zend_form">
                    <!---- all the elements -->
             </dl>
          <table>
               <form....></form> <!-- everything hidden -->   
         </table>

i deleted the table tag and it formatted fine. in this case, i believe it was because I did not have a < tr > within the table tag, so the < dl > was rendered outside the table and the form was rendered within the table. However, that still begs the question - why does it show up correctly in 'View Source'?