Simon
Simon

Reputation: 45

How to eval HTML options with JavaScript?

so i have a form where people select a drop off time and a pick up time from two separate select option drop down menues.

I cannot figure out how to write the javascript if statement that would not let them hire the particular machine for more than 24 hours, i.e if 7am dropp off is select, pickup MUST be 7am.

i.e if(option 7am dropoff) & (pickup = 8am) { err = 0 }

 <td width="248" height="23"><select name="dropoff">


             <option value="07:00am" <?php echo $dropoff=="07:00"?"selected":""?>>07:00am</option>
             <option value="07:30am" <?php echo $dropff=="08:00"?"selected":""?>>07:30am</option>
             <option value="08:00am" <?php echo $dropoff=="09:00"?"selected":""?>>08:00am</option>                      
             <option value="8:30am" <?php echo $dropoff=="10:00"?"selected":""?>>08:30am</option>
             <option value="9:00am" <?php echo $dropoff=="11:00"?"selected":""?>>09:00am</option>
             <option value="09:30am" <?php echo $dropoff=="12:00"?"selected":""?>>09:30am</option>
             <option value="10:00am" <?php echo $dropoff=="12:00"?"selected":""?>>10:00am</option>
             <option value="07:00pm" <?php echo $dropoff=="07:00"?"selected":""?>>07:00pm</option>
             <option value="07:30pm" <?php echo $dropoff=="08:00"?"selected":""?>>07:30pm</option>
             <option value="08:00pm" <?php echo $dropoff=="09:00"?"selected":""?>>08:00pm</option>                      
             <option value="08:30pm" <?php echo $dropoff=="10:00"?"selected":""?>>08:30pm</option>
             <option value="09:00pm" <?php echo $dropoff=="11:00"?"selected":""?>>09:00pm</option>
             <option value="09:30pm" <?php echo $dropoff=="12:00"?"selected":""?>>09:30pm</option>
             <option value="10:00pm"<?php echo $dropoff=="12:00"?"selected":""?>>10:00pm</option>
  </select> 

and

<td width="548" height="23"><select name="pickup">


                 <option value="07:00am" <?php echo $pickup=="07:00"?"selected":""?>>07:00am</option>
                 <option value="07:30am" <?php echo $pickup=="08:00"?"selected":""?>>07:30am</option>
                 <option value="08:00am" <?php echo $pickup=="09:00"?"selected":""?>>08:00am</option>                       
                 <option value="8:30am" <?php echo $pickup=="10:00"?"selected":""?>>08:30am</option>
                 <option value="9:00am" <?php echo $pickup=="11:00"?"selected":""?>>09:00am</option>
                 <option value="09:30am" <?php echo $pickup=="12:00"?"selected":""?>>09:30am</option>
                 <option value="10:00am" <?php echo $pickup=="12:00"?"selected":""?>>10:00am</option>
                 <option value="07:00pm" <?php echo $pickup=="07:00"?"selected":""?>>07:00pm</option>
                 <option value="07:30pm" <?php echo $pickup=="08:00"?"selected":""?>>07:30pm</option>
                 <option value="08:00pm" <?php echo $pickup=="09:00"?"selected":""?>>08:00pm</option>                       
                 <option value="08:30pm" <?php echo $pickup=="10:00"?"selected":""?>>08:30pm</option>
                 <option value="09:00pm" <?php echo $pickup=="11:00"?"selected":""?>>09:00pm</option>
                 <option value="09:30pm" <?php echo $pickup=="12:00"?"selected":""?>>09:30pm</option>
                 <option value="10:00pm"<?php echo $pickup=="12:00"?"selected":""?>>10:00pm</option>
      </select> 

Upvotes: 0

Views: 384

Answers (1)

Yevgeny Simkin
Yevgeny Simkin

Reputation: 28349

If you're sure that the second drop down represents the next day then all you have to do is compare the selectedIndex of the two selects and make sure the second one is <= to the first.

In other words...

sel1 = forms[0].elements["dropoff"].selectedIndex; //drop down 1
sel2 = forms[0].elements["pickup"].selectedIndex; //drop down 2 

if(sel2 > sel1){
   //you are asking for more than 24 hours
}

However, as I said in my comment, what happens if someone wants dropoff at 7am and pickup at 11am (4 ours later)? Do you also have a date picker to specify?

The easier (and more intuitive approach) would be to set the second drop down for the number of hours and then display the pickup time based on that, like this...

dropDate = new Date( /* set the date here based on the first drop down */);
leaseTime = getHoursFrom2ndDropDown();//this should return 1-24 based on second dropdown value

//add milliseconds for leaseTime to the date for your pickupDate
pickupDate = new Date ( dropDate.getTime() + (1000 * 60 * 60 * leaseTime) ); 

Upvotes: 1

Related Questions