isNaN result if some text fields empty [Archive]

View Full Version : isNaN result if some text fields empty

Lisawynn

04-27-2004, 03:05 PM

Good Morning!!! I have to create a script that contains three selects. Each select relates to ordering computer equipment. When the user selects an option from each drop down menu, the corresponding text fields populate with the appropriate amount selected from the drop down menu. What is supposed to happen is the taxes are to be calculated with the grand total being displayed. If the user changes their selection, the amounts should automatically recalculate and display the new totals. There is no button so I used onChange. I have it working if all the text fields contain an amount although it calculates isNan before they are all filled in as I put an onChange event in a few of the text fields. If the user selects "none" from the drop down list, the subtotal, taxes and grandtotal show "isNaN". I tried using .length with an if statement to show that if the text field ==0 then that text field value would be "0.00" but that didn't work. Not sure where I need the onChange event handler(s) to be because if some of the fields are left blank, it won't calculate when it needs to as there is no button for the user to click to signal they are finished and if there is no change to that text field, it won't fire. It just has to calculate as you go through it. How do you leave one (or more) text fields blank but calculate the remaining text fields and NOT get isNaN as part of the calculation?

<html>
<script type="javascript">

function getprintervalues(){
if(document.form6.printer[0].selected==true)
{
document.form6.printerprice.value="0.00";
}
if(document.form6.printer[1].selected==true)
{
document.form6.printerprice.value="50.00";
}
if(document.form6.printer[2].selected==true)
{
document.form6.printerprice.value="100.00";
}
if(document.form6.printer[3].selected==true)
{
document.form6.printerprice.value="200.00";
}

}

function getmonitorvalues(){
if(document.form6.monitor[0].selected==true)
{
document.form6.monitorprice.value="0.00";
}
if(document.form6.monitor[1].selected==true)
{
document.form6.monitorprice.value="70.00";
}
if(document.form6.monitor[2].selected==true)
{
document.form6.monitorprice.value="150.00";
}
if(document.form6.monitor[3].selected==true)
{
document.form6.monitorprice.value="375.00";
}

}

function getcomputervalues(){
if(document.form6.computer[0].selected==true)
{
document.form6.computerprice.value="0.00";
}
if(document.form6.computer[1].selected==true)
{
document.form6.computerprice.value="675.00";
}
if(document.form6.computer[2].selected==true)
{
document.form6.computerprice.value="5150.00";
}
if(document.form6.computer[3].selected==true)
{
document.form6.computerprice.value="800.00";
}

}

//subtotal menus

function subtotalprinter(){
var printerprice=parseInt(document.form6.printerprice.value);
var printeramount=parseInt(document.form6.printerquantity.value);
document.form6.printertotal.value=eval(parseInt(printerprice*printeramount));

}

function subtotalmonitor(){

var monitorprice=parseInt(document.form6.monitorprice.value);
var monitoramount=parseInt(document.form6.monitorquantity.value);
document.form6.monitortotal.value=eval(parseInt(monitorprice*monitoramount));

}

function subtotalcomputer(){
var computerprice=parseInt(document.form6.computerprice.value);
var computeramount=parseInt(document.form6.monitorquantity.value);
document.form6.computertotal.value=eval(parseInt(computerprice*computeramount));

}

function subtotalorder(){
var printertotal=parseInt(document.form6.printertotal.value);
var monitortotal=parseInt(document.form6.monitortotal.value);
var computertotal=parseInt(document.form6.computertotal.value);
document.form6.subtotal.value=eval(parseInt(printertotal + monitortotal + computertotal));
document.form6.total.value=parseInt(document.form6.subtotal.value*0.14);
var subtotal=parseInt(document.form6.subtotal.value);
var total=parseInt(document.form6.total.value);
var grandtotal=parseInt(document.form6.grandtotal.value);
document.form6.grandtotal.value=eval(parseInt(subtotal + total));
}
</script>
<form name="form6">
<BR><FONT color=green size=5>Part 6a </FONT><BR><BR>
<TABLE align=center>
<TBODY>
<TR>
<TD>
<OL>
<LI>Select product(s) to purchase.
<LI>Have the price appear in the price box (readonly).<BR>If none is
selected then no price should appear.
<LI>Enter a quantity to purchase.
<LI>After a quantity has been entered or removed
<UL>
<LI>Have the total appear/disappear in the total box
<LI>Have the taxes calculate automatically when a change is made.
<BR>if there are no items then nothing should be in the taxes box
<LI>Have the grand total calculate automatically when a change is made
<BR>if there are no items then nothing should be in the grand total
box </LI></UL></LI></OL></TD></TR></TBODY></TABLE>
<TABLE border=1>
<FORM>
<TBODY>
<TR>
<TD>Select a product</TD>
<TD>the price is</TD>
<TD>quantity you want</TD>
<TD>the Total is</TD></TR>
<TR>
<TD><SELECT name="printer" onChange="getprintervalues()"> <OPTION selected>Printer (none)<OPTION>no-name printer
$50.00<OPTION>epson printer $100.00<OPTION>deluxe printer
$200.00</OPTION></SELECT> </TD>
<TD><input type="text" readOnly name="printerprice"></TD>
<TD><input type="text" value="0" name="printerquantity" onChange="subtotalprinter(); subtotalorder()"></TD>
<TD><input type="text" name="printertotal"></TD></TR>
<TR>
<TD><SELECT name="monitor" onChange="getmonitorvalues()"> <OPTION selected>Monitor (none)<OPTION>no-name monitor
$75.00<OPTION>17" acer monitor $150.00<OPTION>deluxe lcd
$375.00</OPTION></SELECT> </TD>
<TD><input type="text" readOnly name="monitorprice"></TD>
<TD><input type="text" value="0" name="monitorquantity" onChange="subtotalmonitor(); subtotalorder()"></TD>
<TD><input type="text" name="monitortotal"></TD></TR>
<TR>
<TD><SELECT name="computer" onChange="getcomputervalues()"> <OPTION selected>Computer (none)<OPTION>Dell
$675.00<OPTION>Apple $5150.00<OPTION>Clone $875.00</OPTION></SELECT> </TD>
<TD><input type="text" readOnly name="computerprice"></TD>
<TD><input type="text" value="0" name="computerquantity" onChange="subtotalcomputer(); subtotalorder()"></TD>
<TD><input type="text" name="computertotal"></TD></TR>
<TR>
<TD align=right colSpan=3>subtotal</TD>
<TD><input type="text" name="subtotal"></TD></TR>
<TR>
<TD align=right colSpan=3>Gst + Pst</TD>
<TD><input type="text" name="total"></TD></TR>
<TR>
<TD align=right colSpan=3>Grand Total</TD>
<TD><input type="text" name="grandtotal"></TD></TR></FORM></TBODY></TABLE><BR><FONT color=green size=5>Part 6b
</FONT><BR><BR>Epson printers, Acer monitor and Apple computers are PST
exempt
</html>

Willy Duitt

04-27-2004, 04:27 PM

Hi;

First you need to fix your opening script tag.
It should be: <script type="text/javascript">
(please note what is highlighted in red)

You need to close all of your option tags and you would not need all of the conditional statements if you used the value attribute in your option tags. Plus, there never would be a time that the value was not a number, if the default value was 0. ;)

Below is a short example of how I would script the select menu and I provided four different ways you could grab the value from the select menu. As you will see, you do not need a seperate function for each option menu but rather one function which does the calculating.

<script type="text/javascript">

function getprintervalues(sel){
alert(sel.value)
alert(sel.options[sel.selectedIndex].value)
alert(document.form6.printer.value)
alert(document.form6['printer'].value)
}
</script>
</head>

<body>
<form name="form6">
<select name="printer" onchange="getprintervalues(this)">
<option value="0.00" selected>printer (none)</option>
<option value="50.00">no-name printer $50.00</option>
<option value="100.00">epson printer $100.00</option>
<option value="200.00">deluxe printer $200.00</option>
</select>
</form>

.....Willy

Lisawynn

04-27-2004, 05:30 PM

I see your point about the conditional statements so I have changed them to work with the value of the select. The taxes, subtotal and grand total text fields cannot have anything in them, they have to show as empty if nothing is ordered. If I give them a default value of 0, it shows up in the text field as 0. That can't happen as it has to be blank. Also, if the user orders only one product and leaves some of the text fields blank, it causes the isNaN to occur in the subtotal, taxes and grandtotal text fields. I am missing something. Anytime the user makes any change to the quantity ordered or selects a different option, the subtotal, taxes and grandtotal have to automatically reflect the change. :confused:

I also combined all of the calculation functions into one function called totalorder().

Willy Duitt

04-27-2004, 06:18 PM

The thing I like about javascript is that it is only limited by your imagination and your ability to visualize what you would like it to do.

FWIW: Here is an example of how one function can be reused for several different actions. In this example, your other selects could also reuse the obj if you included additional conditional statements following the example.

<style type="text/css">

</style>

<script type="text/javascript">

</script>
</head>

<body>
<form name="form6">
<select name="printer" onchange="getprintervalues(this)">
<option value="0.00" selected>printer (none)</option>
<option value="50.00">no-name printer $50.00</option>
<option value="100.00">epson printer $100.00</option>
<option value="200.00">deluxe printer $200.00</option>
</select><br>
<input type="text" name="printerprice" readonly="readonly"> the price is </br>
<input type="text" name="printerquantity"
onchange="getprintervalues(this)"
onfocus="this.select()"> quantity you want </br>
<input type="text" name="printertotal" readonly="readonly"> the Total is

</form>

.....Willy

Edit: Fixed the calculate problem if user picked a different printer.