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.

@3nigma w3.org/wiki/HTML/Elements/br No it shouldn't it depends on the Doctype. Also nothing to do with my question :/ — nyanko
– nyanko, Commented Nov 19, 2011 at 23:18

g19fanatic · Accepted Answer · 2011-11-19 23:42:28Z

10

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

answered Nov 19, 2011 at 23:42

g19fanatic

11.1k6 gold badges37 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nyanko Over a year ago

If you look at the code for creating the dynamic elements they do have attribute name, name="contents[]", All the id's of the other things are merely for manipulating them whit jQuery, I'm only interested in submitting the dynamic fields.

Christian · Accepted Answer · 2011-11-19 23:32:42Z

3

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?

answered Nov 19, 2011 at 23:32

Christian

19.8k3 gold badges57 silver badges70 bronze badges

6 Comments

nyanko Over a year ago

A simple print_r($_POST); I use chrome, and its developer tools, and the post data is posted and does not contain the dynamic inputs. I've read it has something to do with the form being inside a <div> which certainly I have a couple.

Christian Over a year ago

I just chucked it inside three divs in the jsFiddle, contents[] array still gets passed through. Checked in both Chrome and Firefox. Can you see a difference in the POST data between the jsFiddle and your actual code in Chrome inspector?

nyanko Over a year ago

It might be that the php file containing my form is loaded via ajax? then inside it the new inputs are created... I've nested several div's on jsFiddle and its working...

nyanko Over a year ago

Yes, in jsFiddle the contents fields are actually passed, while in my code they aren't, php says so as well.

Christian Over a year ago

You're disabling the inputs. Disabled inputs don't get submitted with forms. Try using readonly attribute instead :)

|

Collectives™ on Stack Overflow

Form not submitting dynamically generated inputs (jQuery)

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related