By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,605 Members | 2,147 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,605 IT Pros & Developers. It's quick & easy.

Want to auto-add form inputs to a grand total.

P: n/a
Can someone help me modify this for future Usenet archival and to help
me solve what I don't know?

<form name="addform" method="POST" action="./submit.php">
<input type="text" name="Box 1" size="20" value="100.50"> +
<input type="text" name="Box 2" size="20" value="200.50"> +
<input type="text" name="Box 3" size="20" value="1.50"> =
<input type="text" name="Total" size="20" value="302.50"> </p>
</form>

I want someone to be able to dynamically type any number in Box 1, 2
and 3 and it autosum the total on the Total box -- all without pressing
a "calculate" button. Thank you so much for anyone's genius and help!

Oct 13 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
gi******************@gmail.com said the following on 10/12/2005 8:45 PM:
Can someone help me modify this for future Usenet archival and to help
me solve what I don't know?
Why? It has been "solved" so many times in the past and is already
archived for those willing to search for the answer.
<form name="addform" method="POST" action="./submit.php">
<input type="text" name="Box 1" size="20" value="100.50"> +
<input type="text" name="Box 2" size="20" value="200.50"> +
<input type="text" name="Box 3" size="20" value="1.50"> =
<input type="text" name="Total" size="20" value="302.50"> </p>
</form>

I want someone to be able to dynamically type any number in Box 1, 2
and 3 and it autosum the total on the Total box -- all without pressing
a "calculate" button. Thank you so much for anyone's genius and help!


Search the archives, the answers are already there.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 13 '05 #2

P: n/a
I ran a second Google search. What I mean is a working example. I still
find discussions about the topic, but nothing helping me as a complete
novice. I'm hoping someone can help me. If I missed something out there
then please forgive this response. Thank you.

Carly

Oct 13 '05 #3

P: n/a
gi******************@gmail.com said the following on 10/12/2005 11:21 PM:
I ran a second Google search.
A Google search of the web or an archive search of comp.lang.javascript?
What I mean is a working example. I still find discussions about the
topic, but nothing helping me as a complete novice. I'm hoping someone
can help me. If I missed something out there then please forgive this
response.
<form name="addform" method="POST" action="./submit.php">
<input type="text" name="Box1" size="20" value="100.50"
onchange="totalIt(this.form)"> +
<input type="text" name="Box2" size="20" value="200.50"
onchange="totalIt(this.form)"> +
<input type="text" name="Box3" size="20" value="1.50"
onchange="totalIt(this.form)">
<input type="text" name="Total" size="20" value="302.50"> </p>
</form>
<script type="text/javascript">
function totalIt(formObj){
formObj.Total.value=(+formObj.Box1.value)+(+formOb j.Box2.value)+(+formObj.Box3.value);
}
</script>

Note: I renamed your inputs without spaces in the name so that I could
use the dot notation.

<URL:
http://groups.google.com/group/micro...6bd95dc8513417


will give you some good reading also.

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
Oct 13 '05 #4

P: n/a
Thank you, nicely done. Appreciate it!

Randy Webb wrote:
gi******************@gmail.com said the following on 10/12/2005 11:21 PM:
I ran a second Google search.


A Google search of the web or an archive search of comp.lang.javascript?
What I mean is a working example. I still find discussions about the
topic, but nothing helping me as a complete novice. I'm hoping someone
can help me. If I missed something out there then please forgive this
response.


<form name="addform" method="POST" action="./submit.php">
<input type="text" name="Box1" size="20" value="100.50"
onchange="totalIt(this.form)"> +
<input type="text" name="Box2" size="20" value="200.50"
onchange="totalIt(this.form)"> +
<input type="text" name="Box3" size="20" value="1.50"
onchange="totalIt(this.form)">
<input type="text" name="Total" size="20" value="302.50"> </p>
</form>
<script type="text/javascript">
function totalIt(formObj){
formObj.Total.value=(+formObj.Box1.value)+(+formOb j.Box2.value)+(+formObj.Box3.value);
}
</script>

Note: I renamed your inputs without spaces in the name so that I could
use the dot notation.

<URL:
http://groups.google.com/group/micro...6bd95dc8513417
>


will give you some good reading also.

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?


Oct 13 '05 #5

P: n/a
One more thing - how do I pad the final result (assuming this is a cash
balance sheet), so 2.5 will appear as 2.50?

Randy Webb wrote:
gi******************@gmail.com said the following on 10/12/2005 11:21 PM:
I ran a second Google search.


A Google search of the web or an archive search of comp.lang.javascript?
What I mean is a working example. I still find discussions about the
topic, but nothing helping me as a complete novice. I'm hoping someone
can help me. If I missed something out there then please forgive this
response.


<form name="addform" method="POST" action="./submit.php">
<input type="text" name="Box1" size="20" value="100.50"
onchange="totalIt(this.form)"> +
<input type="text" name="Box2" size="20" value="200.50"
onchange="totalIt(this.form)"> +
<input type="text" name="Box3" size="20" value="1.50"
onchange="totalIt(this.form)">
<input type="text" name="Total" size="20" value="302.50"> </p>
</form>
<script type="text/javascript">
function totalIt(formObj){
formObj.Total.value=(+formObj.Box1.value)+(+formOb j.Box2.value)+(+formObj.Box3.value);
}
</script>

Note: I renamed your inputs without spaces in the name so that I could
use the dot notation.

<URL:
http://groups.google.com/group/micro...6bd95dc8513417
>


will give you some good reading also.

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?


Oct 13 '05 #6

P: n/a
gi******************@gmail.com wrote:
One more thing - how do I pad the final result (assuming this is a cash
balance sheet), so 2.5 will appear as 2.50?


v="2.5"
v+=v.indexOf(".")==-1?".00":v.indexOf(".")==v.length-2?"0":"";

Mick

[snip]
Oct 13 '05 #7

P: n/a
gi******************@gmail.com wrote:
One more thing - how do I pad the final result (assuming this is a cash
balance sheet), so 2.5 will appear as 2.50?

[...]

Here's a commented example, modified to suit your circumstance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Add form values</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
#addform input {width: 5em; text-align: right;}
..eCell {width:5em; color: red; font-weight:bold;}
</style>

<script type="text/javascript">

function updateForm(el)
{
// Declare variables
var f = el.form; // A reference to the form
var total = 0; // Initialise total as a number
var i = 1; // The first number of our 'Value' sequence
var err = false; // Has an error been found?
var erEl, m, x; // See below

// For the contiguous sequence of form controls with a name
// of 'Value1', 'Value2', ...
while ( (x=f.elements['Value' + i++]) ){

// Get the element that errors will be written to
erEl = document.getElementById('er_' + x.id);

// If validMoney doesn't return false it will return a
// formatted string
if ( (m = validMoney(x.value))){

// Clear the error element (regardless of whether it needs it)
erWrite('', erEl);

// Write the formatted value back to the control
x.value = m;

// Add the value to the total - the unary '+' converts m
// from a string to a number
total += +m;

// But if validMoney returned false, the value isn't one we like
} else {

// Warn the the user to fix the value
erWrite('Check!', erEl);

// Note that we found an error
anError = true;
}
}

// Write a value to the control named 'Total' -
// if an error was found, write nothing, else write the total
f.elements['Total'].value = (err)? '' : validMoney(total);
}

// Given an input element, write txt into it
// If no element is passed, use an alert
function erWrite(txt, el)
{
if (el) {
el.innerHTML = txt;
} else {
alert(txt);
}
}

// Check that n is a valid number. If so, return
// the formatted number. Otherwise, return false.
function validMoney(n)
{
// Convert to cents and round
var m = Math.round(n*100)+'';

// Add a leading zero if the number is less than 10
// If above made m 'NaN', test is false, no added zero
if (m<10) m = '0' + m;

// Return false if m is not a number (isNaN)
// or a formatted string if it is.
return (isNaN(m))? false :
(m/100 | 0) + '.' + m.substring(m.length-2);

// m/100 | 0 returns the integer part of m/100 or
// zero if the result is less than 1 - c.f. Math.floor(m/100)
// m.substring(...) returns the last two characters of m.
}

</script>

</head>
<body>

<!--
The form controls that will have their values added are named
Value1, Value2, etc. in a contiguous sequence.

Each has an associated element that error messages are
written to. The error element has an ID of the associated
control ID prefixed by 'er_'.

e.g. for Value1 the associated error element is er_Value1.

Errors are written using innerHTML.

The total is written to a control call 'Total'
-->
<form name="addform" id="addform" action="">
<table>
<tr>
<td>Value 1:</td>
<td><input type="text" name="Value1" id="Value1" value=".04"
onblur="updateForm(this);"></td>
<td class="eCell" id="er_Value1"></td>
</tr>
<tr>
<td>Value 2:</td>
<td><input type="text" name="Value2" id="Value2" value="200"
onblur="updateForm(this);"></td>
<td class="eCell" id="er_Value2"></td>
</tr>
<tr>
<td>Value 3:</td>
<td><input type="text" name="Value3" id="Value3" value="1."
onblur="updateForm(this);"></td>
<td class="eCell" id="er_Value3"></td>
</tr>
<tr>
<td>Total:</td>
<td><input type="text" name="Total" id="Total" readonly></td>
<td><input type="reset"></td>
</tr>
</table>
</form>

</body>
</html>
--
Rob
Oct 13 '05 #8

P: n/a
JRS: In article <44*****************@news.optus.net.au>, dated Thu, 13
Oct 2005 23:28:00, seen in news:comp.lang.javascript, RobG
<rg***@iinet.net.au> posted :
// Convert to cents and round
var m = Math.round(n*100)+'';

// Add a leading zero if the number is less than 10
// If above made m 'NaN', test is false, no added zero
if (m<10) m = '0' + m;


Since m is a String, it might be considered more elegant to test its
length rather than convert back to Number for comparison. Though it
then needs modification to deal with negative input acceptably.

Hoe about starting
var E, S, J
S = String(J = Math.round(n*100))
and using J/100 ?
Perhaps there should be a note that n must be not below -0.005?
And not above 2^31-1?

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links;
Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Oct 15 '05 #9

P: n/a
JRS: In article <11*********************@g43g2000cwa.googlegroups. com>,
dated Thu, 13 Oct 2005 09:36:00, seen in news:comp.lang.javascript,
gi******************@gmail.com posted :
One more thing - how do I pad the final result (assuming this is a cash
balance sheet), so 2.5 will appear as 2.50?


See FAQ Sec 4.6. It's all due to the Euro; it was not needed with Lire.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Oct 15 '05 #10

P: n/a
Dr John Stockton said the following on 10/15/2005 12:08 PM:
JRS: In article <11*********************@g43g2000cwa.googlegroups. com>,
dated Thu, 13 Oct 2005 09:36:00, seen in news:comp.lang.javascript,
gi******************@gmail.com posted :

One more thing - how do I pad the final result (assuming this is a cash
balance sheet), so 2.5 will appear as 2.50?

See FAQ Sec 4.6. It's all due to the Euro; it was not needed with Lire.


No John, wanting 2.5 displayed as 2.50 is not "due to the Euro". It is
due to - gasp - people wanting the leading/trailing zero displayed much
as it is in other apps.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 15 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.