jquery - 动态创建的表单只传递表单提交上的一些输入发布数据（表单过早关闭）

I have an entire form which is created dynamically via jQuery. It submits fine with an onclick event from a <input type="button"> at the end of the form (side note: the form does not submit with an <input type="submit">. I don't know why but it could be relevant.). My problem is that for some reason, when I print_r($_POST); after submission, only two pieces of $_POST data end up passed, namely name=selectedID and name=CustomID. The rest of the <input>s don't pass their data.

Here is how the form gets created:

var sid = servHTMLid.replace("serviceSel", "");

var cidText = $("#" + servHTMLid + " td:nth-child(2)").html();
$("#" + servHTMLid + " td:nth-child(2)").html("<form name='serviceForm' id='serviceForm' method='POST' action='services.php?save'><input type='hidden' name='selectedID' id='selectedID' value='" + sid + "' /><input type='text' name='CustomID' id='CustomID' value='" + cidText + "' />");

// seems like from here out, these inputs don't POST
var catText = $("#" + servHTMLid + " td:nth-child(3)").html();
$("#" + servHTMLid + " td:nth-child(3)").html("<input type='text' name='Category' id='Category' value='" + catText + "' />");

var nameText = $("#" + servHTMLid + " td:nth-child(4)").html();
$("#" + servHTMLid + " td:nth-child(4)").html("<input type='text' name='Name' id='Name' value='" + nameText + "' />");

var durationText = $("#" + servHTMLid + " td:nth-child(5)").html();
$("#" + servHTMLid + " td:nth-child(5)").html("<input type='text' name='Duration' id='Duration' value='" + durationText + "' />");

var priceText = parseFloat($("#" + servHTMLid + " td:nth-child(6)").html()).toFixed(2);
$("#" + servHTMLid + " td:nth-child(6)").html("<input type='text' name='Price' id='Price' value='" + priceText + "' />");

var taxText = $("#" + servHTMLid + " td:nth-child(7)").html();
if (taxText == "yes") {
  $("#" + servHTMLid + " td:nth-child(7)").html("<input type='checkbox' name='Tax' id='Tax' checked />");
} else {
  $("#" + servHTMLid + " td:nth-child(7)").html("<input type='checkbox' name='Tax' id='Tax' />");
}

var InactiveText = $("#" + servHTMLid + " td:nth-child(8)").html();
if (InactiveText == "yes") {
  $("#" + servHTMLid + " td:nth-child(8)").html("<input type='checkbox' name='Inactive' id='Inactive' checked />");
} else {
  $("#" + servHTMLid + " td:nth-child(8)").html("<input type='checkbox' name='Inactive' id='Inactive' />");
}

$("#" + servHTMLid + " td:nth-child(9)").html('<input type="button" value="save" name="serviceFormSubmit" id="serviceFormSubmit" onclick="submitForm();" /></form>');

Here is a screenshot about to submit the form (with the 'save' button) after it being dynamically created:

Here is the print_r($_POST); output after submitting:

Notice there is no $_POST['Category'] or $_POST['Name'] etc.

For good measure, this is the submitting function called by the button's onclick event:

function submitForm()
{
 $("#serviceForm").submit();
}

EDIT: Just found out that the generated HTML apparently is closing the form prematurely..??

   <table class="services" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr id="serviceSel6" onclick="openEdits(this.id);">
<td>6</td>
<td>
<form id="serviceForm" action="services.php?save" method="POST" name="serviceForm">
<input id="selectedID" type="hidden" value="6" name="selectedID">
<input id="CustomID" type="text" value="Massage 09" name="CustomID">
</form> // <----- THIS... why?
</td>
<td>
<input id="Category" type="text" value="" name="Category">
</td>
<td>
<input id="Name" type="text" value="Mass Reflexology" name="Name"> // .....etc.

Be careful about using the jQuery methods creating dynamic html such as html(), append() and the like.

Any opening tag without a closing tag is given a corresponding closing tag. That's why </form> appears where you see it.

.html("<form name='serviceForm' id='serviceForm' method='POST' action='services.php?save'><input type='hidden' name='selectedID' id='selectedID' value='" + sid + "' /><input type='text' name='CustomID' id='CustomID' value='" + cidText + "' />");

html() did not see a </form> at the end of the string so it added one for you. Usually you would take your time to construct the whole form string and then you would invoke the appropriate method:

E.g. .html( 'Well-formed HTML String' )

JS FIDDLE <---- Check the console output.

My suggestion is to replace the name of the input element with an array

For eg:

var catText = $("#" + servHTMLid + " td:nth-child(3)").html();
$("#" + servHTMLid + " td:nth-child(3)").html("<input type='text' name='Category[]' id='Category' value='" + catText + "' />");