[thelist] Inserting Form Fields with JS in Netscape 6+

Thu Dec 5 13:10:01 CST 2002

(reply to Hassan Schroeder's sample code)

We couldn't get the code you sent to work in Mozilla 1.1, so here's a sample of the code we're trying that doesn't work in Mozilla 1.1 (or 1.0).  Happen to spot anything wrong with it? (By doesn't work, I mean the dynamic form fields don't get submitted with the form)

---------------- BEGIN CODE ----------------
<html>
<head>
	<title>Dynamic Form Creation</title>

<cfsetting showdebugoutput="true">

<cfif isDefined("form.formHasBeenSubmitted")>
	<cfabort>
</cfif>

<script type="text/javascript">
	function addFormElements2(){
		place1 = document.getElementById('placeHolder1');
		newTextObj = document.createElement('input');
		newTextObj.setAttribute("type","input");
		newTextObj.setAttribute("name","dynamic1");
		newTextObj.setAttribute("value","test");
		place1.appendChild(newTextObj);

		place2 = document.getElementById('placeHolder2');
		place2.innerHTML = '<input type="text" name="dynamic2" value="test2">';

	}

	function addEntryField(source){
		newInput = document.createElement("input");
		newInput.setAttribute("type", "text");
		newInput.setAttribute("name", "complements");
		document.getElementById("fieldCollection").appendChild(newInput);
		document.getElementById("fieldCollection").appendChild(source);
	}
</script>
</head>

<body>

<table>
<form action="dynamicForm.cfm" method="post">
<input type="hidden" name="formHasBeenSubmitted">
<tr>
	<td>First Name:</td>
	<td><input type="text" name="firstName"></td>
</tr>
<tr>
	<td>Last Name:</td>
	<td><input type="text" name="lastName"><input type="button" id="addEntry" value=" add field " onclick="addEntryField(this);" /></td>
</tr>
<tr>
	<td>CreateElement:</td>
	<td id="placeHolder1"></td>
</tr>
<tr>
	<td>InnerHTML:</td>
	<td><a id="placeHolder2"></a></td>
</tr>
<tr>
	<td>fieldCollection:</td>
	<td id="fieldCollection"></td>
</tr>
<tr>
	<td align="center" colspan="2"> <input type="submit" name="save"></td>
</tr>
<tr>
	<td align="center" colspan="2">&nbsp;&nbsp;</td>
</tr>
<tr>
	<td align="center" colspan="2">
	<button type="nothing" id="clickme" onclick="addFormElements2();return false">Add Dynamic Stuff</button>
	</td>
</tr>
</form>
</table>

</body>
</html>
---------------- END CODE ----------------

Scott Brady