jquery - dynamically created form only passing some of the input post data on form submit (form closed prematurely)

Question

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: enter image description here

Here is the print_r($_POST); output after submitting: enter image description here

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.

Is there a way to see the HTML passed to your browser by your server? — PeterKA
– PeterKA, Commented May 22, 2014 at 5:15
I'm using Firebug in Firefox. No console errors or anything, and the html is apparently there — khaverim
– khaverim, Commented May 22, 2014 at 5:19
@khaverim : How do you send form data's into PHP? Show your html form also.. — Ranjith
– Ranjith, Commented May 22, 2014 at 5:24
@Ranjith the form has method="post" and I retrieve the data using PHP's $_POST array. There is no HTML form. This is how it is created, on the fly, entirely — khaverim
– khaverim, Commented May 22, 2014 at 5:25
What I am saying is, can you post here the generated HTML. You can get that from Firebug. — PeterKA
– PeterKA, Commented May 22, 2014 at 5:27

PeterKA · Accepted Answer · 2014-05-22 05:52:02Z

1

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.

edited May 22, 2014 at 5:52

answered May 22, 2014 at 5:42

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

3 Comments

khaverim Over a year ago

If this is true.... a pox on html()! In my case I need different strings in different places! I'm not putting the whole form all in one element's contents! +1 for this knowledge...assuming it's true, which it sure looks like it.

PeterKA Over a year ago

You are safer having <form.... before the table and </form> after the table. If the table already exists you could write $('table').wrap('<form action="..." .../>') - you don't even need to supply the closing tag, then you can append well-formed HTML into each cell of the table.

khaverim Over a year ago

I will forever remember to put <form>s outside of <table>s. Many thanks. After putting the form opening and closing tags in the initial HTML (not generating them inside the table with jQuery), the POST data went through correctly. +1,000

Kapil gopinath · Accepted Answer · 2014-05-22 05:38:58Z

0

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 + "' />");

answered May 22, 2014 at 5:38

Kapil gopinath

1,0431 gold badge8 silver badges19 bronze badges

2 Comments

khaverim Over a year ago

Using an array instead of the string for a name did not change the result :\

Kapil gopinath Over a year ago

can you create a jsfiddle for the same

Collectives™ on Stack Overflow

jquery - dynamically created form only passing some of the input post data on form submit (form closed prematurely)

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related