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

**partyofone0113** · 12-29-2011, 11:28 PM

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!

**clueful** · 12-30-2011, 01:56 AM

Originally Posted by partyofone0113

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>

**partyofone0113** · 12-30-2011, 02:27 AM

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!!

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

Thread Tools

Search Thread

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

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

Bookmarks

Bookmarks

Posting Permissions