Hi,
I've created the code below which automatically adds two fields together (drop-down boxes) , without the need for a submit or input button.
Now, I am trying to do the same again, but this time instead of having drop-down boxes, i need to have text input boxes. (eventually i will be adding monetary values together).
So far, i've not had any luck, but would really appreciate some help or advice.
good script ian.. i found this post because i need this such of script.
and jalarie's idea is good too..
but can you do me a favor, please demonstrate how to make the function more global, so we can use it in other forms and/or many form fields. i think the function should have parameters for that purpose.
sorry, i cant make the codes, always fails (im programming in php btw) i count on you ian thx
dear friends coders...
after some 'trials and errors' plz check this 'add' function. the keyword is 'getElementById', so dont forget to name your field in the 'id' attribute. plz critize, maybe you can add some comments on it..
sorry ian, i use your code as template
Code:
<script type="text/javascript">
<!--
function calc(A,B,SUM) {
var one = document.getElementById(A).value;
var two = document.getElementById(B).value;
document.getElementById(SUM).value = one + two;
}
//-->
</script>
<body>
<form name="form" >
Enter a number:
<input name="sum1" id="op1" onChange="calc('op1','op2','result')" />
and another number:
<input name="sum2" id="op2" onChange="calc('op1','op2','result')" />
Their sum is:
<input name="sum" id="result" readonly style="border:0px;">
</form>
</body>
This is great, really great. You should put up a tutorial if you have a website, because it took me a long time to find this even though its a pretty simple concept.
Your original script is prone to errors if the user enters a non-number.
See the problem if you enter 'one' instead of '1'.
Here's a slight modification to avoid this problem with a slight change to the function called to avoid one id entry.
PHP Code:
<html>
<head>
<title>Text Summation</title>
<script type="text/javascript">
function calc(A,B,SUM) {
var one = Number(A);
if (isNaN(one)) { alert('Invalid entry: '+A); one=0; }
var two = Number(document.getElementById(B).value);
if (isNaN(two)) { alert('Invalid entry: '+B); two=0; }
document.getElementById(SUM).value = one + two;
}
</script>
<body>
<form name="form" >
Enter a number:
<input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" />
and another number:
<input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" />
Their sum is:
<input name="sum" value="" id="result" readonly style="border:0px;">
</form>
Responding to a PM that does not allow me to add the code.
I'm not sure which script you wanted to add the fixed $.00 amount to after the summation, so here are both...
Code:
<snip>
And here is the other
Code:
<snip>
Ahh, thanks, the second solution was the one I was looking for... my script started with a base number (like below) and I was applying the formatting in the wrong area:
Hi guys,
Thank you SO much for providing code like this, i'm successfully using it in a form i'm creating.
When i'm going through the form and inserting values into text boxes, the total dynamically calculates as it should.
However, i can't seem to get that value to insert into a mysql database.
PHP Notice: Undefined variable: SumMiles
It's almost like the insert request perceives this field as being empty and doesn't try to insert the data, so it falls over.
I'm just calling the field in my insert statement by name, and not having declaring anything special about it.
On the form itself before submission, I can see it is calculating a value successfully but maybe it's not storing that value when i click submit?
Reply With Quote
(im programming in php btw) i count on you ian thx
plz check this 'add' function. the keyword is 'getElementById', so dont forget to name your field in the 'id' attribute. plz critize, maybe you can add some comments on it..
Consider this ...
Originally Posted by JMRKER
Bookmarks