Multiple select boxes

ldsmike88 · March 8, 2006

I hate it when people post their whole code and want an answer to all their problems... but I don't know what is wrong with it so here it is:[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" >
//////////////////////////////////////////////////
//                    Model                        //
//////////////////////////////////////////////////
function addModel(text, selectValue){
    var form = window.document.makeModelYearForm;
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = selectValue;
    form.Model.options.add(optn);
    if(selectValue == "none"){
        form.Model.disabled=true;
        form.Search.disabled=true;
    } else {
        form.Model.disabled=false;
    }
    form.Year.disabled=true;
    form.Search.disabled=true;
}

function addOption_list(make){
    if(make == 'none'){var model = new Array("none");}
    if(make == 'Audi'){var model = new Array("A6");}
    if(make == 'Buick'){var model = new Array("Century", "Lacrosse", "Lesabre", "Lucerne", "Park Avenue");}
    if(make == 'Cadillac'){var model = new Array("Escalade");}
    if(make == 'Chrysler'){var model = new Array("300","300C","PT Cruiser");}
    for (var i=0; i < model.length;++i){
        addModel(model[i], model[i]);
    }
}
function removeAllOptions(){
    var i;
    for(i=window.document.makeModelYearForm.Model.options.length-1;i>=0;i--){
        window.document.makeModelYearForm.Model.remove(i);
    }
    var optn = document.createElement("OPTION");
    optn.text = "Select a model";
    optn.value = "none";
    window.document.makeModelYearForm.Model.options.add(optn);
}
//////////////////////////////////////////////////
//                    Year                        //
//////////////////////////////////////////////////
function addYear(text, selectValue){
    var form = window.document.makeModelYearForm;
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = selectValue;
    form.Year.options.add(optn);
    if(selectValue == "none"){
        form.Year.disabled=true;
        form.Search.disabled=true;
    } else {
        form.Year.disabled=false;
    }
}

function addYearList(model){
    if(model == 'none'){var year = new Array("none");}
//Audi
    if(model == 'A6'){var year = new Array("2005", "2006");}
//Buick
    if(model == 'Century'){var year = new Array("1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004");}
    if(model == 'Lacrosse'){var year = new Array("2005", "2006");}
    if(model == 'Lesabre'){var year = new Array("2000", "2001", "2002", "2003", "2004", "2005");}
    if(model == 'Lucerne'){var year = new Array("2006");}
    if(model == 'Park Avenue'){var year = new Array("1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005");}
//Cadillac
    if(model == 'Escalade'){var year = new Array("2005");}
//Chrysler
    if(model == '300'){var year = new Array("2005", "2006");}
    if(model == '300C'){var year = new Array("2005", "2006");}
    if(model == 'PT Cruiser'){var year = new Array("2006");}
    for (var i=0; i < year.length;++i){
        addYear(year[i], year[i]);
    }
}
function removeAllYearOptions(){
    var i;
    for(i=window.document.makeModelYearForm.Year.options.length-1;i>=0;i--){
        window.document.makeModelYearForm.Year.remove(i);
    }
    var optn = document.createElement("OPTION");
    optn.text = "Select a year";
    optn.value = "none"
    window.document.makeModelYearForm.Year.options.add(optn);
}
//////////////////////////////////////////////////
//                    Button                        //
//////////////////////////////////////////////////
function showButton(value){
    if(value == "none"){
        window.document.makeModelYearForm.Search.disabled=true;
    } else {
        window.document.makeModelYearForm.Search.disabled=false;
    }
}
</script>
</head>

<body>
<form name="makeModelYearForm" action="list.php" method="post" >

<SELECT id="form" name="make" onChange="removeAllOptions();removeAllYearOptions();addOption_list(this.value);">
    <OPTION value="none" selected>Select a make</OPTION>
    <OPTION value="Audi">Audi</OPTION>
    <OPTION value="Buick">Buick</OPTION>
    <OPTION value="Cadillac">Cadillac</OPTION>
    <OPTION value="Chrysler">Chrysler</OPTION>
</SELECT>

<SELECT name="Model" disabled="disabled" onchange="removeAllYearOptions();addYearList(this.value);">
    <Option value="none" selected>Select a model</option>
</SELECT>
<SELECT name="Year" disabled="disabled" onchange="showButton(this.value)">
    <Option value="none" selected>Select a year</option>
</SELECT>
<INPUT type="submit" class="button" value="Search" name="Search" disabled="disabled">
</form>

</body>
</html>[/code]

Everything works fine, but when I click on submit and go to the next page, the only variable sent from the form is the make... no model and no year. Why arn't the others being send? Thanks!

Mike

ldsmike88 · March 8, 2006

Well that was stupid... I already had this script working but in a little different way. My list.php was looking for the variables model and year not Model and Year... so I just changed them to lower case in my javascript and select boxes and it all works great now.

Mike

Sign In

Multiple select boxes

Recommended Posts

ldsmike88

Link to comment

Share on other sites

ldsmike88

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information