SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    refresh input field on button click

    I have this form where the user can insert a quantity in an input field, and see the total in another input field. It works when you insert the numbers manually and I want it to work with buttons too, but i just can't get it to work.

    Here's the code:

    HTML
    Code HTML4Strict:
    <form id="buyForm" method="post" action="cart.php">
        <label>Choose quantity</label>
        <div>
            <a href="#" class="button">(+)increase</a>        
            <input type="text" id="qty1" name="qty[]"/>
            <a href="#" class="button">(-)decrease</a>
        </div>
        <input type="text" id="cost1"  value="50" style="display:none; visibility:hidden;" name="cost[]" />
        <input type="text" id="price1" name="price[]" />
    </form>

    Js
    Code JavaScript:
    // Calculate
    function calc(idx) {
      var price = parseFloat(document.getElementById("cost"+idx).value)*
                  parseFloat(document.getElementById("qty"+idx).value);
      //  alert(idx+":"+price);  
      document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2);
     
    }
     
    window.onload=function() {
      document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
      document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
    }
     
     
    //Increase/decrease buttons
    $(function() {
     
        $(".button").click(function() {
            var $button = $(this);
            var oldValue = $button.parent().find("input").val();
     
            if ($button.text() == "+") {
              var newVal = parseFloat(oldValue) + 1;
              // AJAX save would go here
            } else {
              // Don't allow decrementing below zero
              if (oldValue >= 1) {
                  var newVal = parseFloat(oldValue) - 1;
                  // AJAX save would go here
              }
            }
            $button.parent().find("input").val(newVal);
        });
     
    });

    Here it is as jsfiddle: http://jsfiddle.net/rcheH/5/

    Can someone please help me with this?

    Thanks in advance!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Get rid of the text type and use a number type instead. That way the user can use the spin buttons. That's the easiest way.

    HTML Code:
    <div>
        <input name="qty[]" id="qty1" type="number" />
    </div>
    You can restrict the numbers to be within a certain range too.

    HTML Code:
    <div>
        <input name="qty[]" id="qty1" type="number" min="1" max="10" />
    </div>
    For details please see http://diveintohtml5.info/forms.html#type-number

    If you want to support older web browsers that don't know how to do number input fields, a polyfill can be found at http://github.com/jonstipe/number-polyfill
    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
  •