abnormal IF clause statement behavior...

[georgbader]

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

<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;
    }
}

[georgbader]

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

[guido2004]

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.

[georgbader]

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!

[guido2004]

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?

[georgbader]

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?

[georgbader]

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

[guido2004]

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).

[paul_wilkins]

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:

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);

[georgbader]

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