SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot Gman's Avatar
    Join Date
    Jan 2002
    Location
    Sarasota, FL
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    subtracting value from two text boxes and...

    Hey all,
    I neeed to subtract values from two text boxes and then show the difference into a html label.

    textbox 1 = 10
    textbox 2 = 5

    label = 5

    Basically I need to enter times, like 10:00 and 12:00 and it calculate that the difference was 2 hours.

    Javascript is a big weaknees of mine (duh), even with my 3 books LOL


    any tips on where to look for this or can point me into the direction? Ive tried google, but it only brings up time date differences Thanks for any help.

  2. #2
    SitePoint Member robbin.joe's Avatar
    Join Date
    Oct 2009
    Location
    Beijing, China
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    parseInt('12:00') and then try to use math operation

  3. #3
    SitePoint Zealot Gman's Avatar
    Join Date
    Jan 2002
    Location
    Sarasota, FL
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok ill look into that.

    How would I go about outputing the result to a label for the webpage once they enter both values?

    thanks!

  4. #4
    SitePoint Member robbin.joe's Avatar
    Join Date
    Oct 2009
    Location
    Beijing, China
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to place a element named 'ID' in advance, then

    document.getElementById('ID').innerHTML = xxxx

  5. #5
    SitePoint Zealot Gman's Avatar
    Join Date
    Jan 2002
    Location
    Sarasota, FL
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahh, much thanks!

  6. #6
    SitePoint Zealot Gman's Avatar
    Join Date
    Jan 2002
    Location
    Sarasota, FL
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm, what am I doing wrong here?

    Code JavaScript:
    <script type="text/javascript">
    function calculate_time() {
    var hour_start = document.getElementById(parseInt('hour_start'));
    var hour_end = document.getElementById(parseInt('hour_end'));
    var hour_total = hour_end - hour_start;
     
    document.getElementById('hour_total').innerHTML = hour_total;
    }
    </script>

    </head>
    <body>
    <form name ="calculate" action="#">
    <div>
    <p>Start Hour: </label><input type="text" name="hour_start" id="hour_start" /></p>
    <p>End Hour: </label><input type="text" name="hour_end" id="hour_end" /></p>
    <p><label for="hour_totals" id="hour_total"></label></p>
    <p><input type="button" name="submit" value="Calculate Time" onclick="calculate_time()" /></p>
    </div>
    </form>


    it just outputs 0 lol

  7. #7
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This would be more accurate:
    Code javascript:
        var hour_start = parseInt(document.getElementById('hour_start').value);

    You want to get the value of the field first {document.getElementById('hour_start').value} and then parse it as an integer. Remember, when it comes to javascript, any nested functions or methods take place before their enclosing functions or methods, so work from the innermost parentheses outward.
    Hope this helps.
    Edit:

    I was going to leave off mention of the two missing <label> tags in your code, but decided to mention it anyway. So... er... You're missing two label tags in your code...
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  8. #8
    SitePoint Zealot Gman's Avatar
    Join Date
    Jan 2002
    Location
    Sarasota, FL
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much!

    It now works....

  9. #9
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dave Morton View Post
    This would be more accurate:
    Code javascript:
        var hour_start = parseInt(document.getElementById('hour_start').value);

    You want to get the value of the field first {document.getElementById('hour_start').value} and then parse it as an integer. Remember, when it comes to javascript, any nested functions or methods take place before their enclosing functions or methods, so work from the innermost parentheses outward.
    Hope this helps.
    Edit:

    I was going to leave off mention of the two missing <label> tags in your code, but decided to mention it anyway. So... er... You're missing two label tags in your code...
    Does anyone have a working example of this yet? I would be interested as well on knowing how t is would be developed Sounds like basic math with variables as the time. I believe if you want your label to have a number you would have to get the element by the ID. (Not sure)
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  10. #10
    SitePoint Zealot Gman's Avatar
    Join Date
    Jan 2002
    Location
    Sarasota, FL
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, it is working.. sort of lol

    Here is what I have now:
    Code JavaScript:
    <script language="javascript" type="text/javascript">
    <!--
    function calculate_time(hour_start, hour_end) {
    var hour_start = parseInt(document.getElementById('hour_start').value);
    var hour_end   = parseInt(document.getElementById('hour_end').value); 
    var hour_total = hour_end - hour_start;
     
    document.getElementById('hour_total').innerHTML = hour_total
    }
    // -->
    </script>

    Code HTML4Strict:
    </head>
    <body>
    <form name ="calculate" action="#"> 
    <div> 
    <p><label for="hour_start">Start Hour: </label><input type="text" name="hour_start" id="hour_start" /></p>
    <p><label for="hour_end">End Hour: </label><input type="text" name="hour_end" id="hour_end" /></p>
    <p><label for="hour_totals" id="hour_total"></label></p>
    <p><input type="button" value="Calculate Time" onclick="calculate_time(this.form.hour_start.value, this.form.hour_end.value)" /></p>
    </div> 
    </form>
    </body>
    </html>

    The output number is semi correct, if I put 4:00 and 6:00 it gives -2....

    How can I keep the time format so its 2:00 as the result (I will be using military time aka 15:00 for 3:00PM etc...)



    thanks for the help eveyone!

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Military time is hhmm whereas 24-hour time is hh:mm

    A suitable way to accept either 2 or 2:00 is to add the :00 part if needed.
    Then we can take the hour:minutes and create a date from them.

    Code javascript:
    hour_start += Number(hour_start) ? ':00' : '';
    hour_end += Number(hour_end) ? ':00' : '';
    startTime = new Date('1-1-1 ' + hour_start);
    endTime = new Date('1-1-1 ' + hour_end);
    var difference = endTime - startTime;

    The Date object is represented in milliseconds, so allows us to easily work out the time difference.

    Then we convert the time difference from milliseconds to minutes, and work out the number of hours and minutes

    Code javascript:
        difference /= 1000 * 60; // convert to minutes
        var hours = Math.floor(difference / 60);
        var mins = Math.floor(difference &#37; 60);
        document.getElementById('hour_total').innerHTML = showTime(hours, mins);

    Displaying the time means adding an optional 0 to the hour and the minute, so we'll use a separate function for that.

    Code javascript:
    function showTime(hours, minutes) {
        return ((hours < 10) ? '0' : '') + hours +
            ':' +
            ((minutes < 10) ? '0' : '') + minutes;
    }

    This example code also moves the onclick event out of the HTML code and into where it should be as a part of the scripting behaviour.

    The form should not have a name attribute. It has meaning on elements within the form, but on the form itself it has no impact on how the form is used. Instead, an identifier has been used on the form as is advised by best practice.

    Additionally, implicit label association means that most of the identifiers within the form are able to be tidied up.

    Here is the full code:

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Time difference</title>
    </head>
    <body>
    <form id="calculate" action=""> 
    <div> 
        <p><label>Start Hour: <input type="text" name="hour_start" /></label></p>
        <p><label>End Hour: <input type="text" name="hour_end" /></label></p>
        <p id="hour_total"></p>
        <p><input id="calculate_time" type="button" value="Calculate Time" /></p>
    </div> 
    </form>
    <script language="javascript" type="text/javascript">
    function showTime(hours, minutes) {
        return ((hours < 10) ? '0' : '') + hours +
            ':' +
            ((minutes < 10) ? '0' : '') + minutes;
    }
    function calculate_time(hour_start, hour_end) {
        startTime = new Date('1-1-1 ' + hour_start);
        endTime = new Date('1-1-1 ' + hour_end);
     
        var difference = endTime - startTime;
        difference /= 1000 * 60; // convert to minutes
        var hours = Math.floor(difference / 60);
        var mins = Math.floor(difference % 60);
        document.getElementById('hour_total').innerHTML = showTime(hours, mins);
    }
    document.getElementById('calculate_time').onclick = function () {
        var start = this.form.elements.hour_start.value;
        var end = this.form.elements.hour_end.value;
        calculate_time(start, end);
    };
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Zealot Gman's Avatar
    Join Date
    Jan 2002
    Location
    Sarasota, FL
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow... thank you so much, works great!

    Can I bother you for one more thing? Is it possible to use onblur for the End Hour, so after they leave that field it runs the code instead of click the submit button? I tried adding onblur and changing some code, but it kept giving me NaN:NaN lol

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    This is the part that needs to be updated:

    Code javascript:
    document.getElementById('calculate_time').onclick = function () {
        ...
    };

    Because we are wanting more than one event to call the function, so the first update is to make it a named function and attach it to each event.

    The second update involves attaching it to the blur event of the end hour element.

    Here is the updated code:
    Code javascript:
    function calculateTimeEvent() {
        ...
    };
     
    var form = document.getElementById('calculate');
    var endHour = form.elements.hour_end;
    var calculateButton = document.getElementById('calculate_time');
     
    endHour.onblur = calculateTimeEvent;
    calculateButton.onclick = calculateTimeEvent;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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