0

Thanks in advance for any help...

I'm trying to (1) generate a begin time and end time for a form, (2) find the difference between the two, and (3) add the difference to a new input.

Here's what I have so far:

<a href="#" id="starttime">Begin time</a>
<input id="starttimeinput" name="starttimeinput" type="text" value="">
<script>
    $("#starttime").click(function () {
         var begintime = event.timeStamp;
         $("#starttimeinput").val(begintime);
    });
</script>
<a href="#" id="endtime">end time</a>
<input id="endtimeinput" name="endtimeinput" type="text" value="">
<script>
    $("#endtime").click(function () {
         var endtime = event.timeStamp;
         $("#endtimeinput").val(endtime);
    });
</script>
<input id="totaltime" name="totaltime" type="text">
<script>
    $("#totaltime").focus(function () {
       var begintime = $("#starttimeinput").val();
       var endtime = $("#endtimeinput").val();
       var totaltime = endtime - begintime;
       $("#totaltime").val(totaltime); 
     });     
</script>

The first part works (entering the timestamps into the beginning time and end time inputs). I've never worked with numbers before and can't figure out the second part. The result that comes up is "NaN".

Also this might be useful to know the the time between when the links are clicked should be around 30 seconds...

Thanks much for any help you guys have answered so many questions of mine without me having to post!

2
  • Check this api.jquery.com/event.timeStamp
    – gsk
    Feb 8, 2011 at 5:02
  • 2
    The first part don't work for me and even generating a error. last input gets 0, though. And if I add event param to click callback functions, everything works just as you described.
    – kirilloid
    Feb 8, 2011 at 5:06

1 Answer 1

0

You need to parseInt() the times back out, otherwise they're just strings (as returned by .val()).

$("#totaltime").focus(function () {
    var begintime = parseInt($("#starttimeinput").val(), 10),
        endtime = parseInt($("#endtimeinput").val(), 10),
        totaltime = endtime - begintime;
    $("#totaltime").val(totaltime); 
 });

Personally, I'd sooner just store the begintime and endtime values myself, rather than in text inputs (why does the user need to see them, anyway?). Like this:

var begintime,
    endtime;
$("#starttime").click(function (event) {
     begintime = event.timeStamp;
     //$("#starttimeinput").val(begintime);
});

$("#endtime").click(function (event) {
     endtime = event.timeStamp;
     //$("#endtimeinput").val(endtime);
});

$("#totaltime").focus(function () {
    $("#totaltime").val(endtime - begintime); 
});

On a side note, I would recommend moving your jQuery code out of inline <script> tags and into an external JS file. This makes for more maintainable markup and JS. Just wrap all of your JS code in a document ready handler:

$(document).ready(function () {
    /* your code here */
});

or, more concisely,

$(function () {
    /* your code here */
});
8
  • Thanks for answering, but unfortunately when I focus, instead of returning NaN it doesn't show anything... Feb 8, 2011 at 5:07
  • @Andy: see my edit. It looks like you (and consequently, I) omitted the event callback parameter event.
    – Matt Ball
    Feb 8, 2011 at 5:12
  • 1
    I believe the minus operation automatically converts strings to numbers.
    – David Tang
    Feb 8, 2011 at 5:15
  • Alright... this is what I was looking for thanks a bunch you're a champion. Feb 8, 2011 at 5:18
  • @Box9: you are correct, but I can't see a good reason to use type coercion over true parsing in this case. I am wondering, then, why the OP saw NaN...
    – Matt Ball
    Feb 8, 2011 at 5:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.