SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript noob needs help

    Hi

    I need to create a function that adds up the value of all inputs whose ID ends "_price" and then drop the answer in to an input whose ID is "total"

    Any takers?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    You would just go through every element and check whether it's name ends in "_price" (which is to say substr(id, id.length-6) == "price"). Then, if it is you add it's value to a sum variable.

    Give me about 5 minutes and I'll have a working example up for you to take a look at.

    Here you go: http://www.arwebdesign.net/test/summing.html

    If you look at the comments in the source you can see what the code does. Basically it goes through the specified node's entire sub-tree looking for any id that ends with the specified search string. As a check, I added another element ending with price outside of that sub-tree to make sure that it isn't added in as well.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <body>
    
    <div id="checkHere">
    <input type="text" id="foo_price" />
    <input type="text" id="bar" />
    <input type="text" id="wiz_price" />
    </div>
    
    <input type="button" onclick="getPrice('checkHere');" value="Sum Prices" />
    
    <script type="text/javascript">
    function getPrice(myNode){
    	var inputs = document.getElementById(myNode).getElementsByTagName("input");
    	var sum = 0;
    	for (var i = 0; i < inputs.length; i++) {
    		var curID = inputs[i].id;
    		sum += parseFloat(inputs[i].value) * (curID.substr(curID.length-6) == "_price" ? 1 : 0);
    	}
    	alert(sum);
    }
    </script>
    
    </body>

  4. #4
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I must be doing something wrong.

    Heres my code.

    Code JavaScript:
    function getValue(id) {
        var select = document.getElementById(id);
        var option = select.options[select.selectedIndex];
        var price = option.value.split(', ')[1];
        var input = document.getElementById(id + '_quantity');
        if(input) {
            var quantity = document.getElementById(id + '_quantity').value;
        }
        else {
            var quantity = 1;
        }
        var totalprice = price * quantity;
        document.getElementById(id + '_price').value = totalprice;
        updateTotal('core_system_builder');
    }
     
    function updateTotal(myNode){
        var inputs = document.getElementById(myNode).getElementsByTagName("input");
        var sum = 0;
        for (var i = 0; i < inputs.length; i++) {
            var curID = inputs[i].id;
            sum += parseFloat(inputs[i].value) * (curID.substr(curID.length-6) == "_price" ? 1 : 0);
        }
        document.getElementById('parts_total').value = sum;
    }
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do all of the input elements within your target node have a value and can those values always be parsed as floats? If not, you may have to put some extra conditions in so that only values that can be parsed are considered for the sum.

    How about
    Code:
    sum += (parseFloat(inputs[i].value) || 0) * (curID.substr(curID.length-6) == "_price" ? 1 : 0);

  6. #6
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works great, something must not be set as a float.

    Is there anyway on the output I can force a float to have 2 decimal places?

    in PHP I would use %.2f, what is the javascript equivelant?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    document.getElementById('parts_total').value = sum.toFixed(2);
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers Stephen
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  9. #9
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just found another problem.
    When I reload the form all the values are blank (obviously because they are on the onchange handler, is there any way I can parse the document for all onchange events and run them?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The best technique is to assign the onchange events from javascript, so that when you assign them you can also activate them at the same time.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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