...

View Full Version : Validate dynamic fields in html form



andocam
12-18-2004, 04:39 AM
I've set up an HTML form that has select boxes added to it dynamically, based on the number of records selected from a database.

A while loop in php adds the following to the form for each database record found:



<tr>
<td>No. of Catalogues:&nbsp;
<select name="catarray[]" onChange="doTotal(this.form)";>
<option value="0">0</option>
<option value="4">1</option>
<option value="8">2</option>
<option value="12">3</option>
<option value="16">4</option>
<option value="20">5</option>
</select>
</td>
</tr>

So if there are 3 records, the form displays:

No. of Catalogs: select box
No. of Catalogs: select box
No. of Catalogs: select box

I want to use the javascript doTotal() function to total the values in all of the selected options as selections are made. I'm able to determine the number of select boxes that have been added to the form, but I can't get the syntax right to access the select box values. I keep getting a 'NaN' or 'undefined' error.

Is this possible? - am I using the correct syntax for adding the 'catarray' select boxes? can anyone help with the javascript to access the value in each select box?

hemebond
12-18-2004, 04:53 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>49112</title>
</head>
<body>
<form onsubmit="doTotal(this);return false">
<table id="table">
<tbody>
<tr>
<td>
No. of Catalogues:
<select name="catarray[]" onchange="doTotal(this.form)">
<option value="0">0</option>
<option value="4">1</option>
<option value="8">2</option>
<option value="12">3</option>
<option value="16">4</option>
<option value="20">5</option>
</select>
</td>
</tr>
<tr>
<td>
No. of Catalogues:
<select name="catarray[]" onchange="doTotal(this.form)">
<option value="0">0</option>
<option value="4">1</option>
<option value="8">2</option>
<option value="12">3</option>
<option value="16">4</option>
<option value="20">5</option>
</select>
</td>
</tr>
<tr>
<td>
No. of Catalogues:
<select name="catarray[]" onchange="doTotal(this.form)">
<option value="0">0</option>
<option value="4">1</option>
<option value="8">2</option>
<option value="12">3</option>
<option value="16">4</option>
<option value="20">5</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>

<script type="text/javascript">
function doTotal(form)
{
var total = 0;
var list = form.getElementsByTagName("select");
for(var i = 0; i < list.length; i++)
{
total += Number(list[i].value);
}

alert(total);
}
</script>
</body>
</html>

Willy Duitt
12-18-2004, 05:19 AM
http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51757

andocam
12-21-2004, 08:35 AM
Thanks hemebond... that works fine with dynamic fields in IE, but for some reason doesn't work in Firefox.

Any ideas???

paulbr
03-11-2005, 01:24 AM
Can anyone make a suggestion why this does not work in Firefox or Netscape - when making a selection the value is set to zero !!

Pleas help !!!!

hemebond
03-11-2005, 03:08 AM
It should work in Firefox. I only test in Firefox.

paulbr
03-12-2005, 05:49 AM
Thanks hemebond - and you are correct. As you have described this does work perfectly in IE and Firefox - but when adding dynamic fields (instead of the static ones) it still works fine in IE but not in Firefox - it resets total value to zero. Any ideas ??

hemebond
03-13-2005, 09:23 PM
Any ideas ??Not without seeing your code.

glenngv
03-14-2005, 03:55 AM
If you have other comboboxes in the form that don't need to be totalled, you need to check exclude them.


function doTotal(form)
{
var total = 0;
var list = form.getElementsByTagName("select");
for(var i = 0; i < list.length; i++)
{
if (list[i].name == "catarray[]") total += Number(list[i].value);
}

alert(total);
}

If you have other sets of comboboxes that need to be totalled, you need to pass the combobox name in the doTotal function to make it more generic.


<select name="catarray[]" onchange="doTotal(this.form, this.name)">
...
function doTotal(form, comboName)
{
var total = 0;
var list = form.getElementsByTagName("select");
for(var i = 0; i < list.length; i++)
{
if (list[i].name == comboName) total += Number(list[i].value);
}

alert(total);
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum