|
 |
beginning_javascript thread: Input data add data to total .
Message #1 by "Gerald Lee" <gl17@s...> on Wed, 22 May 2002 22:04:48
|
|
I am looking for a javascript example that has 3 or more input fields for
data and then totals them in the last field.
I have one that I am looking at but it is very complicated. Would someone
mind sending me a simple one to get started.
Gerald Lee
mailto:gl17@s...
Message #2 by "TurnenT" <turnent@c...> on Wed, 22 May 2002 15:00:47 -0700
|
|
Can I see the one that you are looking at?
It is relatively simple, look below
<SCRIPT LANGUAGE="JavaScript">
function computeNDisplay()
{
var first = document.addForm.firstValue.value;
var second = document.addForm.secondValue.value;
var third = document.addForm.thirdValue.value;
var sumValue = document.addForm.sumValue.value;
sumValue = first + second + third;
}
</SCRIPT>
<FORM NAME="addForm">
<INPUT TYPE="text" NAME="firstValue">
<INPUT TYPE="text" NAME="firstValue">
</FORM>
Message #3 by "TurnenT" <turnent@c...> on Wed, 22 May 2002 15:13:08 -0700
|
|
Here is some code to get you started. Just save it as test.html and it'll
work
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function computSum()
{
var first = document.addForm.first.value; // assign
variable names to the four text boxes
var second = document.addForm.second.value; // to reference the
form, you use the following syntax
var third = document.addForm.third.value; //
document.FORM_NAME.FIELD_NAME.value
var sum = document.addForm.sum.value; // addForm is the
name of our form, and the fields are next
first + second + third = sum; //
assign the sum of first, second, and third to the last field.
}
// it will show up in the last text box
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="addForm">
<INPUT TYPE="text" NAME="first"> <BR> <!-- " "
is the value for a space. I did it purely
<INPUT TYPE="text" NAME="second"> <BR> for
formatting, so you can see it in an equation-
+ <INPUT TYPE="text" NAME="third"> <BR>
like format. Below the line is the sum. Note
-------------------------------------------------
names of the text fields - they are the same as
<INPUT TYPE="text" NAME="sum" VALUE=" ">
the ones in our code -->
<INPUT TYPE="button" onClick="computSum()" VALUE="Click here to find the
sum.">
<!-- when you press this button, the function 'computSum' will execute. -->
</FORM>
</BODY>
</HTML>
&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$
&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&
Enter this code into a regular text file and save it as test.html
Try it out - do you understand it?
Message #4 by Gerald Lee <gl17@s...> on Wed, 22 May 2002 17:37:07 -0600
|
|
It would appear to me that there is code missing.
I get one field and a button.
Gerald
==================================================
Here is some code to get you started. Just save it as test.html and it'll
work
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function computSum()
{
var first = document.addForm.first.value; // assign
variable names to the four text boxes
var second = document.addForm.second.value; // to reference the
form, you use the following syntax
var third = document.addForm.third.value; //
document.FORM_NAME.FIELD_NAME.value
var sum = document.addForm.sum.value; // addForm is the
name of our form, and the fields are next
first + second + third = sum; //
assign the sum of first, second, and third to the last field.
}
// it will show up in the last text box
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="addForm">
<INPUT TYPE="text" NAME="first"> <BR> <!-- " "
is the value for a space. I did it purely
<INPUT TYPE="text" NAME="second"> <BR> for
formatting, so you can see it in an equation-
+ <INPUT TYPE="text" NAME="third"> <BR>
like format. Below the line is the sum. Note
-------------------------------------------------
names of the text fields - they are the same as
<INPUT TYPE="text" NAME="sum" VALUE=" ">
the ones in our code -->
<INPUT TYPE="button" onClick="computSum()" VALUE="Click here to find the
sum.">
<!-- when you press this button, the function 'computSum' will execute. -->
</FORM>
</BODY>
</HTML>
&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$
&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&
Enter this code into a regular text file and save it as test.html
Try it out - do you understand it?
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20
---
Incoming mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.351 / Virus Database: 197 - Release Date: 04/19/2002
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.351 / Virus Database: 197 - Release Date: 04/19/2002
Message #5 by "Allard, Ronald T. Jr." <RTALLARD@G...> on Thu, 23 May 2002 08:52:47 -0400
|
|
Try this. It works onchange and onclick.
<HTML>
<HEAD>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
function computeNDisplay()
{
var first = parseInt(document.addForm.firstValue.value);
var second = parseInt(document.addForm.secondValue.value);
var third = parseInt(document.addForm.thirdValue.value);
var sumValue = parseInt(document.addForm.sumValue.value);
sumValue = first + second + third;
document.addForm.sumValue.value = sumValue;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="addForm">
<INPUT TYPE="text" NAME="firstValue" ID="firstValue" value=0 LANGUAGE="javascript" onchange="computeNDisplay()"><BR>+
<INPUT TYPE="text" NAME="secondValue"ID="secondValue" value=0 LANGUAGE="javascript" onchange="computeNDisplay()"><BR>+
<INPUT TYPE="text" NAME="thirdValue"ID="thirdValue" value=0 LANGUAGE="javascript" onchange="computeNDisplay()"><BR>
<INPUT TYPE="text" NAME="sumValue"ID="sumValue" value=0><BR>
<INPUT TYPE="button" LANGUAGE="javascript" onclick="computeNDisplay()" VALUE="Click here to find the sum." id=button1
name=button1>
</FORM>
</BODY>
</HTML>
-----Original Message-----
From: Gerald Lee [mailto:gl17@s...]
Sent: Wednesday, May 22, 2002 7:37 PM
To: Beginning JavaScript
Subject: [beginning_javascript] Re: Input data add data to total .
It would appear to me that there is code missing.
I get one field and a button.
Gerald
==================================================
Here is some code to get you started. Just save it as test.html and it'll
work
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function computSum()
{
var first = document.addForm.first.value; // assign
variable names to the four text boxes
var second = document.addForm.second.value; // to reference the
form, you use the following syntax
var third = document.addForm.third.value; //
document.FORM_NAME.FIELD_NAME.value
var sum = document.addForm.sum.value; // addForm is the
name of our form, and the fields are next
first + second + third = sum; //
assign the sum of first, second, and third to the last field.
}
// it will show up in the last text box
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="addForm">
<INPUT TYPE="text" NAME="first"> <BR> <!-- " "
is the value for a space. I did it purely
<INPUT TYPE="text" NAME="second"> <BR> for
formatting, so you can see it in an equation-
+ <INPUT TYPE="text" NAME="third"> <BR>
like format. Below the line is the sum. Note
-------------------------------------------------
names of the text fields - they are the same as
<INPUT TYPE="text" NAME="sum" VALUE=" ">
the ones in our code -->
<INPUT TYPE="button" onClick="computSum()" VALUE="Click here to find the
sum.">
<!-- when you press this button, the function 'computSum' will execute. -->
</FORM>
</BODY>
</HTML>
&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$
&$&$&$&$&$&$&$&$&$&$&$&$&$&$&$&
Enter this code into a regular text file and save it as test.html
Try it out - do you understand it?
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20
---
Incoming mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.351 / Virus Database: 197 - Release Date: 04/19/2002
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.351 / Virus Database: 197 - Release Date: 04/19/2002
---
Improve your web design skills with these new books from Glasshaus.
Usable Web Menus
http://www.amazon.com/exec/obidos/ASIN/1904151027/ref=nosim/theprogramme
r-20
Constructing Accessible Web Sites
http://www.amazon.com/exec/obidos/ASIN/1904151000/ref=nosim/theprogramme
r-20
Practical JavaScript for the Usable Web
http://www.amazon.com/exec/obidos/ASIN/1904151051/ref=nosim/theprogramme
r-20
Message #6 by "TurnenT" <turnent@c...> on Fri, 24 May 2002 15:05:46 -0700
|
|
Nope. Try looking harder...do you know what the code is for an HTML input
field?
It's <INPUT>
<FORM NAME="addForm">
<INPUT TYPE="text" NAME="first">
<INPUT TYPE="text" NAME="second">
+ <INPUT TYPE="text" NAME="third">
|
|
|
View Cart
