PDA

Click to See Complete Forum and Search --> : Concantenates instead of adding?

SkyDog
12-11-2003, 09:08 AM
Hi there,

This script below is suppose to take the input from 4 textboxes and add them up and display the total in another textbox. This happens as you enter numbers into the textboxes. It is suppose to keep a running total.

The problem is that it concantenates instead of adding them up. I assume that is takes the input and treats it as a string instead of a number.



<SCRIPT language="JavaScript" type="text/JavaScript">
<!-- Begin
function showTotal(total) {
document.calculator.respons.value = total;
}
function getPurchCost() {
var pcost = document.calculator.pcost.value;
return (pcost == "") ? 0 : pcost;
}
function getPurchShipping() {
var pshipping = document.calculator.pshipping.value;
return (pshipping == "") ? 0 : pshipping;
}
function getPurchOther() {
var pother = document.calculator.pother.value;
return (pother == "") ? 0 : pother;
}
function getPurchInsurance() {
var pinsurance = document.calculator.pinsurance.value;
return (pinsurance == "") ? 0 : pinsurance;
}
function findPurchPrice() {
var pcost = getPurchCost();
var pshipping = getPurchShipping();
var pother = getPurchOther();
var pinsurance = getPurchInsurance();
var ptotal = formatTotal(pcost,pshipping,pother,pinsurance);
showTotal(ptotal);
}
function formatTotal(pcost,pshipping,pother,pinsurance) {
var result= (pcost+pshipping+pother+pinsurance);
return result;
}
// End -->
</SCRIPT>


The input textboxes...


<INPUT name="pcost" type="text" id="pcost" onkeypress="findPurchPrice()" onkeydown="findPurchPrice()" onKeyUp="findPurchPrice()" value="1" size="6">



The other 3 textboxes are the same as above.
The result textbox code is this...


<input type=text onfocus="this.blur()" name="respons" size="24" style="border:0; font-weight:bold;">


Any help the fix this to add the textboxes instead of concantenenting them is greatly appreciated.
Thanks in advance.

SkyDog
Aunecah
12-11-2003, 09:24 AM
The variables you're using are strings instead of numbers. Turn the variables into numbers (when you're adding) by doing something like:

0 + [variable here]

Aunecah
SkyDog
12-11-2003, 09:35 AM
All that did is concantenate the zero to the beginning.

How can I declare the variables as integers or numbers?
Aunecah
12-11-2003, 09:38 AM
Where are you adding the zeros? Can you post the revised version of your jscript?

Aunecah
SkyDog
12-11-2003, 09:53 AM
Thanks for the help.

I added the zero where I added them up


function formatTotal(pcost,pshipping,pother,pinsurance) {
var result= (0+pcost+pshipping+pother+pinsurance);
return result;
}


It concantenanted again.

And I tried adding the zero when I called for the input


function getPurchCost() {
var pcost = (0+document.calculator.pcost.value);
return (pcost == "") ? 0 : pcost;
}


It concantenanted again.

I assume the problem is that it is reading the input as strings and concantenanting it instead of reading it as a number and adding it.
Aunecah
12-11-2003, 10:08 AM
Try the ParseFloat() or ParseInt() function (depending on whether the numbers will have decimal points or not) then, like so:

var temp = parseFloat(pcost);
temp += parseFloat(pshippping);
temp += parseFloat(pother);
temp += parseFloat(pinsurance);

return temp;

Aunecah
SkyDog
12-11-2003, 10:39 AM
Aunecah.......THANK YOU!! That did the trick! Exactly what I was looking for.

Here is the extracted module. Now for a little work to return a default value of zero if the input box is empty (through a backspace or delete), to get rid of that darn "NaN" error!

Thanks for your time and help. This was my first time on this forum (just registered, first post) and your help right off the bat was fantastic. In truth, I was not expecting a response this quick. I will be definately be visiting these forums more often. Thanks again for giving me a great "first impression" of these forums.



<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<SCRIPT language="JavaScript" type="text/JavaScript">

function showTotal(total) {
document.calculator.respons.value = total;
}
function getPurchCost() {
var pcost = (document.calculator.pcost.value);
var temp = parseFloat(pcost);
return (temp == "") ? 0 : temp;
}
function getPurchShipping() {
var pshipping = (document.calculator.pshipping.value);
var temp = parseFloat(pshipping);
return (temp == "") ? 0 : temp;
}
function getPurchOther() {
var pother = (document.calculator.pother.value);
var temp = parseFloat(pother);
return (temp == "") ? 0 : temp;
}
function getPurchInsurance() {
var pinsurance = (document.calculator.pinsurance.value);
var temp = parseFloat(pinsurance);
return (temp == "") ? 0 : temp;
}
function findPurchPrice() {
var pcost = getPurchCost();
var pshipping = getPurchShipping();
var pother = getPurchOther();
var pinsurance = getPurchInsurance();
var ptotal = formatTotal(pcost,pshipping,pother,pinsurance);
showTotal(ptotal);
}
function formatTotal(pcost,pshipping,pother,pinsurance) {
var result= (pcost+pshipping+pother+pinsurance);
return result;
}
function filterNonNumeric(field) {
var result = new String();
var numbers = "0123456789.";
var chars = field.value.split(""); // create array
for (i = 0; i < chars.length; i++) {
if (numbers.indexOf(chars[i]) != -1) result += chars[i];
}
if (field.value != result) field.value = result;
}

</SCRIPT>


</HEAD>
<BODY onLoad="findPurchPrice()">

<form name=calculator>
<TABLE width="300" height="138" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD height="16" colspan="2" align="center" valign="top">&nbsp;</TD>
</TR>
<TR>
<TD width="86">Price</TD>
<TD width="214">
<INPUT name="pcost" type="text" id="pcost" onkeypress="findPurchPrice()" onkeydown="findPurchPrice()" onKeyUp="filterNonNumeric(this); findPurchPrice()" value="1" size="6">
</TD>
</TR>
<TR>
<TD>Shipping</TD>
<TD>
<INPUT name="pshipping" type="text" id="pshipping" onkeypress="findPurchPrice()" onkeydown="findPurchPrice()" onKeyUp="filterNonNumeric(this); findPurchPrice()" value="1" size="6">
</TD>
</TR>
<TR>
<TD>Other</TD>
<TD>
<INPUT name="pother" type="text" id="pother" onkeypress="findPurchPrice()" onkeydown="findPurchPrice()" onKeyUp="filterNonNumeric(this); findPurchPrice()" value="1" size="6">
</TD>
</TR>
<TR>
<TD>Insurance</TD>
<TD>
<INPUT name="pinsurance" type="text" id="pinsurance" onkeypress="findPurchPrice()" onkeydown="findPurchPrice()" onKeyUp="filterNonNumeric(this); findPurchPrice()" value="1" size="6">
</TD>
</TR>
<TR>
<TD height="30"><B>Total: </B></TD>
<TD height="20">
<INPUT type=text onFocus="this.blur()" name="respons" size="24" style="border:0; font-weight:bold;">
</TD>
</TR>
</TABLE>
</form>

</BODY>
</HTML>
Aunecah
12-11-2003, 11:22 AM
Are you saying you have another problem? (Sorry, I haven't had much sleep for the last couple of weeks.) Can you explain more?

Aunecah
SkyDog
12-11-2003, 11:34 AM
This issue just appeared when the script started working correctly.

If the input box is empty (through a backspace or delete), I want it to return a default value of zero, to get rid of that darn "NaN" error.
Aunecah
12-11-2003, 11:43 AM
How about something like:

function checkNumber(varCheck)
{
if varCheck="" return 0;
else if varCheck = NaN return alert("Please Enter a Number");
}

EDIT:

I have a question, why're you calling the functions repeatedly (for keypress, keyup, keydown, etc.)?

Can't you simply use the onChange event?

Aunecah
SkyDog
12-11-2003, 12:38 PM
I am using the "onKey" events because I want the script to update as they are entering data instead of after they click out of the box.

For instance...If they enter an alpha char in the textbox, the script immediately deletes the alpha char. Instead of waiting to delete it when they click out of the box.

Hmmm, maybe waiting until they click out of the box will solve my "NaN" error. Let me give the "onChange" event a shot. I may end up liking it better..... ;)

People should be smart enough to notice an alpha char in a numeric field. Wouldn't you think? haha