# Thread: Rounding Numbers Up/Down in Form Fields

1. Registered User
Join Date
Apr 2009
Posts
371

## Rounding Numbers Up/Down in Form Fields

I've got a weird situation where people have to select a quantity but it can only be in increments of 25. Instead of having a drop down box of 25, 50, 100, etc..., I wanted to have a basic text field where someone can input a number and it'll automatically round it up or down to the nearest 25.

Is this possible? Does anyone have any idea on how to do it?

2. Originally Posted by Ntrimgs
I've got a weird situation where people have to select a quantity but it can only be in increments of 25. Instead of having a drop down box of 25, 50, 100, etc..., I wanted to have a basic text field where someone can input a number and it'll automatically round it up or down to the nearest 25.

Is this possible? Does anyone have any idea on how to do it?
I started to suggest the modulus operator, but then found this:
PHP Code:
``` //found on adminzone.com function round_nearest(\$no,\$near)  {      return round(\$no/\$near)*\$near;  }  echo round_nearest(44,6);  //prints: 42  echo round_nearest(45,6);  //prints: 48  echo round_nearest(46,6);  //prints: 48  ```

3. Registered User
Join Date
Apr 2009
Posts
371
How would I have that dynamically update in the text field after someone types the number in?

Code:
`<input type="text" onchange="this.value = Math.max(Math.round(parseInt(0 + this.value, 10) / 25) * 25, 25);" value="25" />`
The red number is the minimum amount that you can set.

5. Registered User
Join Date
Apr 2009
Posts
371
Wow...that looks like some genius stuff!

I don't know anything about JavaScript which is why I came here, but I'll try it out. I appreciate the input!

6. Registered User
Join Date
Apr 2009
Posts
371
It worked great! Thanks!

Now I may be pushing things but is there a way to make it round to the nearest 25 if the quantity is under 200, and then anything over 200 will be rounded to the nearest 50???

Code:
`<input type="text" onchange="var n = parseInt(0 + this.value, 10); this.value = Math.max(n <= 200 ? Math.round(n / 25) * 25 : Math.round(n / 50) * 50, 25);" value="25" />`
Edit:

Marginally shorter code:

Code:
`<input type="text" onchange="var n = parseInt(0 + this.value, 10), x = n <= 200 ? 25 : 50; this.value = Math.max(Math.round(n / x) * x, 25);" value="25" />`
Last edited by bionoid; 02-07-2012 at 03:17 PM.

8. Registered User
Join Date
Apr 2009
Posts
371
Thanks A lot!! I really appreciate it!!

9. Registered User
Join Date
Apr 2009
Posts
371
Originally Posted by bionoid

Code:
`<input type="text" onchange="var n = parseInt(0 + this.value, 10); this.value = Math.max(n <= 200 ? Math.round(n / 25) * 25 : Math.round(n / 50) * 50, 25);" value="25" />`
Edit:

Marginally shorter code:

Code:
`<input type="text" onchange="var n = parseInt(0 + this.value, 10), x = n <= 200 ? 25 : 50; this.value = Math.max(Math.round(n / x) * x, 25);" value="25" />`

I've got one last question.....how would I send that quantity value to a JavaScript/AJAX style script. I have always just done stuff like this:

HTML Code:
`<input type="radio" name="agree" value="yes" onclick="itemSelect(this.value)" />`
So basically I apply an onclick event handler and call the name of the script, but how do I do this with this type of function?

10. You want to call a function when the value of your quantity has changed?

11. Registered User
Join Date
Apr 2009
Posts
371
When someone hits submit I want to be able to pass that value into a function. Here's the code I have:

HTML Code:
```Select Quantity:<br />
<input type="text" onchange="var n = parseInt(0 + this.value, 10); this.value = Math.max(n <= 49 ? Math.round(n / 12) * 12 : Math.round(n / 50) * 50, 12);" value="12" />

<input type="submit" name="submit" value="Submit">```

12. If there is a <form> involved:

Code:
```<script type="text/javascript">

function processForm(form)
{
}

</script>

<form onsubmit="processForm(this); return false;">
<input name="quantity" type="text" onchange="var n = parseInt(0 + this.value, 10); this.value = Math.max(n <= 49 ? Math.round(n / 12) * 12 : Math.round(n / 50) * 50, 12);" value="12" />
<input type="submit" name="submit" value="Submit" />
</form>```
... if not ...

Code:
```<script type="text/javascript">

function processForm()
{
}

</script>

<input id="quantity" type="text" onchange="var n = parseInt(0 + this.value, 10); this.value = Math.max(n <= 49 ? Math.round(n / 12) * 12 : Math.round(n / 50) * 50, 12);" value="12" />
<input type="button" value="Submit" onclick="processForm();" />```

13. Registered User
Join Date
Apr 2009
Posts
371
Would it make a difference if a form is involved or not? I just don't want a page refresh and would rather trigger an AJAX function that would display options beneath the quantity input - all of which would be based on the quantity input. For instance if a quantity of 12 was input, then options A, B and C would display.

14. As you had specified a "submit" button, I assumed there could be a form present as well as they normally go together, in that case you could refer to your inputbox by name and send it off using ajax.

The second example was to show an alternate method of retrieving the inputboxes value within the hypothetical ajax function "processForm".

If you created the inputbox using DOM methods such as document.createElement, then you could refer to the object reference that is passed to you.

It just depends on the code you have written already and how that value fits within it.

15. I appologize, I replied with PHP when you posted in the javascript forum. Glad you're getting the JS replies now.