www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help with adding number to a total inside a text box

  1. #1
    Join Date
    Feb 2009
    Posts
    8

    Help with adding number to a total inside a text box

    Ok background on what I am trying to accomplish. First off this is just me trying to test this code if you can answerthe ultimate part thatd be GREAT. I am creating a page for 5 products(labled 1-5). I have my code to onkey stroke change the Total text box in the form. Once that is complete I have a selection drop down box that has 3 methods with different pricing. I will want to select an option and it selects a price for that value. ex: ground = 3.95. then you press calculate shipping and it addes Total plus shipping and displays in grand total box. here is my code thus far with the selection aprt even it in it.

    right now I am just trying to get the code to add my total and 20 for testing but my output keeps coming in NaN any help would be GREAT>

    script:
    <script type="text/javascript">
    /* <![CDATA[ */
    var product1 = 0;
    var product2 = 0;
    var product3 = 0;
    var product4 = 0;
    var product5 = 0;
    function calcproduct1(p1) {
    product1 = p1 * 1.25;
    calcTotalEstimate();
    }
    function calcproduct2(p2){
    product2 = p2 * .15;
    calcTotalEstimate();
    }
    function calcproduct3(p3) {
    product3 = p3 * 50;
    calcTotalEstimate();
    }
    function calcproduct4(p4) {
    product4 = p4 * 25;
    calcTotalEstimate();
    }
    function calcproduct5(p5) {
    product5 = p5 * 35;
    calcTotalEstimate();
    }
    function calcTotalEstimate() {
    var total = product1;
    total += product2;
    total += product3;
    total += product4;
    total += product5;
    document.forms[0].total.value = "$" + total.toLocaleString();
    }


    function validateInput(keyPressEvent){
    if (navigator.appName == "Microsoft Internet Explorer")
    var enteredKey = keyPressEvent.keyCode;
    else if (navigator.appName == "Netscape")
    var enteredKey = keyPressEvent.charCode;
    var enteredChar = String.fromCharCode(enteredKey);
    var retValue = true;
    try{
    if (!/\d/.test(enteredChar) && !/\W/.test(enteredChar))
    throw "You did not enter a numeric value.";
    }
    catch(inputError) {
    window.alert(inputError);
    retValue = false;
    }
    finally {
    return retValue;
    }
    }

    function checkForNumber(fieldValue) {
    var numberCheck = isNaN(fieldValue);
    if (numberCheck == true) {
    window.alert("You must enter a numeric value!");
    return false;}
    }

    function calGrandTotal() {
    grand = document.productForm.total.value
    grand = Number(grand)
    grand2 = 20
    grand2 = Number(grand2)
    grand3 = (grand + grand2)
    document.productForm.grandTotal.value = grand3
    }
    /* ]]> */
    </script>

    and html code:
    <body>
    <form name="productForm" action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded"
    onsubmit="return confirmSubmit();"
    onreset="return confirmReset();">
    <table border="0">
    <tr><td>Product 1</td><td><input name="p1" type="text" onkeypress="return validateInput(event)" onblur="calcproduct1(this.value);" /> ($1.25)</td></tr>
    <tr><td>Product 2</td><td><input name="p2" type="text" onkeypress="return validateInput(event)" onblur="calcproduct2(this.value);" /> (.15)</td></tr>
    <tr><td>Product 3</td><td><input name="p3" type="text" onkeypress="return validateInput(event)" onblur="calcproduct3(this.value);" /> ($50)</td></tr>
    <tr><td>Product 4</td><td><input name="p4" type="text" onkeypress="return validateInput(event)" onblur="calcproduct4(this.value);" /> ($25)</td></tr>
    <tr><td>Product 5</td><td><input name="p5" type="text" onkeypress="return validateInput(event)" onblur="calcproduct5(this.value);" /> ($35)</td></tr>
    <tr><td>Total</td><td><input name="total" type="text" onkeypress="return validateInput(event)" onfocus="this.blur()" /> </td></tr>
    <tr><td>Shipping Info</td><td><select name="shippingMethod">
    <option selected="selected" value="ground">Standard ground UPS</option>
    <option value="usps">USPS</option>
    <option value="air">2nd Day Air</option>
    </select></td></tr>
    <tr><td>Total W/ Shipping</td><td>
    <input name="grandTotal" type="text" style="height: 22px" readonly="readonly" />&nbsp;
    <input name="shipTotalB" type="button" value="Calculate Total with shipping" onclick="calGrandTotal(this.value)" /></td></tr>
    </table>

  2. #2
    Join Date
    Feb 2009
    Posts
    8
    any suggestions?

  3. #3
    Join Date
    Feb 2009
    Posts
    36
    Code:
    <html>
    <head>
    <script type="text/javascript">
    /* <![CDATA[ */
    
    var prices = [1.25,0.15,50,25,35];
    var sprices = [1,2,3];
    
    function $(id){
    	return document.getElementById(id);
    }
    
    function calc(){
    	var tmp = 0;
    	for(var i = 1; i <= prices.length; i++){
    		var a = parseInt($('p'+i).value);
    		tmp += (isNaN(a)?0:a) * prices[i-1];
    	}
    	return tmp;
    }
    function update(){
    	$('total').value ='$'+calc();
    }
    
    function validateInput(keyPressEvent){
    if (navigator.appName == "Microsoft Internet Explorer")
    var enteredKey = keyPressEvent.keyCode;
    else if (navigator.appName == "Netscape")
    var enteredKey = keyPressEvent.charCode;
    var enteredChar = String.fromCharCode(enteredKey);
    var retValue = true;
    try{
    if (!/\d/.test(enteredChar) && !/\W/.test(enteredChar))
    throw "You did not enter a numeric value.";
    }
    catch(inputError) {
    window.alert(inputError);
    retValue = false;
    }
    finally {
    return retValue;
    }
    }
    
    function checkForNumber(fieldValue) {
    var numberCheck = isNaN(fieldValue);
    if (numberCheck == true) {
    window.alert("You must enter a numeric value!");
    return false;}
    }
    
    function calGrandTotal() {
    	var tmp = calc();
    	tmp += sprices[$('sel').value];
    	$('gtotal').value = tmp;
    }
    /* ]]> */
    </script>
    </head>
    <body>
    <form name="productForm" action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded"
    onsubmit="return confirmSubmit();"
    onreset="return confirmReset();">
    <table border="0">
    <tr><td>Product 1</td><td><input id="p1" type="text" onkeypress="return validateInput(event)" onblur="update();" /> ($1.25)</td></tr>
    <tr><td>Product 2</td><td><input id="p2" type="text" onkeypress="return validateInput(event)" onblur="update();" /> (.15)</td></tr>
    <tr><td>Product 3</td><td><input id="p3" type="text" onkeypress="return validateInput(event)" onblur="update();" /> ($50)</td></tr>
    <tr><td>Product 4</td><td><input id="p4" type="text" onkeypress="return validateInput(event)" onblur="update();" /> ($25)</td></tr>
    <tr><td>Product 5</td><td><input id="p5" type="text" onkeypress="return validateInput(event)" onblur="update();" /> ($35)</td></tr>
    <tr><td>Total</td><td><input id="total" type="text" onkeypress="return validateInput(event)" onfocus="update();" /> </td></tr>
    <tr><td>Shipping Info</td><td>
    <select name="shippingMethod" id='sel'>
    <option selected="selected" value="0">Standard ground UPS</option>
    <option value="1">USPS</option>
    <option value="2">2nd Day Air</option>
    </select></td></tr>
    <tr><td>Total W/ Shipping</td><td>
    <input id="gtotal" type="text" style="height: 22px" readonly="readonly" />&nbsp;
    <input name="shipTotalB" type="button" value="Calculate Total with shipping" onclick="calGrandTotal()" /></td></tr>
    </table>
    Reply With Quote
    </html>
    I tried to follow your "code".
    Some suggestion, everything IMHO:
    1) I'd use id instead of names
    2) Use document.getElementById function
    3) Remeber that this refers to the object which called the code: if you use this as an argument of onclick event, refered to a button, this would refear to that button,not to grandtotal.
    Last edited by iokosan; 02-20-2009 at 09:25 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles