javascript - Trying to serialize a form with dynamically created input elements, but values of elements aren't posted -
javascript - Trying to serialize a form with dynamically created input elements, but values of elements aren't posted -
i dynamically adding elements. when seek , serialize form, none of dynamically generated elements serialized.
this function i'm using add together elements page :
function addobjects(idname,classname) { //to add together more objects var number; switch(classname) { case "name": number = no_name++; break; case "part": number = no_part++; break; } var id = classname + number; $("#"+idname).append('<tr class="'+id+'"><td><input id="'+id+'" class="'+id+'" type="text"> <button class="'+id+'" onclick=removeadditions("'+id+'")>x</button></td></tr>'); } the page looks this:
<html> <head> <script src="controller.js" type="text/javascript"></script> <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> //in order prevent form reload when button click occurs $(document).ready(function(){ document.getelementbyid("reportform").onsubmit = function (event) { event.preventdefault(); } }); </script> </head> <body> <div class="detailspane" id="detailspane1" > <form id="reportform" name="reportform" > <table style="width: 100%;"> <tbody> <tr> <td> 1. describe status briefly- </td> <td> <textarea id="statdescp" name="statdescp"></textarea> </td> </tr> </tbody> </table> <br> <table style="width: 100%;"> <thead> <tr> <th colspan="4" align="top"> part status </th> </tr> </thead> <tbody> <tr> <td style="vertical-align:top;"> part name: </td> <td style="vertical-align:top;"> <table > <tbody id="partname"> <tr class="partname0"> <td><input class="part_name" type="text"> <button onclick='addobjects("partname","part_name");'>+</button></td> </tr> </tbody> </table> </td> <tbody> </table> </form> </div> <div id="buttondiv" > <a class="bottomleftresultdiv" id="messagebox"></a> <input type="button" id="savebutton" value="save" style="width:85px" onclick="save();" /> </div> </body> </html> and finally here save button.
function save() { var select = document.getelementbyid('newreportpane'); var contents = $('#reportform').serialize(); contents = contents.replace(/=on/g, "=checked"); contents = contents.replace(/\+/g, " "); $("#messagebox").html("saving report..."); console.log(contents); $.post("/report/report1", { action: "save", content: contents }, function (data) { if (data != "ack") $("#messagebox").html("unable save."); else $("#messagebox").html("report saved successfully"); }); } when click on save button, posts statdescp= without of dynamically generated elements. can't figure out why. help appreciated.
give name= attribute each of added inputs.
from http://api.jquery.com/serialize/
for form element's value included in serialized string, element must have name attribute.
javascript jquery html forms dynamic
Comments
Post a Comment