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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Adding two variables in jQuery?

    Hi all,

    I'm trying to adjust my script so that it add's the two variables.

    So, the short straw is :

    Value 1 generated from the first form and value 2 from the second form are added together and displayed in value 3.

    http://jsfiddle.net/clarkysite/FXr4y/11/

    Code:
    var $output1 = $("#output-value1");
    $("#input-value1").keyup(function() {
        var value1 = parseFloat($(this).val());
        $output1.val(value1*2);
    });
    
    var $output2 = $("#output-value2");
    $("#input-value2").keyup(function() {
        var value2 = parseFloat($(this).val());
        $output2.val(value2*2);
    });
    
    
    var $output3 = $output1 + $output2​
    Code:
    <input type="text" id="input-value1" />
    <input type="text" id="output-value1" readonly /></br></br>
    <input type="text" id="input-value2" />
    <input type="text" id="output-value2" readonly /></br></br>
    <input type="text" id="output-final" />
    ​
    Any help appreciated

    Cheers.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    the only thing is deciding when the final addition takes place. the below happens on the onkeyup of the second input box. You don't need to convert the string to a number if you are multiplying, but you do if you are adding:

    Code:
    var $output1 = $("#output-value1");
    $("#input-value1").keyup(function() {
        $output1.val($(this).val()*2);
    });
    
    var $output2 = $("#output-value2");
    $("#input-value2").keyup(function() {
        $output2.val($(this).val()*2);
        $("#output-final").val(Number($("#output-value2").val()) + Number($("#output-value1").val()))
    });

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That worked great, cheers!

    I've altered it and added your additional code to both the first and second calculations, so now when either box is updated it updates the final figure and seems to work ok.

    As theres no other way I can think to make it loop it and update when the figure in either form is updated.

    Code:
    var $output1 = $("#output-value1");
    $("#input-value1").keyup(function() {
        $output1.val($(this).val()*2);
            $("#output-final").val(Number($("#output-value2").val()) + Number($("#output-value1").val()))
    });
    
    var $output2 = $("#output-value2");
    $("#input-value2").keyup(function() {
        $output2.val($(this).val()*2);
        $("#output-final").val(Number($("#output-value2").val()) + Number($("#output-value1").val()))
    });​
    Cheers!

    Clarky

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    that seems to be the simplest way, unless you want to overhaul your code completely, giving class names to the inputs and finding the "output" boxes using the .next() method, then looping through those to get the result:

    Code:
    <input type="text" class="input" />
    <input type="text" class="output" readonly /></br></br>
    <input type="text" class="input" />
    <input type="text" class="output" readonly /></br></br>
    <input type="text" id="output-final" />
    
    
    <script type="text/javascript">
    $(".input").keyup(function() {
        $(this).next().val($(this).val()*2);
        var ans=$("#output-final")      
      ans.val(0);
      $('.output').each(function() {
      ans.val(Number(ans.val())+Number($(this).val()));
            });
    });
    </script>
    which may be useful if you were doing say 50 calculations, but I guess with 2 it doesn't really make a whole lot of difference
    Last edited by xelawho; 05-31-2012 at 02:30 PM.

  • Users who have thanked xelawho for this post:

    Clarky (05-31-2012)

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the quick responses, really helpful. That last bit of script is really sensible, stops the possible clog up of the page scripting to.

    Last two questions, thanks in advanced,

    Ss there anyway to have the script load the values upon page load if I had default values?

    For example http://jsfiddle.net/clarkysite/XKPxe/

    So that on page load it generates the values from the defaulted inputs, then when a new value is entered it continues as it does now?

    And also is there anyway to add a prefix to the result, for example a letter or symbol?

    Thanks for all your help, very much appreciated!
    Last edited by Clarky; 05-31-2012 at 06:14 PM.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I'm not really a jQuery-er, but I guess this is one way of doing it - do the multiplications once on page load, then have a separate function that does the addition, which is called after the initial additions and also onkeyup.

    to add something to the value, just do it once the loop has finished (there are probably built-in jQuery methods for some of this stuff, but like I say, I'm not really that into it):

    Code:
    $('.input').each(function() {
        $(this).next().val($(this).val()*2);
        addEm();
        });
    
    $(".input").keyup(function() {
        $(this).next().val($(this).val()*2);
        addEm();
    });
    
    function addEm(){
    var ans=$("#output-final")      
      ans.val(0);
      $('.output').each(function() {
      ans.val(Number(ans.val())+Number($(this).val()));
            });
        ans.val("Total is: "+ans.val());
    }

  • #7
    New to the CF scene
    Join Date
    May 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks yet again. Works perfectly.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo by clarkysite</title>
      
      <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
      
      <link rel="stylesheet" type="text/css" href="/css/normalize.css">
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      
      <style type='text/css'>
        
      </style>
      
    
    
    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('.input').each(function() {
        $(this).next().val($(this).val()*2);
            $(this).next().val("Total is: "+$(this).val());
        addEm();
        });
    
    $(".input").keyup(function() {
        $(this).next().val($(this).val()*2);
            $(this).next().val("Total is: "+$(this).val());
        addEm();
    });
    
    function addEm(){
    var ans=$("#output-final")      
      ans.val(0);
      $('.input').each(function() {
      ans.val(Number(ans.val()*2)+Number($(this).val()*2));
            });
        ans.val("Total is: "+ans.val());
    }
    
    });//]]>  
    
    </script>
    
    
    </head>
    <body>
      <input type="text" class="input" value="5" />
    <input type="text" class="output" readonly /></br></br>
    <input type="text" class="input" value="10" />
    <input type="text" class="output" readonly /></br></br>
    <input type="text" id="output-final" />
      
    </body>
    
    
    </html>
    I've exported the code from jsfiddle into a html document and suddenly non of the calculations work? :S

    Any ideas? Sorry to be a pain to take up your time.

    It really is so much appreciated.

    Cheers again.

    **EDIT**

    Scrap that all working fine now. Cheers for your help, will post my finished script shortly so you can see what the heck this was for!
    Last edited by Clarky; 06-01-2012 at 03:17 PM.


  •  

    Posting Permissions

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