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.