Form not submitting dynamically generated inputs (jQuery)

Question

Hello I'm trying to dynamically generate some inputs for my form, but it's not posting the new inputs generated, so far I've been searching around and the only thing I was able to find is to make the form a direct children of the body tag, and as in the design of my app thats not possible, so somebody might know what happens and how to solve it? And no, it doesn't work with .live().

HTML

 <form name="order" id="newOrder" action="../core/query.php" method="post">
        <input type="text" value="Search" id="itemSearch" class="search"/>
        <input type="hidden" id="itemAdd"/>
        <button type="button" class="boton" id="additem">Add</button> 
        <br>
        <div id="items"></div>
        <br>
        <button type="submit" class="boton" > Submit</button>
        <button type="reset" class="boton" style="float:right;"> Cancel</button>
        </div>
    </form>

Javascript

  $('#additem').click(function(){
if($('#itemAdd').val()){
    var rawr = $('<div></div>')
    .css('display','none')
    .html(  '<br><table><td>'
            +currItem.label+'</td><td> Size '
            +currItem.size+'</td><td class="right">$'+currItem.price
            +'</td></table> <input type="hidden" name="contents[]" value="'
            +currItem.value+'"/>');
    var mhm = currItem.price;
    rawr.appendTo('#items').toggle(500).click(function(){
        $(this).toggle(500,function(){
            $(this).remove();
        });
        $('#total').fadeOut("fast",function(){
            total = (parseFloat($(this).text())-parseFloat(mhm)).toFixed(2);
            $(this).text(total).fadeIn("fast");
        });
    });
    $('#total').fadeOut("fast",function(){
        total = (parseFloat($(this).text())+parseFloat(mhm)).toFixed(2);
        $(this).text(total).fadeIn("fast");
        currItem=null;
    });
   }
  });

So basically I use jQuery UI autocomplete with a remote JSON that when pressing the #addItem button creates a table with some text and a hidden input with an ID from a database, all get displayed correctly, but when submitting they are not posted nor serialized.

Solution 1

Might be time to do some debugging. Are you sure it's not being POSTed? The following jsFiddle uses your exact code, and when the form is submitted, you can see the values being POSTed in Firebugs NET tab.

http://jsfiddle.net/s6Umg/

Check your real example using the NET tab in Firebug to see if the values are actually getting passed through. Perhaps there's a problem accessing the data once it's already been posted. How are you accessing the POST data in your query.php file?

Solution 2

Form elements need a "name" attribute not just an "id"... or their data will not get submitted.