Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Adding form options at runtime 1

Status
Not open for further replies.
blanius

blanius

Programmer
Mar 3, 2002
30
US
I'm trying to allow the user to add more fields to a form before submitting. I've got the code to clone a set of fields but the code I'm using to change the names of the fields in the clone are not working in either in IE or FF. The fields show but they have the same names still. When I test I find that name for the chlidNode is undefined.


<script language="javascript" type="text/javascript">
var counter=0;
function moreFields(){
if (!document.getElementById && !document.insertBefore) {
return;
}
counter++;
var newFields= document.getElementById('readroot').cloneNode(true);
newFields.id='clone'+counter;
newFields.style.display='block';
var newField=newFields.childNodes;
alert (newField.length);
for (var i=0;i<newField.length;i++){

var theName=newField.name;

if (theName){
newField.name=theName.substring(0,theName.length-1)+counter;
}
}
var insertHere=document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

</script>

Bret Lanius
 
Sort by date Sort by votes
Hi

It works for me. Could you post the HTML [tt]form[/tt] too ? ( But please post it between [tt][ignore]
Code: 
[/ignore][/tt] and [tt][ignore]
[/ignore][/tt] tags. ) And how do you tested it ?

Feherke.
 
Upvote 0 Downvote
The additional fields are created but the names are all the same so that when Submitted I only get the last set. Here is the entire thing.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>VBS Registration</title>
<style type="text/css">
<!--
#Reg img {
	display: inline;
}
#Reg img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	text-align: right;
}
-->
</style>
</head>
<script language="javascript" type="text/javascript">
var counter=0;
function moreFields(){
	if (!document.getElementById && !document.insertBefore)		{
		return;
		}
		counter++;
		var newFields= document.getElementById('readroot').cloneNode(true);
		newFields.id='clone'+counter;
		newFields.style.display='block';
		var newField=newFields.childNodes;
		alert (newField.length);
		for (var i=0;i<newField.length;i++){

			var theName=newField[i].name;
			
			if (theName){
				newField[i].name=theName.substring(0,theName.length-1)+counter;
				}
			}
	var insertHere=document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
	}	
		
</script>

<body onload="moreFields()">
<h1>Northside Christian Church VBS Registration Form </h1><h2>VBS Dates June 18-27th 6-8pm </h2>
<p><img src="plungelogo.jpg" width="165" height="145" align="left" /></p>

<form id="Reg" name="Reg" method="post" action="vbssend.php">
   <p><strong>Parent Information:</strong><br />
     Mother
     <input name="mother" type="text" id="mother" size="30" />
     Father
     <input name="father" type="text" id="father" size="30" />
     <br />
     Street
     <input name="add1" type="text" id="add1" size="50" />
     <br />

     Apt/Additional
     <input name="add2" type="text" id="add2" size="40" />
     <br />
     City
     <input name="city" type="text" id="city" />
     State
     <input name="state" type="text" id="state" size="4" />
     Zip
     <input name="zip" type="text" id="zip" size="10" />
     <br />
     Home Phone
     <input name="home" type="text" id="home" />

     Cell or Other Phone
     <input name="other" type="text" id="other" /> 
<p><br/>
  <input name="add" type="button" id="add" value="Add Another Child"  onclick="moreFields()"/>
</p>
     <span id="writeroot"></span>
     <br/>
     <input name="Submit" type="submit" value="Send" />
     
     
      </p>
</form>
<div id="readroot" style="display:none">

<p class="hr">&nbsp;</p>
<p>Child's Name
  <input name="child_1" value="Child" size="40"  />
  Age
  <input name="Age_1" value="" />
  <br />
  Birthday
  <input name="DOB_1" value="" />
  <br />
  Grade completed
  <input name="Grade_1" value="" />
  
  <br />

  Special Needs or Allergies
  <br />
  
  <label>
  <textarea name="needs"></textarea>
  </label>
</p>

</div>

</body>
</html>

I can look at the form details in FF with the webdeveloper tool and I am testing the send with a simple PHP that just print_r($_POST);


Bret Lanius
 
Upvote 0 Downvote
Modify the corresponding block.
[tt]
[red]//[/red]var newField=newFields.childNodes;
[blue]var fieldtags=new Array("input","textarea");
for (var k=0;k<fieldtags.length;k++) {
var newField=newFields.getElementsByTagName(fieldtags[k]);[/blue]
alert (newField.length);
for (var i=0;i<newField.length;i++){

var theName=newField.name;

if (theName){
newField.name=theName.substring(0,theName.length-1)+counter;
}
}
[blue]}[/blue] //added for k-loop
[/tt]
ps For textarea, you may also using input's naming convention, like needs_1 with the readroot, otherwise the naming as the server sees it would be need1, need2 etc...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
228
lexer
lexer
damipera
  • Locked
  • Question
Checkboxes - At Least 1 is Selected? 1
Replies
2
Views
144
damipera
damipera
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
200
gmmastros
gmmastros
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
136
Dara2020
Dara2020
rogerte
  • Locked
  • Question
Javascript updating form control not working
Replies
3
Views
224
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top