Rounding Numbers Up/Down in Form Fields

[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?

[TecBrat]

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:

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

[Ntrimgs]

How would I have that dynamically update in the text field after someone types the number in?

[bionoid]

How about this:

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

[Ntrimgs]

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!

[Ntrimgs]

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

[bionoid]

How about:

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

<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" />

[Ntrimgs]

Thanks A lot!! I really appreciate it!!

[Ntrimgs]

How about:

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

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

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

[bionoid]

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

[Ntrimgs]

When someone hits submit I want to be able to pass that value into a function. Here's the code I have:

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

[bionoid]

If there is a <form> involved:

<script type="text/javascript">

	function processForm(form)
	{
		alert(form.quantity.value);
	}

</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 ...

<script type="text/javascript">

	function processForm()
	{
		alert(document.getElementById('quantity').value);
	}

</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();" />

[Ntrimgs]

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.

[bionoid]

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.

[TecBrat]

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