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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Validate dynamic fields in html form

    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:


    Code:
    <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?

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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>

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #4
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks hemebond... that works fine with dynamic fields in IE, but for some reason doesn't work in Firefox.

    Any ideas???

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 !!!!

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    It should work in Firefox. I only test in Firefox.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #7
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 ??

  • #8
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by paulbr
    Any ideas ??
    Not without seeing your code.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    If you have other comboboxes in the form that don't need to be totalled, you need to check exclude them.
    Code:
                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.
    Code:
    <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);
                }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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