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 11 of 11
  1. #1
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    Adding numbers in real time?

    Hi,
    I'm wondering how I can add numbers in real time using javascript.

    example,

    say I enter a number in a text field,

    <input type="text" name="qty" value="2">
    <input type="text" name="cost" value="5">

    how would I then be able to get the total in another test field, like:

    <input type="text" name="total" value="10">

    hope someone understands what I'm trying to do here.
    any help would be great!

    thanks in advance for your time!
    -ken

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    624
    Thanks
    1
    Thanked 20 Times in 20 Posts
    <input type="text" name="qty" value="2">
    <input type="text" name="cost" value="5" onblur="document.forms[0].total.value = document.forms[0].qty.value*1 + document.forms[0].cost.value*1;">
    <input type="text" name="total" value="10">

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    hmm, that doesn't seem to do anything,
    unless I'm missing something?

    thanks again,
    -Ken

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    624
    Thanks
    1
    Thanked 20 Times in 20 Posts
    These three lines need to be within <form> </form> tags. I tested it on a WinXP machine running Firefox.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    very prone to typing errors

    this makes some attempt to catch

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Add(){
     var q=document.forms[0].qty;
     var c=document.forms[0].cost;
     var t=document.forms[0].total;
     if (isNaN(q.value)||isNaN(c.value)){
      q.value=q.value.replace(/\D/g,'');
      c.value=c.value.replace(/\D/g,'');
      alert('Only Numbers Allowed');
     }
     if (q.value.length>0&&c.value.length>0){
      t.value=parseInt(q.value)+parseInt(c.value);
     }
    }
    //-->
    </script>
    
    </head>
    
    <body>
    <form >
    <input type="text" name="qty" value="2" onkeyup="Add();" >
    <input type="text" name="cost" value="5" onkeyup="Add();" >
    <input type="text" name="total" value="10">
    </form>
    </body>
    
    </html>

  • #6
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    ah
    perfect!

    thanks again for you help!
    -Ken

  • #7
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ignored, so deleted.
    Last edited by Ancora; 12-16-2005 at 07:31 PM.

  • #8
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    ok one more question,
    what if I had a drop down <select> to add another number option in?

    like
    PHP Code:
    <script language="JavaScript" type="text/javascript">
    <!--

    function 
    Add(){
     var 
    q=document.forms[0].tax;
     var 
    q=document.forms[0].qty;
     var 
    c=document.forms[0].cost;
     var 
    t=document.forms[0].total;
     if (
    isNaN(q.value)||isNaN(c.value)){
      
    q.value=q.value.replace(/D/g,'');
      
    c.value=c.value.replace(/D/g,'');
      
    alert('Only Numbers Allowed');
     }
     if (
    q.value.length>0&&c.value.length>0){
      
    t.value=parseInt(q.value)+parseInt(c.value);
     }
    }
    //-->
    </script>

    </head>

    <body>
    <form >
    tax:
    <select name="tax">
    <option value="">none</option>
    <option value="5.0">5%</option>
    <option value="10.0">10%</option>
    <option value="15.0">15%</option>
    </select>
    <br />
    qty:
    <input type="text" name="qty" value="2" onkeyup="Add();" /><br />
    cost:<input type="text" name="cost" value="5" onkeyup="Add();" /><br />
    Total:<input type="text" name="total" value="10">
    </form> 
    sorry for all the questions, i'm new with javascript.

    thanks again,
    -Ken

  • #9
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    hmm,
    tried this:

    <script language="JavaScript" type="text/javascript">
    <!--

    function Add(){
    var tx=document.forms[0].tax;
    var q=document.forms[0].qty;
    var c=document.forms[0].cost;
    var t=document.forms[0].total;
    if (isNaN(q.value)||isNaN(c.value)){
    q.value=q.value.replace(/\D/g,'');
    c.value=c.value.replace(/\D/g,'');
    alert('Only Numbers Allowed');
    }
    if (q.value.length>0&&c.value.length>0){
    temp.value=parseInt(q.value)+parseInt(c.value);
    t.value=temp.value * parseInt(tx.value) / 100 + temp.value;
    }
    }
    //-->
    </script>

    but no luck, doesn't work at all now.

  • #10
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    ok,
    I've got it working,
    just one last question,

    how can I make the total update if I select the tax last.

    my code:

    PHP Code:
    <script language="JavaScript" type="text/javascript">
    <!--

    function 
    Add(){
     var 
    tx=document.forms[0].tax;
     var 
    q=document.forms[0].qty;
     var 
    c=document.forms[0].cost;
     var 
    t=document.forms[0].total;
     if (
    isNaN(q.value)||isNaN(c.value)){
      
    q.value=q.value.replace(/D/g,'');
      
    c.value=c.value.replace(/D/g,'');
      
    tx.value=tx.value.replace(/D/g,'');
      
    alert('Only Numbers Allowed');
     }
     if (
    q.value.length>0&&c.value.length>0){
      
    temp=parseInt(q.value) * parseInt(c.value);
      
    t.value temp tx.value 100 temp;
     }
    }
    //-->
    </script>

    </head>

    <body>
    <form >
    <select name="tax" onkeyup="Add();">
    <option value="0">non</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    </select>
    <br />
    qty:<input type="text" name="qty" value="" onkeyup="Add();" /><br />
    cost:<input type="text" name="cost" value="" onkeyup="Add();" /><br />
    total:<input type="text" name="total" value="">
    </form> 
    I tried adding onkeyup="Add();" to the select, but it doesn't seem to work.

    any ideas?

    thanks again!
    -Ken

  • #11
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    ok, I got it,
    using
    onChange="Add();"



    -Ken


  •  

    Posting Permissions

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