Javascript not sending post variables - No firebug errors?

Hi all,

I have a major problem with a script Im writing for personal use, driving me up the wall all weekend

The script allows you to add steps along with a picture and a caption, there is a button at the bottom which allows you to either ‘remove last step’ or ‘add another step’ limited to a maximum of 10 steps. When using it on a browser and viewing the html it works seamlessly, the name and id changes as required, it works great apart form the fact that after step1 none of the other steps (ie, step2 step3 step4) send the variables upon form submission. I am using method post for the form and below is the javascript and the html for the step adder:

<script type=“text/javascript”>

	var counter = 2;

	$("#addButton").click(function () {

			alert("Only 10 steps allowed");
			return false;

	var newTextBoxDiv = $(document.createElement('div'))
		 .attr("id", 'TextBoxDiv' + counter);

	newTextBoxDiv.after().html('&lt;div style="margin-bottom:25px; height:180px;"&gt;&lt;div class="form"&gt;&lt;label&gt;Step '+ counter + ': &lt;/label&gt;' +
		  '&lt;div class="form"&gt;&lt;input readonly="readonly" id="step'+ counter + '" type="hidden" name="step'+ counter + '" maxlength="92"size="50" value="step'+ counter + '"/&gt;&lt;div class="formholder"&gt;Photo &nbsp; &lt;input style="outline: 5px solid #f5f5f5;" type="file" class="file" name="pics' + counter + '"/&gt;&lt;/div&gt;&lt;/br&gt;' +
		  '&lt;div style="margin-top:10px; margin-bottom:10px;" class="formholder"&gt;Title &nbsp; &nbsp; &nbsp;&lt;input style="outline: 5px solid #f5f5f5; display:; width:330px;" id="rtitle' + counter + '" type="text" name="rtitle' + counter + '" maxlength="55" size="30"&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;' +
		  '&lt;div class="formholder"&gt;&lt;textarea style="outline: 5px solid #f5f5f5; display:block; width:370px; height:85px; padding:0; margin:0 auto; overflow:auto;" rows="3" cols="49" type="text" name="step' + counter + '" id="step' + counter + '" value="" &gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');



	 $("#removeButton").click(function () {
		  alert("No more steps to remove");
		  return false;


		$("#TextBoxDiv" + counter).remove();


	 $("#getButtonValue").click(function () {

	var msg = '';
	for(i=1; i&lt;counter; i++){
	  msg += "\

Step " + i + " : " + $(‘#step’ + i).val();

<div id=“fragment-4” class=“ui-tabs-panel”>
<div class=“dividerlarge”>

							&lt;div id='TextBoxesGroup'&gt;
								&lt;div style="margin-bottom:25px; height:180px;" id="TextBoxDiv1"&gt;
									&lt;div class="form"&gt;
										&lt;label&gt;Step 1: &lt;/label&gt;
										&lt;div class="form"&gt;
								    &lt;input readonly="readonly" id="step1" type="hidden" name="step1" maxlength="92"size="50" value="step1"/&gt;

									&lt;div class="formholder"&gt;
									Photo &nbsp; &lt;input style="outline: 5px solid #f5f5f5;" type="file" class="file" name="pics"/&gt;
								&lt;div style="margin-top:10px; margin-bottom:10px;" class="formholder"&gt;
								    Title &nbsp; &nbsp; &nbsp;
									&lt;input style="outline: 5px solid #f5f5f5; display:; width:330px;" id="rtitle" type="text" name="rtitle" maxlength="55" size="30"/&gt;
									&lt;br /&gt;
						&lt;div class="formholder"&gt;
										&lt;textarea style="outline: 5px solid #f5f5f5; display:block; width:370px; height:85px; padding:0; margin:0 auto; overflow:auto;" type='text' id='step1' name='step1' rows="3" cols="49"&gt;&lt;/textarea&gt;
							&lt;div style="float:left; width: 400px;"&gt;
								&lt;input style="border: 1px solid #dddddd; margin-left:95px; background:#f5f5f5; font-weight:bold; color:#78AB46;" type='button' value='Click to add step' id='addButton'&gt;
								&lt;input style="border: 1px solid #dddddd; background:#f5f5f5; font-weight:bold; color:#c16b54;" type='button' value='Click to remove last' id='removeButton'&gt;

Can you see any reason it is not sending the data??

I will be eternally greatful for any advice

It looks like every step id being added to the DOM in it’s own form. You should append them to the form that contains the submit button.

You can check the layout of your form using Firebug’s DOM inspector.

Hi Immerse,

Thanks a lot for your quick response
I had a look using firebug but to my knowledge it seems as if the elements are being included with the form
I have attached a URL to my testing ‘sandbox’ with a set of username and password so it is possible to visually see my awful code at work (log in with ajb225 as the username and tigger for the password, its the name of my cat dont laugh haha)
then after logging in navigate to the link you will see some tabs, if you click on create recipe and then steps or ingredients this is where the problem is

Thanks you soo much again