Dynamic generated form fields issues

GravyMonster · 28 Oct 2008 at 13:57

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 · 28 Oct 2008 at 14:00

Are the added elements within the <form> tags?

GravyMonster · 28 Oct 2008 at 14:03

Yup.

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

*edit*
Here's the form HTML:

Code:

<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:

Code:

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 · 28 Oct 2008 at 15:01

'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 · 28 Oct 2008 at 15:41

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

.