www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: Rounding Numbers Up/Down in Form Fields

  1. #1
    Join Date
    Apr 2009
    Posts
    346

    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. #2
    Join Date
    Oct 2007
    Posts
    366
    Quote Originally Posted by Ntrimgs View Post
    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. #3
    Join Date
    Apr 2009
    Posts
    346
    How would I have that dynamically update in the text field after someone types the number in?

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    779
    How about this:

    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.
    JavaScript: Learn | Validate | Compact

  5. #5
    Join Date
    Apr 2009
    Posts
    346
    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. #6
    Join Date
    Apr 2009
    Posts
    346
    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???

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    779
    How about:

    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.
    JavaScript: Learn | Validate | Compact

  8. #8
    Join Date
    Apr 2009
    Posts
    346
    Thanks A lot!! I really appreciate it!!

  9. #9
    Join Date
    Apr 2009
    Posts
    346
    Quote Originally Posted by bionoid View Post
    How about:

    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. #10
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    779
    You want to call a function when the value of your quantity has changed?
    JavaScript: Learn | Validate | Compact

  11. #11
    Join Date
    Apr 2009
    Posts
    346
    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. #12
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    779
    If there is a <form> involved:

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

    Code:
    <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();" />
    JavaScript: Learn | Validate | Compact

  13. #13
    Join Date
    Apr 2009
    Posts
    346
    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. #14
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    779
    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.
    JavaScript: Learn | Validate | Compact

  15. #15
    Join Date
    Oct 2007
    Posts
    366
    I appologize, I replied with PHP when you posted in the javascript forum. Glad you're getting the JS replies now.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles