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 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    62
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Javascript form 2 step calculation

    I've managed to throw together the from below. It has a two stage calculating method. It displays the amount (subtotals) for a quantity of items at a fixed amount - there are several items. You just type in the number that you want. The amounts (subtotals) are then added together via a button click to produce the overall total.

    I'm aware that the script is quite basic, but it works for what I want it to do.

    There are two aspects that I'd like to improve:

    1) when a letter is typed the resulting value is NAN - I'd like to change this to a blank output.

    2) I'd like to dispense with the 'add sub totals' button. I would like the total to add based on the calculations taking place further up the form. I've tried to integrate scripts that do this but I haven't had any luck.

    Code:
    <script language="javascript">
    function CalculateSum(Atext, Btext, form)
    {
    var A = parseFloat(Atext);
    var B = parseFloat(Btext);
    form.total.value = A + B;
    }
    </script>
    </head>
    <body>
    
    <form> 
    <input type="text" name="v1" size="20" value=" " onkeyup="answer.value = parseInt(v1.value) * 18">@ 18 &nbsp;&nbsp;&nbsp;&nbsp; 
    Sub total: <input name="answer1" id="answer" value=" " ><br/><br/>
    <input type="text" name="v2" size="20" value=" " onkeyup="nextanswer.value = parseInt(v2.value) * 20">@ 20 &nbsp;&nbsp;&nbsp;&nbsp;
    Sub total: <input name="answer2" id="nextanswer" value=" " ><br/><br/>
    <input type="button" value="add numbers" name="addbutton" onclick="CalculateSum(this.form.answer1.value, this.form.answer2.value, this.form)"><br/><br/>
    TOTAL: <input type='text' name='total' ><br/><br/>
    <input type='reset' value="clear form"><br/><br/>
    <input type='submit' value='send'/>
    
    </form>

    Any help/tips would be greatly appreciated.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Code:
    <script type="text/javascript">
    function CalculateSum(ans, val, mult)
    {
      var frm = ans.form;
      var product = val * mult;
      ans.value = (isNaN(product)) ? "" : product;
      frm.total.value = Number(frm.answer1.value) + Number(frm.answer2.value);
    }
    </script>
    </head>
    <body>
    <form> 
    <input type="text" name="v1" size="20" value="" onkeyup="CalculateSum(this.form.answer1, this.value, 18);" />@ 18 &nbsp;&nbsp;&nbsp;&nbsp; 
    Sub total: <input name="answer1" id="answer" value="" /><br /><br />
    <input type="text" name="v2" size="20" value="" onkeyup="CalculateSum(this.form.answer2, this.value, 20);" />@ 20 &nbsp;&nbsp;&nbsp;&nbsp;
    Sub total: <input name="answer2" id="nextanswer" value="" /><br /><br />
    TOTAL: <input type="text" name="total" /><br /><br />
    <input type="reset" value="clear form" /><br /><br />
    <input type="submit" value="send" />
    </form>

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    62
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Perfect.

    Thankyou.


  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Glad to help you.


  •  

    Posting Permissions

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