Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery - Rounding Numbers

    Wizards - I have a challenge!

    I am writing a timecard app. The stipulatioin is all Hours fields can only be whole hours or half hour increments. For example, 1.0 is good, 1.5 is good, 1.2 is bad, 1.9 is bad.

    I would like to have the field automatically change a value of 1.9 to a value of 2.0 (perhaps onKeyUp).

    I would like to have the field automatically change a value of 3.2 to a value of 3.0.

    In a nutshell - only allow whole and half hour values. Otherwise round up OR round down.

    Thanks for any help you can provide. I am successfully using the Pengoworks plugin for calculations - absolutely priceless. If you think modifications can be made to it, plz let me know.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Here you are:-

    Code:
    Enter hours <input type = "text" id = "hours" size = "5" maxlength = "5" onkeyup ="chk()">
    
    <script type = "text/javascript">
    function chk() {
    var val = document.getElementById("hours").value;
    val = val.replace(/[^0-9\.]/gi, "");  // strip all but digits and decimal point
    var valsplit = val.split(".");
    valsplit[0] = parseInt(valsplit[0]);
    
    if (valsplit[1]) {
    valsplit[1] = valsplit[1].replace(/(\d)(.)/, '$1');  // only one digit after decimal point
    
    if (valsplit[1] >5) {
    valsplit[1] = 0;
    valsplit[0] = valsplit[0] +1;
    }
    
    if (valsplit[1] <5) {
    valsplit[1] = 0;
    }
    
    }
    
    var newval = valsplit.join(".");
    if (isNaN(newval)) {newval = ""}
    document.getElementById("hours").value = newval;
    }
    
    </script>
    Quizmaster: Name something a bald man does not have to buy.
    Contestant: A razor.
    Last edited by Philip M; 11-12-2010 at 08:02 AM. Reason: Improvement

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    You can also do it mathematically.
    Code:
    <input name="hours" 
     onchange="this.value = 0.5 * Math.round(parseFloat(this.value)*2);"/>
    This will show "NaN" if the user doesn't enter a valid number, so it doesn't have the protections of Philip's code.

    Hmmm...I guess we could add to that:
    Code:
    <input name="hours" 
     onchange="this.value = 0.5 * Math.round(parseFloat(this.value)*2);
               if (this.value=='NaN') this.value=0;" />
    Yeah, that works.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Old Pedant View Post
    Code:
    <input name="hours" 
     onchange="this.value = 0.5 * Math.round(parseFloat(this.value)*2);
               if (this.value=='NaN') this.value=0;" />
    Yeah, that works.
    Oh no it doesn't! Your script merely rounds to the nearest .5.

    I enter 12.3 and get 12.5, not 12.0 which is what the OP asked for. Likewise I enter 12.7 and get 12.5, not 13.0.

    In any case the OP wanted onkeyup, not onchange.

    With onkeyup I enter 12.9 and get 129.
    Last edited by Philip M; 11-11-2010 at 08:21 PM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    Hmmm...that converts "3.2" to "3". No trailing ".0".

    Okay...if that's important:
    Code:
    <input name="hours" 
     onchange="var n = 0.5 * Math.round(parseFloat(this.value)*2);
               this.value= isNaN(n) ? 0 : n.toFixed(1);" />
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    Ahhh...granted.

    But (a) he said "(perhaps onKeyUp)"

    (b) onkeyup is a bad solution in my never overly humble opinion. What about the person who uses MOUSE ONLY to copy/paste a value into a form field? You will never get an onkeyup event. I'm not fanatic about it, but I very, very seldom use onkeyup in stuff I do.
    Last edited by Old Pedant; 11-11-2010 at 08:19 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    I have to admit I like how your code gets around several possible pitfalls. Very clean.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Philip M (11-11-2010)

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Old Pedant View Post
    Hmmm...that converts "3.2" to "3". No trailing ".0".

    Okay...if that's important:
    Code:
    <input name="hours" 
     onchange="var n = 0.5 * Math.round(parseFloat(this.value)*2);
               this.value= isNaN(n) ? 0 : n.toFixed(1);" />
    Still wrong.
    Enter 2.4 and get 2.5. Enter 2.6 and get 2.5. Suggest you read carefully what the OP wants.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Old Pedant View Post
    Ahhh...granted.

    But (a) he said "(perhaps onKeyUp)"

    (b) onkeyup is a bad solution in my never overly humble opinion. What about the person who uses MOUSE ONLY to copy/paste a value into a form field? You will never get an onkeyup event. I'm not fanatic about it, but I very, very seldom use onkeyup in stuff I do.
    Well, simply make it read

    Enter hours <input type = "text" id = "hours" size = "5" maxlength = "5" onkeyup ="chk()" onchange = "chk()" >

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    Yep. And as I said, yours is pretty nice in the way it handles idiotic entries. I'd still not worry about onkeyup on my own pages, but for anybody who wants to use it, your code is great.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I'd suggest to pass the field reference to make the function reusable with other Hour fields that the original poster has.

    Code:
    <input type="text" id="hours" size="5" maxlength="5" onkeyup="chk(this);" onchange="chk(this);" />
    
    <script type = "text/javascript">
    function chk(objFld) {
      var val = objFld.value;
    
      ....
    
      var newval = valsplit.join(".");
      objFld.value = newval;
    }
    </script>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks Gents

    Now I have to humble myself, reveal my true lack of understanding, and ask for one more favor...

    Why can't I get this function to work?

    <html>
    <head>
    <script type="text/javascript" language="javascript">
    function roundme(myhours){
    var fhours = 0.5 * Math.round(parseFloat(myhours)*2);
    fhours.toFixed(1);
    }
    </script>
    </head>
    <body>
    <form name="form1" id="form1">
    <input name="hours1" onkeyup="roundme(this.value)" value="0.0" size="2" /><br />
    <input name="hours2" onkeyup="roundme(this.value)" value="0.0" size="2" /><br />
    <input name="hours3" onkeyup="roundme(this.value)" value="0.0" size="2" /><br />
    </form>
    </body>
    </html>

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    Ummm....you really should NOT be using my code if you are going to use onkeyup

    As Philip correctly pointed out, it can't handle decimal points correctly.

    But anyway, you are missing the *ASSIGNMENT* of the value back into the form field.
    Code:
    function roundme(myhours){
        var fhours = 0.5 * Math.round(parseFloat(myhours)*2);
        myhours.value = fhours.toFixed(1);
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks Again Wizards

    You managed to come up with a solution within an hour! I have been struggling for days.

    Thanks for the examples (solution).

    -Dave

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    Quote Originally Posted by mickormick View Post
    You managed to come up with a solution within an hour!
    I dunno about Philip, but my solution took about 2 minutes. <grin/>

    (Of course, mine was the much easier one.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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