Results 1 to 3 of 3

Thread: [-] [+] button controlled numeric textbox with variable increments

  1. #1
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default [-] [+] button controlled numeric textbox with variable increments

    Hello all,

    Im a PHP/MySQL web designer with an admittedly very weak JS skillset. But I do have an element on a form that I would like JS to help me control, but I cant seem to get it right even after painfully searching multiple forums for a solution. Any help with this would be greatly appreciated.

    I found a script that was basic enough to understand and worked nicely. The problem I have at hand is that this script only allowed the quantity to be bumped by one in either direction. I need to have the functionality of increments to adjust the quantity by.

    So basically, I would pull from the database a particular serving size, and I would like the textbox to start at that increment number, as well as increase and secrease as the -/+ buttons are pressed.

    To clarify by example: if the serving size pulled from the database is 4, the textbox would start with 4, by clicking the [+] button will bring it to 8, again to 12, again to 16, etc, whereas clicking the [-] would decrement from 16 to 12 to 8, etc, but not allow it to hit zero.

    Here is the code that works for an increment of one and only one. And again, it works great.

    Code:
    <html>
    <head>
    <title> </title>
    <script type="text/javascript">
    function subtractQty(){
    if(document.getElementById("qty").value - 1 < 0)
    return;
    else
    document.getElementById("qty").value--;
    }
    </script>
    </head>
    <body>
    <form name="f1">
    <input type='text' name='qty' id='qty' />
    <input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'/>
    <input type='button' name='subtract' onclick='javascript: subtractQty();' value='-'/>
    </form>
    </body>
    </html>
    I tried multiple tweaks to the above code to the best of my JS knowledge, but just ended up breaking the buttons.

    Thanks in advance for any insight on this subject!
    Last edited by partyofone0113; 12-29-2011 at 11:31 PM. Reason: clarity of description

  2. #2
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by partyofone0113 View Post
    To clarify by example: if the serving size pulled from the database is 4, the textbox would start with 4, by clicking the [+] button will bring it to 8, again to 12, again to 16, etc, whereas clicking the [-] would decrement from 16 to 12 to 8, etc, but not allow it to hit zero.
    Code:
    <doctype html>
    <html>
    <head>
    <title>Increment/Decrement</title>
    <script type="text/javascript">
    function incrementButtons( upBtn, downBtn, qtyField )
    {
      var step = parseFloat( qtyField.value ) || 1,
          currentValue = step;
      
      downBtn.onclick = function()
      {
        currentValue = parseFloat( qtyField.value ) || step; 
        qtyField.value = ( currentValue -= Math.min( step, currentValue - step ) );
      }
      
      upBtn.onclick = function()
      {
        currentValue = parseFloat( qtyField.value ) || step;   
        qtyField.value = ( currentValue += step );
      }    
    }
    </script>
    </head>
    <body>
    <form id="f1">
    <input type='text' name='qty' id='qty' value='4' readonly = 'readonly'/>
    <input type='button' name='add' value='+'/>
    <input type='button' name='subtract' value='-'/>
    </form>
    <script type="text/javascript">
    
    with( document.getElementById( 'f1' ) )
      incrementButtons( add, subtract, qty );
    
    </script>
    </body>
    </html>

  3. The Following User Says Thank You to clueful For This Useful Post:

    partyofone0113 (12-30-2011)

  4. #3
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you sooo much Clueful. That is exactly what I was looking to achieve. The sad part is that most of the code is foreign looking to me. I really need a crash course in javascript. But thanks again!!

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
  •