SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    abnormal IF clause statement behavior...

    Dear all,

    i am having a very small input form where the user is inputting the start time and the end time and then clicking on submit. The problem is that when I try to validate the form with onsubmit="return validate_timesheet()" the values that i want to validate (start & end time) are transferred right to the form (when I alert the values they are fine) but when I compare them (checking if start time is smaller then end time) the if clause is not working right. I have put a small fiddle together on

    jsfiddle.net/swaSk/11

    Can anybody help me here?

    All the best and many thanks
    Georg

    Here also the code just in case:

    HTML
    Code:
    <form name="timesheet_office1" onsubmit="return validate_timesheet()">
     <select class="normal" name="time_arrival_customer_hrs">
    
                          <option value='0'>0</option>
    
                          <option value='1'>1</option>
    
                          <option value='2'>2</option>
    
                          <option value='3'>3</option>
    
                          <option value='4'>4</option>
    
                          <option value='5'>5</option>
    
                          <option value='6'>6</option>
    
                          <option value='7'>7</option>
    
                          <option value='8'>8</option>
    
                          <option value='9' selected="selected">9</option>
    
                          <option value='10'>10</option>
    
                          <option value='11'>11</option>
    
                          <option value='12'>12</option>
    
                          <option value='13'>13</option>
    
                          <option value='14'>14</option>
    
                          <option value='15'>15</option>
    
                          <option value='16'>16</option>
    
                          <option value='17'>17</option>
    
                          <option value='18'>18</option>
    
                          <option value='19'>19</option>
    
                          <option value='20'>20</option>
    
                          <option value='21'>21</option>
    
                          <option value='22'>22</option>
    
                          <option value='23'>23</option>
    
                        </select>
    
                        <select class="normal" name="time_arrival_customer_min">
    
                          <option value='00'>00</option>
    
                          <option value='15'>15</option>
    
                          <option value='30' selected="selected">30</option>
    
                          <option value='45'>45</option>
    
                        </select>
    
        <select class="normal" name="time_departure_customer_hrs">
    
                          <option value='0'>0</option>
    
                          <option value='1'>1</option>
    
                          <option value='2'>2</option>
    
                          <option value='3'>3</option>
    
                          <option value='4'>4</option>
    
                          <option value='5'>5</option>
    
                          <option value='6'>6</option>
    
                          <option value='7'>7</option>
    
                          <option value='8'>8</option>
    
                          <option value='9'>9</option>
    
                          <option value='10'>10</option>
    
                          <option value='11'>11</option>
    
                          <option value='12'>12</option>
    
                          <option value='13'>13</option>
    
                          <option value='14'>14</option>
    
                          <option value='15'>15</option>
    
                          <option value='16'>16</option>
    
                          <option value='17' selected="selected">17</option>
    
                          <option value='18'>18</option>
    
                          <option value='19'>19</option>
    
                          <option value='20'>20</option>
    
                          <option value='21'>21</option>
    
                          <option value='22'>22</option>
    
                          <option value='23'>23</option>
    
                        </select>
    
                        <select class="normal" name="time_departure_customer_min">
    
                          <option value='00'>00</option>
    
                          <option value='15'>15</option>
    
                          <option value='30' selected="selected">30</option>
    
                          <option value='45'>45</option>
    
                        </select>
    
    <input type="submit" value="submit">
    </form>
    
    
    JAVASCRIPT
    
    function validate_timesheet()
    {
    var arrival_customer_hrs=document.forms["timesheet_office1"]["time_arrival_customer_hrs"].value;
    var arrival_customer_min=document.forms["timesheet_office1"]["time_arrival_customer_min"].value;
    
    var departure_customer_hrs=document.forms["timesheet_office1"]["time_departure_customer_hrs"].value;
    var departure_customer_min=document.forms["timesheet_office1"]["time_departure_customer_min"].value;
    
        if (arrival_customer_hrs > departure_customer_hrs){
          alert ("The arrival time is bigger than the departure time");
          return false;
        }
        if (arrival_customer_hrs == departure_customer_hrs && arrival_customer_min > departure_customer_min){
          alert ("Arrival time (min) is bigger than the departure time");
        return false;
        }
    }

  2. #2
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    abnormal IF clause statement behavior...

    Dear all,

    i am trying to validate inputs from the user.

    Basically the user is just submitting in a form an start time and an end time and then I validate it with onsubmit="return validate_timesheet()".

    The function is looking like this

    function validate_timesheet()
    {
    var arrival_customer_hrs=document.forms["timesheet_office1"]["time_arrival_customer_hrs"].value;
    var arrival_customer_min=document.forms["timesheet_office1"]["time_arrival_customer_min"].value;
    var departure_customer_hrs=document.forms["timesheet_office1"]["time_departure_customer_hrs"].value;
    var departure_customer_min=document.forms["timesheet_office1"]["time_departure_customer_min"].value;

    if (arrival_customer_hrs > departure_customer_hrs){
    alert ("The arrival time (hrs) is bigger than the departure time");
    return false;
    }
    if (arrival_customer_hrs == departure_customer_hrs && arrival_customer_min > departure_customer_min){
    alert ("Arrival time (min) is bigger than the departure time");
    return false;
    }
    }

    The problem is that the validation of the start and end time is not working (the if clause). If I alert out the values for start and end time (the vars) they are coming out just fine.... I put together a very undercomplex fiddle on jsfiddle DOT net FORWARDSLAH swaSk FORWARDSLAH 11 where the same problemenativ behavior is present. Thanks for any help already in advance! Georg

  3. #3
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,495
    Mentioned
    161 Post(s)
    Tagged
    4 Thread(s)
    What are the start and end times you're testing with?
    What is the result you're getting with them?
    What is the result you want to get with them?

    Off Topic:

    posts merged. Don't make multiple posts about the same problem please.
    Last edited by guido2004; Jan 16, 2012 at 10:51. Reason: posts merged

  4. #4
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Guido 2004,

    I am testing with 9 hour 30 min (start time) 17 hour 30 min (end time).

    Off topic: I am sorry about that! thought that the first entry did not go through!

  5. #5
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,495
    Mentioned
    161 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by georgbader View Post
    Dear Guido 2004,

    I am testing with 9 hour 30 min (start time) 17 hour 30 min (end time).

    Off topic: I am sorry about that! thought that the first entry did not go through!
    No prob

    So what happens with 9.30 and 17.30? What alert are you getting?

  6. #6
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am getting no error... It is just always going in the if clause

    if (arrival_customer_hrs > departure_customer_hrs){
    alert ("The arrival time (hrs) is bigger than the departure time");
    return false;
    }

    evenou though arrival_customer_hrs (9) is not bigger than departure_customer_hrs (17)... Did you see the jsfiddle.net/swaSk/11 which I did setup?

  7. #7
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am getting no error message... DId you see the jsfiddle? I posted it before. The problem is that always when I include the JSfiddle Link in my message is not seen unless a moderator approves it... It is on

    jsfiddle DOT net FORWARDSLASH swaSk FORWARDSLASH 11

  8. #8
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,495
    Mentioned
    161 Post(s)
    Tagged
    4 Thread(s)
    No I didn't look at the fiddle. No idea how that works

    I guess those variables are strings, that would explain why '9' is bigger than '17'. Maybe you have to cast them into integers (I'm just thinking out loud, I don't use JS enough to know these things by heart).

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Yes, that is definitely the problem, that the form values are as strings, which means you are performing a string comparison.

    You can deal with that by turning the strings in to numbers.

    One way of doing that is with the parseInt() function, but that can get messy when you're always putting in the radix number too.
    var number = parseInt(string, 10)

    So, a preferred way is to use Number() instead, which casts the value to a number.
    var number = Number(string)

    I'm extracted out the form reference to a separate variable, to help simplify your code, which results in this for the appropriate part of your jsfiddle code:

    Code javascript:
    var form = document.forms.timesheet_office1,
        arrival_customer_hrs = Number(form.time_arrival_customer_hrs.value),
        arrival_customer_min = Number(form.time_arrival_customer_min.value),
        departure_customer_hrs = Number(form.time_departure_customer_hrs.value),
        departure_customer_min = Number(form.time_departure_customer_min.value);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    worked!

    thanks guys! That worked perfectly! I converted the string to a number

    var arrival_customer_hrs=document.forms["timesheet_office1"]["time_arrival_customer_hrs"].value;
    arrival_customer_hrs = Number(arrival_customer_hrs);

    and that works


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
  •