Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript form errors

    I have a registration form that I need help with. I have the form set up so that you can add and remove rows. Each row has 5 text boxes for a users name, email, address, completion date and another field.

    The form should allow a user to input unlimited names but it is only allowing 5 rows before it cuts off the rest. Any help would be greatly appreciated. I can send the code if you need it.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by mistermike View Post
    I can send the code if you need it.
    Well, as we are not clairvoyant that could help to move things forward.

    I'll bet that somewhere you have used the variable for the number of textboxes per row (5) rather than the number of rows.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's the code for the part before the body:

    <script language="Javascript" type="text/javascript">
    function addRow()
    {
    var tbl = document.getElementById('mySampleTable');
    var lastRow = tbl.rows.length;
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);

    var cellLeft = row.insertCell(0);
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(textNode);

    var cellRight = row.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;

    cellRight.appendChild(el);

    var cellRight = row.insertCell(2);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;
    cellRight.appendChild(el);
    var cellRight = row.insertCell(3);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;
    cellRight.appendChild(el);
    var cellRight = row.insertCell(4);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;
    cellRight.appendChild(el);
    var cellRight = row.insertCell(5);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;
    cellRight.appendChild(el);
    }

    function removeRow()
    {
    var tbl = document.getElementById('mySampleTable');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 1);
    }

    </script>



    And here is the inline text:



    <form action="addrow.html" name="eval_edit" method="post" format="html">
    <table align="center" width = "75%" style="border:1px solid #000">
    <tr>
    <td align = "center">
    <table border="0" id="mySampleTable">
    <tr>
    <td align="center">Student</td>
    <td align="center">Name</td>
    <td align="center">Address</td>
    <td align="center">Email</td>
    <td align="center">Complete/Incomplete</td >
    <td align="center">Remediation/Date Completed</td>
    </tr>

    <tr>
    <td>1</td>
    <td><input type="text" name="txt1Row1" id="txt1Row1" size="20" /></td>
    <td><input type="text" name="txt2Row1" id="txt2Row1" size="20" /></td>
    <td><input type="text" name="txt3Row1" id="txt3Row1" size="20" /></td>
    <td><input type="text" name="txt4Row1" id="txt4Row1" size="20" /></td>
    <td><input type="text" name="txt5Row1" id="txt5Row1" size="20" /></td>
    </tr>
    </table>

    <input type="button" value="Add" onclick="addRow();" />
    <input type="button" value="Remove" onclick="removeRow();" />
    <input type="submit" value="Submit" />
    <input type="hidden" name="success" value="http://www.mcgregorems.org/thankyou.html" />

    </td>
    </tr>

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Works fine here. So ... you can't generate more than 5 rows? Would probably need to see exactly what you're using.

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The page that this is on is:
    http://www.mcgregorems.org/institute/heartsaveraed.html

    The problem happens when you try to submit the form. It only sends the first 5 entries. the text document for the form is below:

    Class Roster:
    1. [txt1Row1] [txt2Row1] [txt3Row1] [txt4Row1] [txt5Row1]
    2. [txt1Row2] [txt2Row2] [txt3Row2] [txt4Row2] [txt5Row2]
    3. [txt1Row3] [txt2Row3] [txt3Row3] [txt4Row3] [txt5Row3]
    4. [txt1Row4] [txt2Row4] [txt3Row4] [txt4Row4] [txt5Row4]
    5. [txt1Row5] [txt2Row5] [txt3Row5] [txt4Row5] [txt5Row5]
    6. [txt1Row6] [txt2Row6] [txt3Row6] [txt4Row6] [txt5Row6]
    7. [txt1Row7] [txt2Row7] [txt3Row7] [txt4Row7] [txt5Row7]
    8. [txt1Row8] [txt2Row8] [txt3Row8] [txt4Row8] [txt5Row8]
    9. [txt1Row9] [txt2Row9] [txt3Row9] [txt4Row9] [txt5Row9]
    10. [txt1Row10] [txt2Row10] [txt3Row10] [txt4Row10] [txt5Row10]
    11. [txt1Row11] [txt2Row11] [txt3Row11] [txt4Row11] [txt5Row11]
    12. [txt1Row12] [txt2Row12] [txt3Row12] [txt4Row12] [txt5Row12]
    13. [txt1Row13] [txt2Row13] [txt3Row13] [txt4Row13] [txt5Row13]
    14. [txt1Row14] [txt2Row14] [txt3Row14] [txt4Row14] [txt5Row14]
    15. [txt1Row15] [txt2Row15] [txt3Row15] [txt4Row15] [txt5Row15]
    16. [txt1Row16] [txt2Row16] [txt3Row16] [txt4Row16] [txt5Row16]
    17. [txt1Row17] [txt2Row17] [txt3Row17] [txt4Row17] [txt5Row17]
    18. [txt1Row18] [txt2Row18] [txt3Row18] [txt4Row18] [txt5Row18]
    19. [txt1Row19] [txt2Row19] [txt3Row19] [txt4Row19] [txt5Row19]
    20. [txt1Row20] [txt2Row20] [txt3Row20] [txt4Row20] [txt5Row20]
    ...

  • #6
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    mistermike:

    You cannot "nest" form tags. You cannot put <style> tags inside the BODY.

    Heaven only knows why you want to use tables, let alone nested tables.

    Validate your markup. There are 144 errors. Many of them will prevent the page from working as intended.

    http://validator.w3.org/check?uri=ht...Inline&group=0

    Fix the validation errors, then try again, using .cloneNode.

    You don't need to create all those text boxes one by one.

    Your form elements don't need an ID, only a name. Use: name="userName[]", etc. so that the fields POST as an array.

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your help so far. I went through the validator and brought the error count down to 25. I am not familiar with the .cloneNode and am not sure where you put in in the script. Also, I am not sure where to put the name="userName[]" so that it will work.

  • #8
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Here's an example application.

    The "node" that is cloned is the second <div> in the form, this:
    Code:
    <div class="label_11" id="guest_info">Guest&nbsp;1:&nbsp;&nbsp;&nbsp;&nbsp;
    					<input type="text" name="guest_name[]" size="35" class="input_field">
    					<select name="birth_day[]">
    						<option value="">dd</option>
    					</select>
    					<select name="birth_month[]">
    						<option value="">mm</option>
    					</select>
    					<select name="birth_year[]">
    						<option value="">yyyy</option>
    					</select>
    				</div>

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var listNames = ["arrival_day","departure_day","birth_day[]","arrival_month","departure_month","birth_month[]","number_in_party"];
    	var listOpts = ["31","31","31","12","12","12","14"];  // the last integer is the maximum number of guests;
    	var prevGuests = 1;
    	var lastGuest = 1;
    	
    
    	function updateGuests(nGuests){
    
    		if (nGuests == 0)
    			{
    			 return; 
    			}	
    		var desiredGuests = nGuests-prevGuests;	
    		if (desiredGuests > 0)
    			{
    			 for (i=0; i<desiredGuests; i++)
    				{
    				 var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
    				 var nClone = document.forms[0].getElementsByTagName('div')[1].cloneNode(true);				 
    				 var nFloor = document.getElementById('submit');		
    		 	 	 nFields.insertBefore(nClone,nFloor);
    				 if (lastGuest < 9)
    					{
    				 	 nClone.firstChild.data = nClone.firstChild.data.replace(/\d{1,}/,Number(lastGuest + 1));
    					 var nGuest = document.getElementsByName('guest_name[]');
    					 nGuest[nGuest.length-1].value = "";	 	 	
    					} 
    				 else 	{
    					 nClone.firstChild.data = nClone.firstChild.data.substring(0,11).replace(/\d{1,}/,Number(lastGuest + 1));
    					 var nGuest = document.getElementsByName('guest_name[]');
    					 nGuest[nGuest.length-1].value = "";	 					 	 
    					}
    				 lastGuest = Number(nClone.firstChild.data.match(/\d{1,}/)[0]);	
    				}
    			}
    		else 	{
    			 desiredGuests = Math.abs(desiredGuests);
    			 for (i=0; i<desiredGuests; i++)
    				{
    				 var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
    				 nFields.removeChild(nFields.lastChild.previousSibling.previousSibling);
    				 lastGuest--;
    				}
    			}
    		prevGuests = nGuests;
    		document.body.focus();
    	}
    
    	function fillSelect(nList){
    
    		for (n=0; n<listOpts[i]; n++)
    			{
    			 var nOption = document.createElement('option'); 
    			 if (n < 9 && nList != "number_in_party")
    				{
    				 var nData = document.createTextNode("0"+(n+1)); 
    				 nOption.setAttribute("value","0"+(n+1)); 
    				}
    		 	 else 	{
    			 	 var nData = document.createTextNode(n+1); 
    				 nOption.setAttribute("value",n+1); 
    				}		 	 
    		 	 nOption.appendChild(nData); 
    			 document.forms[0][nList].appendChild(nOption); 
    			}
    	}
    	
    	function init(){
    		
    		for (i=0; i<listNames.length; i++)
    			{
    			 fillSelect(listNames[i])
    			}
    		for (i=2007; i>1906; i--)
    			{
    			 var nOption = document.createElement('option'); 
    		 	 var nData = document.createTextNode(i); 
    		 	 nOption.setAttribute('value',i); 
    		 	 nOption.appendChild(nData); 
    			 document.forms[0]['birth_year[]'].appendChild(nOption); 
    			}			
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    	
    </script>
    <style type="text/css">
    
    	 body {background-color: #f0f8ff; margin-top: 60px; margin-bottom: 60px;}
    	 form {width: 520px; margin:auto; font-family: arial; font-size:  12pt;}
    	 fieldset {width: 520px; background-color: #ffffe0; border: 1px solid #000000; padding-left: 8px; padding-bottom: 8px;}
    	 legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-left: 8px; padding-right: 8px; padding-top: 3px; margin-bottom: 5px;}
    	 select {font-family: arial; font-size: 10pt; margin-top: 3px; margin-bottom: 3px; margin-right: 3px; width: 53px;}
    	.input_field {font-family: arial; font-size: 10pt; padding-left: 2px; padding-top: 1px; padding-bottom: 1px; margin-top: 3px; margin-bottom: 3px;}
    	.input_textarea {font-family: arial; font-size: 10pt; width: 238px; height: 65px; padding: 2px; margin-top: 3px; margin-bottom: 3px; overflow: hidden;}
    	.submitBtn {font-family: arial; font-size: 10pt; font-weight: bold; cursor: pointer; display: block; padding-top: 2px; padding-bottom: 2px; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 5px; background-color: #ffffff; border: solid 1px #000000;}
    	.label_1 {margin-right: 90px;}
    	.label_2 {position: relative; top: -25px; margin-right: 175px;}
    	.label_3 {margin-right: 158px; }
    	.label_4 {margin-right: 113px;}
    	.label_5 {margin-right: 185px;}
    	.label_6 {margin-right: 191px;}
    	.label_7 {margin-right: 149px;}
    	.label_8 {margin-right: 122px;}
    	.label_9 {margin-right: 118px;}
    	.label_10 {margin-left: 115px; margin-top: 9px;}
    	.label_11 {margin-right: 5px; margin-top: 5px;}
    
    </style>
    </head>
    	<body>
    		<form method="post" action="">
    		   <fieldset>
    			<legend>Registration Form</legend>
    				<label class="label_1">Party / Group Leader:</label>
    				<input type="text" name="group_leader" size="35" class="input_field">
    
    				<br>
    				<label class="label_2">Address:</label>
    				<textarea name="postal_address" class="input_textarea"></textarea>
    
    				<br>
    				<label class="label_3">Post Code:</label>
    				<input type="text" name="postal_code" size="35" class="input_field">
    
    				<br>
    				<label class="label_4">Home Telephone:</label>
    				<input type="text" name="home_phone" size="35" class="input_field">
    
    				<br>
    				<label class="label_5">Mobile:</label>
    				<input type="text" name="mobile_phone" size="35" class="input_field">
    
    				<br>
    				<label class="label_6">Email:</label>
    				<input type="text" name="email_address" size="35" class="input_field">
    	
    				<br>
    				<label class="label_7">Arrival Date:</label>
    				<select name="arrival_day">
    					<option value="">dd</option>
    				</select>
    				<select name="arrival_month">
    					<option value="">mm</option>
    				</select>
    				<select name="arrival_year">
    					<option value="">yyyy</option>
    					<option value="2007">2007</option>
    					<option value="2008">2008</option>
    					<option value="2009">2009</option>
    					<option value="2010">2010</option>					
    				</select>
    
    				<br>
    				<label class="label_8">Departure Date:</label>
    				<select name="departure_day">
    					<option value="">dd</option>
    				</select>
    				<select name="departure_month">
    					<option value="">mm</option>
    				</select>
    				<select name="departure_year">
    					<option value="">yyyy</option>
    					<option value="2007">2007</option>
    					<option value="2008">2008</option>
    					<option value="2009">2009</option>
    					<option value="2010">2010</option>	
    				</select>
    				
    				<br>
    				<label class="label_9">Number in Party:</label>
    				<select name="number_in_party" onchange="updateGuests(this.value)">
    					<option value="0">&nbsp;&nbsp;&nbsp;?</option>
    				</select>
    
    				<div class="label_10">Guest Details - Name &amp; Date of Birth:</div>		
    				
    				<div class="label_11" id="guest_info">Guest&nbsp;1:&nbsp;&nbsp;&nbsp;&nbsp;
    					<input type="text" name="guest_name[]" size="35" class="input_field">
    					<select name="birth_day[]">
    						<option value="">dd</option>
    					</select>
    					<select name="birth_month[]">
    						<option value="">mm</option>
    					</select>
    					<select name="birth_year[]">
    						<option value="">yyyy</option>
    					</select>
    				</div>
    
    				<input type="submit" name="submit" id="submit" value="Submit" class="submitBtn">
    		   </fieldset>
    		</form>
    	</body>
    </html>
    Last edited by 12 Pack Mack; 05-08-2009 at 08:40 PM.

  • #9
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Is there a way you could show me where to put it in my code? I do not know javascript well and it would be very helpful. Here is my header script info:


    <script language="Javascript" type="text/javascript">
    function addRow()
    {
    var tbl = document.getElementById('mySampleTable');
    var lastRow = tbl.rows.length;
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);

    var cellLeft = row.insertCell(0);
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(textNode);

    var cellRight = row.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;
    cellRight.appendChild(el);
    var cellRight = row.insertCell(2);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;
    cellRight.appendChild(el);
    var cellRight = row.insertCell(3);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;
    cellRight.appendChild(el);
    var cellRight = row.insertCell(4);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;
    cellRight.appendChild(el);
    var cellRight = row.insertCell(5);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txt' + iteration + 'Row' + iteration;
    el.id = 'txt' + iteration + 'Row' + iteration;
    el.size = 20;
    cellRight.appendChild(el);
    }

    function removeRow()
    {
    var tbl = document.getElementById('mySampleTable');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 1);
    }

    </script>




    this is the code for the body again:

    <td align = "center" colspan="7"><table border="0" id="mySampleTable">
    <tr>
    <td align="center">Student</td>
    <td align="center">Name</td>
    <td align="center">Address</td>
    <td align="center">Email</td>
    <td align="center">Complete/Incomplete</td >
    <td align="center">Remediation/Date Completed</td>
    </tr>
    <tr>
    <td>1</td>
    <td><input type="text" name="txt1Row1" id="txt1Row1" size="20" /></td>
    <td><input type="text" name="txt2Row1" id="txt2Row1" size="20" /></td>
    <td><input type="text" name="txt3Row1" id="txt3Row1" size="20" /></td>
    <td><input type="text" name="txt4Row1" id="txt4Row1" size="20" /></td>
    <td><input type="text" name="txt5Row1" id="txt5Row1" size="20" /></td>
    </tr>
    </table>
    <input type="button" value="Add" onclick="addRow();" />
    <input type="button" value="Remove" onclick="removeRow();" />
    <input type="submit" value="Submit" />

  • #10
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Please wrap your code in code tags, it's the # on the toolbar.


    Just so:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    	
    	function addRow(){
    
    		var nForm = document.forms[0];
    		var nClone = nForm.getElementsByTagName('table')[0].cloneNode(true);
    		var nFloor = document.getElementById('floor');					
    		nForm.insertBefore(nClone,nFloor);
    		var nTable = document.getElementsByTagName('table');
    		nTable[nTable.length-1].getElementsByTagName('td')[0].firstChild.data = nTable.length;
    		var nField = nTable[nTable.length-1].getElementsByTagName('input');
    		for (i=0; i<nField.length; i++)
    			{
    			 nField[i].value = "";
    			}		
    	}
    
    	function removeRow(){
    
    		var nForm = document.forms[0];
    		var nTable = nForm.getElementsByTagName('table');
    		var lastTable = nTable[nTable.length-1];
    		if (nTable.length > 1)
    			{
    			 nForm.removeChild(lastTable);	
    			}	
    	}
    
    </script>
    </head>
    	<body>
    		<form action="" method="post">	  
    			<table>	
    				<tr>
    					<td>1</td>
    					<td><input type="text" name="student[]" size="20" /></td>
    					<td><input type="text" name="address[]" size="20" /></td>
    					<td><input type="text" name="email[]" size="20" /></td>
    					<td><input type="text" name="complete[]" size="20" /></td>
    					<td><input type="text" name="remediation[]" size="20" /></td>
    				</tr>						
    			</table>
    			<input type="button" id="floor" value="Add" onclick="addRow();" />
    			<input type="button" value="Remove" onclick="removeRow();" />
    			<input type="submit" value="Submit" /> 			
    		</form>
    	</body>
    </html>
    Last edited by 12 Pack Mack; 05-09-2009 at 01:03 PM.

  • Users who have thanked 12 Pack Mack for this post:

    mistermike (05-10-2009)

  • #11
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you that code is great, but now I am having the problem that it is copying my entire form over and over again instead of just the few lines that I want.

  • #12
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    nice

    nice

  • #13
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am still having trouble getting the page to work correctly. When I use your code that you gave me it now copies the entire page over and over again. If it is something easy it would be greatly appreciated if someone could show me how to change the code so it only copies the code I want.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •