Can't select value of GetElementByName with custom jQuery form dropdown validation

Question

I'm using the jQuery Validation plugin and trying to validate two time fields. I want to make sure that if "All" is selected for one field that it is true for the other and and end time is larger than start time

Here is the HTML:

 <form id="schedule">
 <select name='start_hour' id='start_hour'>
    <option value='All00'>All</option>
    <option value='0000'>00</option>
    <option value='0100'>01</option>
    <option value='0200'>02</option>
    <option value='0300'>03</option>...
</select>
 and 
<select name='end_hour' id='end_hour'>
    <option value='All00'>All</option>
    <option value='0000'>00</option>
    <option value='0100'>01</option>
    <option value='0200'>02</option>
    <option value='0300'>03</option>...
</select>
 </form> 

Here is the custom rule:

 jQuery.validator.addMethod(  "schedule", function(value, element) { 

    var start_hour = document.getElementsByName("start_hour");
    var end_hour = document.getElementsByName("end_hour");

    alert(start_hour.value);
    alert(end_hour.value);
    if (start_hour.value == "All00" && end_hour.value !="All00") 
    { 
        alert('end hour all error')
        return false;
          }
        else if (end_hour.value == "All00" && start_hour.value !="All00") 
    { 
        alert('start hour all error')
        return false;
          }
          else if (end_hour.value <= start_hour.value ){
              alert('end hour must be larger error')
        return false;
          }

    else return true; 
  },  "Error with schedule");

for some reason alert(start_hour.value); returns "undefined" I also tried to use getElementbyID and that failed too. I'm really new to Javascript so I know it's probally something simple.

JsFiddle Here

Answer 1

You do not need to use getElementsByName with jQuery Try this instead, jQuery Attribute Selector

$('select[name="start_hour"]')

or since you seem to have the id the same as the name you can use this selector instead

$('select#start_hour')

Your Validator Method should be constructed like this

 jQuery.validator.addMethod(  "schedule", function(value, element) { 
    var start_hour = $('select#start_hour');
    var end_hour = $('select#end_hour');

    alert(start_hour.val());
    alert(end_hour.val());

    if (start_hour.val() == "All00" && end_hour.val() !="All00") { 
        alert('end hour all error')
        return false;
    }
    else if (end_hour.val() == "All00" && start_hour.val() !="All00") { 
        alert('start hour all error')
        return false;
    }
    else if (end_hour.val() <= start_hour.val() ) {
        alert('end hour must be larger error')
        return false;
    }
    else return true; 
  },  "Error with schedule");

Answer 2

getElementsByName returns an array, even if there's only one result, so you need to specify that you want the first one.

var start_hour = document.getElementsByName("start_hour")[0];
var end_hour = document.getElementsByName("end_hour")[0];

Answer 3

You can also use jQuery's ID selector '#'

The following also works:

var start_hour = $("#start_hour");
var end_hour = $("#end_hour");

alert(start_hour.val());
alert(end_hour.val());

Answer 4

getElementsByName (note the "s") returns an array so you would have to reference the start value via: start_hour[0].value . Bu i agree with John you should definatly use the jquery selector.