Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with javascript calculation

    hi, i have this form with a subtotal button but I can't seem to call the function to add the appropriate values.

    basically, there are 3 products to choose from and the user can enter quantity values for each accordingly.

    there are also three different shipping options, with different prices.

    i want to call the function calc so that it will add the numbers correctly but the function doesn't even run... whats goin on?

  • #2
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It produces a Nan or other values that are inappropriate. I guess i have to make sure that the quantity values are > 0 first. how would i approach this?

    here is my code btw:

    <html>
    <body>

    <script type="text/javascript">



    function Calc()

    {

    var total1 = document.myForm.p1.value;
    var total2 = document.myForm.p2.value;
    var total3 = document.myForm.p3.value;

    var subtotal;
    var shippingtotal;

    subtotal=(total1*1.25)+(total*2.25)+(total*3.25);
    shippingtotal=document.myForm.shipping.value;

    document.myForm.total.value=subtotal+shippingtotal;


    }

    </script>

    <body bgcolor="#555555">

    <form action="#" method="post" name="myForm" id="myForm" onsubmit="return verify(this);">
    <table align="center" border="1">
    <tr>
    <td><input type="checkbox" id="ckbox1" name="ckbox1" onclick="checkboxClick(this);" /> Product 1</td>
    <td>@ 1.25 <input type="text" id="p1" name="p1" size="5" value="" /> Quantity</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="ckbox2" name="ckbox2" onclick="checkboxClick(this);" /> Product 2</td>
    <td>@ 2.25 <input type="text" id="p2" name="p2" size="5" /> Quantity</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="ckbox3" name="ckbox3" onclick="checkboxClick(this);" /> Product3</td>
    <td>@ 3.25 <input type="text" id="p3" name="p3" size="5" /> Quantity</td>

    </tr>
    <tr>
    <td>Ship to:</td>
    <td>
    <table border="1">
    <tr>
    <td>Name:</td>
    <td><input type="text" name="name" id="name" /></td>
    </tr>
    <tr>
    <td>Address:</td>
    <td><input type="text" name="address" id="address" /></td>
    </tr>
    <tr>
    <td>City:</td>
    <td><input type="text" name="city" id="city" /></td>
    </tr>
    <tr>
    <td>State:</td>
    <td>
    <select name="state" id="state" >
    <option value="">--Select State--</option>
    <option value="AL">AL</option>
    <option value="AK">AK</option>
    <option value="AZ">AZ</option>
    <option value="AR">AR</option>
    <option value="CA">CA</option>
    <option value="CO">CO</option>
    <option value="CT">CT</option>
    <option value="DE">DE</option>
    <option value="FL">FL</option>
    <option value="GA">GA</option>
    <option value="HI">HI</option>
    <option value="ID">ID</option>
    <option value="IL">IL</option>
    <option value="IN">IN</option>
    <option value="IA">IA</option>
    <option value="KS">KS</option>
    <option value="KY">KY</option>
    <option value="LA">LA</option>
    <option value="ME">ME</option>
    <option value="MD">MD</option>
    <option value="MA">MA</option>
    <option value="MI">MI</option>
    <option value="MN">MN</option>
    <option value="MS">MS</option>
    <option value="MO">MO</option>
    <option value="MT">MT</option>
    <option value="NE">NE</option>
    <option value="NV">NV</option>
    <option value="NH">NH</option>
    <option value="NJ">NJ</option>
    <option value="NM">NM</option>
    <option value="NY">NY</option>
    <option value="NC">NC</option>
    <option value="ND">ND</option>
    <option value="OH">OH</option>
    <option value="OK">OK</option>
    <option value="OR">OR</option>
    <option value="PA">PA</option>
    <option value="PR">PR</option>
    <option value="RI">RI</option>
    <option value="SC">SC</option>
    <option value="SD">SD</option>
    <option value="TN">TN</option>
    <option value="TX">TX</option>
    <option value="UT">UT</option>
    <option value="VT">VT</option>
    <option value="VA">VA</option>
    <option value="WA">WA</option>
    <option value="WV">WV</option>
    <option value="WI">WI</option>
    <option value="WY">WY</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>Zip:</td>
    <td><input type="text" name="zip" id="zip" /></td>
    </tr>
    <tr>
    <td>Phone:</td>
    <td><input type="text" name="phonenumber" id="phonenumber" /></td>
    </tr>
    <tr>
    <td>Email:</td>
    <td><input type="text" name="email" id="email" /></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>Shipping:</td>
    <td>
    <select name="shipping">
    <option value="">Select...</option>
    <option value="3.50">Standard @ $3.50</option>
    <option value="5">2-3 days @ $5.00</option>
    <option value="7.5">Overnight @ $7.50</option>
    </select>
    </td>
    </tr>
    <tr>
    <td><input type="button" value="subtotal" name="subtotal" id="subtotal" onclick="Calc(this);" /></td>
    <td><input type="text" name="total" id="total" /></td>
    </tr>
    <tr>
    <td><input type="radio" name="creditcard" id="creditcard" />MasterCard</td>
    <td rowspan="2">
    <input type="text" name="cardnum" id="cardnum" />
    </td>
    </tr>
    <tr>
    <td><input type="radio" name="creditcard" id="creditcard" />Visa</td>
    </tr>
    <tr>
    <td><input type="submit" name="submit" id="submit" value="submit" /></td>
    <td><input type="reset" name="reset" id="reset" value="reset" /></td>
    </table>
    </form>

    </body>
    </html>

  • #3
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    First off, you're using non-existent variables when you define subtotal. Try:

    subtotal=(total1*1.25)+(total2*2.25)+(total3*3.25);


    Second, use an if...else statement to check the quantities:

    if (total1>0 && total2>0 && total3>0){
    subtotal=(total1*1.25)+(total2*2.25)+(total3*3.25);
    shippingtotal=document.myForm.shipping.value;

    document.myForm.total.value=subtotal+shippingtotal;
    }
    else {
    alert("One or more of the quantities you specified is zero.")
    }

  • #4
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I had the same problem, I generated an invoice creator for my business which did the same thing untill i used parseFloat().

    i'd suggest you try using parseFloat() on all your form fields to make sure they are floating numbers then try and do the maths


    Code:
    function Calc(){
    
    var total1 = parseFloat(document.myForm.p1.value);
    var total2 = parseFloat(document.myForm.p2.value);
    var total3 = parseFloat(document.myForm.p3.value);
    
    var subtotal = 0;
    var shippingtotal = 0;
    
    subtotal = (total1*1.25) + (total*2.25) + (total*3.25);
    shippingtotal = parseFloat(document.myForm.shipping.value);
    
    formtotal = subtotal + shippingtotal;
    document.myForm.total.value = formtotal.toFixed(2);
    
    
    }
    of course this function has no error capturing so personally i would do something like this...

    Code:
    function Calc(){
    
    var total1 = parseFloat(document.myForm.p1.value);
    var total2 = parseFloat(document.myForm.p2.value);
    var total3 = parseFloat(document.myForm.p3.value);
    
    if (total1 < 0.01 || total2 < 0.01 || total3 < 0.01){
    	alert("Please enter valid numbers greater than 0");
    } else {
    	var subtotal = 0;
    	var shippingtotal = 0;
    
    	subtotal = (total1*1.25) + (total*2.25) + (total*3.25);
    	shippingtotal = parseFloat(document.myForm.shipping.value);
    
    	formtotal = subtotal + shippingtotal;
    	document.myForm.total.value = formtotal.toFixed(2);
    }
    
    
    }
    you should also check the input first to make sure it isn't letters
    Last edited by neomaximus2k; 02-07-2007 at 09:59 AM.
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    value attribute returns a string, not a decimal number, so that before any math addition/subtraction operation you must transform those strings into decimal numbers. parseFloat() is one of the methods, but not the best, as it returns NaN when the value is an epmty string.

    Number() method is to be used, as it returns 0 when there is an empty value.
    Code:
    var total1 = Number(document.myForm.p1.value);
    var total2 = Number(document.myForm.p2.value);
    var total3 = Number(document.myForm.p3.value);
    var shippingtotal=Number(document.myForm.shipping.value);
    var subtotal=(total1*1.25)+(total*2.25)+(total*3.25);
    document.myForm.total.value=subtotal+shippingtotal;
    But in this case you must make sure that "shiping" list has always a value, thus you should rather make it:
    Code:
    <select name="shipping">
    <option value="0">Select...</option>
    <option value="3.50">Standard @ $3.50</option>
    <option value="5">2-3 days @ $5.00</option>
    <option value="7.5">Overnight @ $7.50</option>
    </select>
    or better
    Code:
    <select name="shipping">
    <option value="3.50">Standard @ $3.50</option>
    <option value="5">2-3 days @ $5.00</option>
    <option value="7.5">Overnight @ $7.50</option>
    </select>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •