Need help with JavaScript forms

Post by **haas mark** » 2004-01-05 04:18am

So.. I need help with some forms..

I need to be able to have a 'quantity' text field that will automatically have a "1" in it, and a 'total' text field with a total in it, and need to be able to have it so that when the quantity changes, the total changes automatically to reflect this.

If someone cannot do this, can I please be pointed in the direction of some helpful JavaScript tutorials?

~ver

Pu-239 · Post by **Pu-239** » 2004-01-05 05:44pm

Go to http://www.quirksmode.org/js/formex.html

Pu-239 · Post by **Pu-239** » 2004-01-05 06:52pm

Got it:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test2</title>
<style>
	<!--
	#textinput	{border-size:0}
	-->
</head>
<body>
<form action="[server side form handling junk]" method="[POST or GET depending on server side script]">
<table id="textinput">
	<tr><td>Quantity:</td><td><input type="text" name="quantity" id="quantity" value="1" /></td></tr>
	<tr><td>Quantity2:</td><td><input type="text" name="quantity" id="quantity2" value="1" /></td></tr>
	<tr><td>Total:</td><td><input type="text" name="quantity" id="total" /></td></tr>
</form>
<script>
	<!--
		var quantity = document.getElementById("quantity");
		var quantity2 = document.getElementById("quantity2");
		var total =	document.getElementById("total");

		function sum(){
			var qt1 = parseInt(quantity.value);
			var qt2 = parseInt(quantity2.value);
			total.value = qt1 + qt2;
		}
		
		quantity.onblur = sum;
		quantity2.onblur = sum;
	-->
</script>
</body>

It doesn't update the total field instantly though- it only does that when focus is granted to another object/field.

Pu-239 · Post by **Pu-239** » 2004-01-05 07:28pm

Dynamically updating version- more cpu intensive, since the JS code to update total executes every 200ms
The total field is disabled to prevent tampering

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test2</title>
<style>
	<!--
	#textinput	{border-size:0}
	-->
</style>
</head>
<body>
<form action="[server side form handling junk]" method="[POST or GET depending on server side script]">
<table id="textinput">
	<tr><td>Quantity:</td><td><input type="text" name="quantity" id="quantity" value="1" /></td></tr>
	<tr><td>Quantity2:</td><td><input type="text" name="quantity" id="quantity2" value="1" /></td></tr>
	<tr><td>Total:</td><td><input type="text" name="quantity" id="total" disabled="yes" /></td></tr>
</form>
<script>
	<!--
		var quantity = document.getElementById("quantity");
		var quantity2 = document.getElementById("quantity2");
		var total =	document.getElementById("total");

		function sum(){
			var qt1 = parseInt(quantity.value);
			var qt2 = parseInt(quantity2.value);
			total.value = qt1 + qt2;
			var to = setTimeout("sum()",200);
			//200 is time in milliseconds to refresh total to new value
		}
		sum();
	-->
</script>
</body>
</html>

Post by **haas mark** » 2004-01-06 11:50am

Ok, so how do I tell it how much to put in there and all that good stuff? I'm pretty much JavaScript illiterate, and have pretty much no time to figure all this out.

~ver

Pu-239 · Post by **Pu-239** » 2004-01-06 09:06pm

New version which is easier to adjust and has validation fixes:

Code: Select all


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html charset=UTF-8">
<title>Test2</title>
<style type="text/css">
	<!--
	#textinput	{border-size:0}
	-->
	</style>
</head>
<body>
<form action="fakeserver" method="POST">
<!--Assuming you don't want anything serverside, edit above as necessary-->
<table id="textinput">
	<tr><td>Quantity 1:</td><td><input type="text" name="qt1" id="qt1" value="1" /></td></tr>
	<tr><td>Quantity 2:</td><td><input type="text" name="qt2" id="qt2" value="1" /></td></tr>
	<tr><td>Quantity 3:</td><td><input type="text" name="qt3" id="qt3" value="1" /></td></tr>
	<tr><td>Quantity 4:</td><td><input type="text" name="qt4" id="qt4" value="1" /></td></tr>
	<tr><td>Total:</td><td><input type="text" name="total" id="total" disabled /></td></tr>
</table>
</form>
<script type="text/javascript">
	<!--
	
		var numFields = 4;	 //number of quantity fields
		var idString = "qt"; //first part in id attribute of quantity fields
		var interval = 500 //time in ms before refreshes
		
		//Do not edit below here
		
		var loop;
		var quantities = new Array(numFields);	
		for(i = 0; i < numFields; i++){
			quantities[i] = document.getElementById(idString + (i+1));
		}				
		function sum(){
			var total = 0;
			for(i = 0; i < numFields; i++){
				total += parseInt(quantities[i].value);
			}
			document.getElementById("total").value = total;
		}
		
		loop = setInterval("sum()",interval);
			
	-->
</script>
</body>
</html>

To add new fields, you need to give them an id in the form of qt[number]- e.g. id="qt1" or id="qt2" and then you need to change the number in "var numFields = 4" to the number of quantity fields you have. Increase the interval if you plan to add lots of quantity fields, to reduce excess CPU usage from the script adding all your fields every 1/2 seconds. Consider making the user manually update the fields or use an event- then again works fine on PII-450, though crashed browser when debugging with JS console.