Page 1 of 1
Need help with JavaScript forms
Posted: 2004-01-05 04:18am
by haas mark
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
Posted: 2004-01-05 05:44pm
by Pu-239
Posted: 2004-01-05 06:52pm
by Pu-239
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.
Posted: 2004-01-05 07:28pm
by Pu-239
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>
Posted: 2004-01-06 11:50am
by haas mark
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
Posted: 2004-01-06 09:06pm
by Pu-239
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.