Change event not firing, but seemingly defined?

Question

<select name="category" onChange="SelectSubcategory();" style="width:250px"    class="required"></select>

Sub Category

    <select id="subcategory" name="subcategory" style="width:250px" class="required"></select>

Hi my webpage works apart from one of the drop downs. When I select the category, the subcategory doesn't fire.

function SelectSubcategory(){
// ON selection of category this function should fire
removeAllOptions(document.drop_list.subcategory);
addOption(document.drop_list.subcategory, "", "", "");
if(document.drop_list.category.value =="Hotel"){
addOption(document.drop_list.subcategory, "Room only", "Room only" ) ;
addOption(document.drop_list.subcategory, "Breakfast", "Breakfast" ) ;
addOption(document.drop_list.subcategory, "Breakfast & Evening", "Breakfast & Evening"); 

if(document.drop_list.category.value =="Chalet"){
addOption(document.drop_list.subcategory, "Chalet only", "Chalet only" ) ;
addOption(document.drop_list.subcategory, "Breakfast", "Breakfast" ) ;
addOption(document.drop_list.subcategory, "Breakfast & Carvery", "Breakfast & Carvery");

}

Could anyone suggest a good debugging tool as I am new to coding and web development and find error checking the most time consuming aspect. Many thanks

Answer 1

firebug will most likely help you discover any issues you are having. also, i think your javascript is incorrect. if think you need to use document.getElementByName.

instead of document.drop_list - use document.getElementByName('category') and document.getElementByName('subcategory')

i would modify the function like so (it also looks like you're missing some brackets:

function SelectSubcategory(){
    // ON selection of category this function should fire
    var cetegory = document.getElementByName('category');
    var subcategory= document.getElementByName('subcategory');

    removeAllOptions(subcategory);
    addOption(subcategory, "", "", "");
    if(category.value =="Hotel"){
        addOption(subcategory, "Room only", "Room only" ) ;
        addOption(subcategory, "Breakfast", "Breakfast" ) ;
        addOption(subcategory, "Breakfast & Evening", "Breakfast & Evening"); 
    }
    if(category.value =="Chalet"){
        addOption(subcategory, "Chalet only", "Chalet only" ) ;
        addOption(subcategory, "Breakfast", "Breakfast" ) ;
        addOption(subcategory, "Breakfast & Carvery", "Breakfast & Carvery");    
    }
}

i'd also have to see the addOption and removeAllOptions functions to ensure they are correct.

honestly, this could have been done a lot easier with jquery.