Dynamic generated form fields issues

[GravyMonster]

Hi all,

I can't really post much code as the system is very convoluted, but basically I have a form which allows for entry of dates.

When you click a button another row of input fields appears in the form through a javascript function which changes the innerHTML property of the containing div. When the form is submitted after you click to add another row, the post data does not include these fields - it's like they don't exist in the form. Yet if i just submit the form without adding a row, it works fine.

It's like the javascript somehow interferes with the form and although the fields appear and work correctly, they cannot be seen by the page which receives the post.

Can anyone help as I've no clue what's going on.

TIA

 

[Pho]

Are the added elements within the <form> tags?

 

[GravyMonster]

Yup.

I'll see if I can cobble together some code to hopefully make this a little clearer.

*edit*
Here's the form HTML:

<form name="frmCourse" method="post" action="process.asp" onsubmit="return testValid()">
	<table border="0" cellpadding="2" cellspacing="0" width="100%">
		{other fields}

		<tr>
			<td width="80" valign="top"><span style="margin-top: 2px; display: block;">Date(s):</span></td>
			<td>
				<div id="divDateContainer">
				</div>
			</td>
		</tr>
		<tr><td colspan="2" align="right"><a href="javascript: void addDate();"><i>[Add Date]</i></a></td></tr>

		{more fields}
	</table>
</form>

And this is the javascript which adds the extra fields:

function addDate() {
	var szDivHTML = '<div id="divDateDiv_{DIV_ID}" style="margin-bottom: 4px;"><table border="0" cellpadding="0" cellspacing="0"><tr><td><input type="text" name="txtCourseDate" onblur="validDate(this, \'Please enter a valid date\', 1)" size="20" maxlength="150" value=></td><td><select name="cboCourseHour"><option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option></select></td><td>:</td><td><select name="cboCourseMin"><option value="00">00</option><option value="05">05</option><option value="10">10</option><option value="15">15</option><option value="20">20</option><option value="25">25</option><option value="30">30</option><option value="35">35</option><option value="40">40</option><option value="45">45</option><option value="50">50</option><option value="55">55</option></select></td><td><div onclick="void removeElement(\'divDateContainer\', \'divDateDiv_{DIV_ID}\')" id="linkage_{DIV_ID}" style="cursor: hand; cursor: pointer;"><i>&nbsp;[remove]</i></div></td></tr></table></div>';
	document.getElementById('divDateContainer').innerHTML += szDivHTML.replace(/{DIV_ID}/g,document.getElementById('hidNextDivID').value);
	document.getElementById('hidNextDivID').value++;
}

function removeElement(parentDiv, childDiv) {
	 if (childDiv == parentDiv) {
		  alert("The parent div cannot be removed.");
	 }
	 else if (document.getElementById(childDiv)) {     
		  var child = document.getElementById(childDiv);
		  var parent = document.getElementById(parentDiv);
		  parent.removeChild(child);
	 }
	 else {
		  alert("Child div has already been removed or does not exist.");
		  return false;
	 }
}

The thing that confuses me is that i always see the fields before and after in the form, but the js fields in the container div dissappear if extras are added or removed.

Note: I didn't make this god-awful system, I'm just the monkey who has to fix it

 

[GravyMonster]

'tis fixed! \o/

I don't know exactly what the cause of the problem was, but it seemed to be that if you insert form elements by addding to element.innerHTML they are not passed through HTTP to the processing page. However if you add them with element.appendChild() or element.insertBefore() they are and it works!

Yay!

 

[Pho]

I wrote some quick and dirty ASP AJAX code which used innerHTML and worked fine so who knows .

I'm currently trying to figure out why when I submit the form called:
<form id="1124" name="1124" method="post" action="deliveriesmanager.asp">

The post back is:
Form: delivered = 1
Form: id = 1

I hate ASP :/.

edit: that would be because I added a hidden field element called id. I still hate ASP though .