Question

I have the following form:

<select name="size">
    <option value="">Please Select</option>
    <option value="1">Medium</option>
    <option value="2">Large</option>
</select>
<select name="material">
    <option value="">Please Select</option>
    <option value="9">Wood</option>
    <option value="8">Metal</option>
</select>   
<input type="submit" value="submit">

I would like some help creating some javascript, when the above form is submitted the form is verified that values have been selected, and successfully gets submitted. If values have not been selected an alert popups saying either of the following:

1. “Size needs to be selected and material needs to be selected”,
2. “Size needs to be selected”,
   or
3. “Material needs to be selected”

Thanks

Answer 1

$("form").submit(function(){
    if ($("#size").val() == "" && $("#material").val() == "") { alert("Size and material  needs to be selected"); return false; }
    elseif ($("#size").val() == "") { alert("Size needs to be selected"); return false; }
    elseif ($("#material").val() == "") { alert("Material needs to be selected"); return false;}
    $(this).submit();
});