...

View Full Version : Javascript form errors



mistermike
05-08-2009, 04:33 PM
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.

Philip M
05-08-2009, 04:56 PM
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.

mistermike
05-08-2009, 06:00 PM
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>

adios
05-08-2009, 06:15 PM
Works fine here. So ... you can't generate more than 5 rows? Would probably need to see exactly what you're using.

mistermike
05-08-2009, 06:29 PM
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]
...

12 Pack Mack
05-08-2009, 06:41 PM
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=http%3A%2F%2Fwww.mcgregorems.org%2Finstitute%2Fheartsaveraed.html&charset=(detect+automatically)&doctype=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.

mistermike
05-08-2009, 07:55 PM
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.

12 Pack Mack
05-08-2009, 08:04 PM
Here's an example application.

The "node" that is cloned is the second <div> in the form, this:


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




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

mistermike
05-08-2009, 09:02 PM
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" />

12 Pack Mack
05-08-2009, 11:12 PM
Please wrap your code in code tags, it's the # on the toolbar.


Just so:




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

mistermike
05-09-2009, 12:54 AM
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.

dungar pratap
05-09-2009, 09:43 AM
nice :thumbsup:

mistermike
05-11-2009, 06:47 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum