Disable/Enable dropdown menu onChange

driveflexfuel · Nov 26, 2008

I am not a fan of javascript/ajax so I am hoping someone can help me out. I am offering 500 credits to the first to add enable/disable coding to the following code. When someone selects the year it needs to enable the make and so on.

This is the js file named myjs.js

Code:

var request = false;

try {

  request = new XMLHttpRequest();

} catch (trymicrosoft) {

  try {

    request = new ActiveXObject("Msxml2.XMLHTTP");

  } catch (othermicrosoft) {

    try {

      request = new ActiveXObject("Microsoft.XMLHTTP");

    } catch (failed) {

      request = false;

    }

  }

}





if (!request)

  alert("Error initializing XMLHttpRequest!");



var url = 'kits.php';

var set_year =0;

var sid=null;//dont delete or edit

var selectids = new Array("year","make","model","engine");

function setdata(option,id) 

{

   resetchoose(id);

   sid = id; 

   //alert(sid);

   //alert("test");

   data=getdata(id);

   var t=new Date();

   var url = "product.php?option="+option+"&time="+t.getTime();

   request.open("POST",url, true);

   request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

   request.send(data);

   request.onreadystatechange = updateList;

   

}

function setyear(option,id) 

{
   resetchoose(id);

   sid = id; 

   //alert(sid);

   //data=getdata(id);

   var t=new Date();

   var url = "product.php?option="+option+"&time="+t.getTime();

   request.open("GET",url, true);

   request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

   request.send(null);

   request.onreadystatechange = updateList;

}

setyear('allyear','year');



function send_query()

{

   limit = selectids.length;

   //alert(limit);

   for(var i=0 ; i<limit; i++){

      si = document.getElementById(selectids[i]).selectedIndex;

      if (si==0){

         alert(selectids[i]+' is not selected');

         return false;

      }

   }

}

function getdata(curr)

{

   var data = null;

   var index =0;

   var cs = selectids[index];

   val = document.getElementById(cs).value;

   data = cs + "=" + encodeURIComponent(val);

   if (cs==curr) return data;

   index = index+1;

   while(curr!=selectids[index]){

      

      cs = selectids[index];

      val = document.getElementById(cs).value;

      data = data+"&"+cs + "=" + encodeURIComponent(val);

      index = index+1;

   }     

   return data;

}

function resetchoose(id)

{

   curr = id; 

   limit = selectids.length;

   //alert(limit);

   for(var i=0 ; i<limit; i++){

      if(curr==selectids[i]) {

         var index =i; 

         break;

         //alert(index)

      }

   }

   for(i=index;i<limit;i++){

      rs = selectids[i]

      //alert(rs+  'must reset');

      mr = document.getElementById(rs);

      if (mr!=null)document.getElementById(rs).selectedIndex=0;

   }

}



function updateList() {



   if (request.readyState == 4) {

       if (request.status == 200) {
//alert(request.responseText);
        var make=request.responseText.split("|");

         //alert(make);

         var limit = make.length-1;
         //alert(limit);
         var list =document.getElementById(sid);

         var oid = sid+"1"; 
          //alert(oid);
         var member = document.getElementById(oid);
         var nvg = document.getElementById(oid);
         member = nvg.nextSibling;
            while((member!=null))
           {
               list.removeChild(member);
               member=nvg.nextSibling;
           }

         

         for(var i=0; i<limit; i++){

            value = make[i];

            //alert(value);

            var newitem=document.createElement("option");

            newitem.setAttribute("value", value);

            var text = document.createTextNode(value);

            newitem.appendChild(text);

             list.appendChild(newitem);

       } 

       } else if (request.status == 404) {

         alert("URL does not exist.");

       } else {

         //alert("Status is: " + request.status);

       }

     }      

}

//resetchoose(-1);

This is the form

Code:

<script type="text/javascript" src="myjs.js"></script>

<form action="../store/product.php" method="post" id="myform" onSubmit="return send_query()">
<table border="0" background="../images/kit_selection.jpg" width="500" height="271" align="center">
<tr><td>
<h2 align="center">Select your vehicle below.</h2>
<table align="center">
<tr><td width="50"><b>Year:</b></td> <td><select  id="year" name="year" onChange="setdata('setyear','make')" style="width: 225px;">
<option id="year1">-Select Year-</option>
<option id="year2">-Select Year-</option>  

</select> </td></tr>
<tr><td width="50"><b>Make:</b></td> <td><select id="make"  name="make" onChange="setdata('setmake','model')" style="width: 225px;">
<option id ="make1">-Select Make-</option>
</select> </td></tr>


<tr><td width="50"><b>Model:</b></td> <td>
<select id="model" name="model" onChange="setdata('setmodel','engine')" style="width: 225px;">
<option id="model1">-Select Model-</option>
</select>
</td></tr>

<tr><td width="50"><b>Engine:</b></td> <td>
<select id="engine" name="engine" style="width: 225px;">
<option id="engine1">-Select Model-</option>
</select>
</td></tr>

<tr><td colspan="2" align="center"><input type= "submit" name = "go" value="SendQuery">
<script language="JavaScript">
setyear('allyear','year');
</script>
</td></tr>
</table>
</td></tr>
</table>
</form>

freecrm · Nov 28, 2008

Re: wireless alarm system

buyyourall3 said:
if you are looking for wireless alarm system please click here for more details

Nope..

I would be very interested in a response to this post (above this one obviously) as well.

driveflexfuel · Dec 3, 2008

I was able to figure it out after a week of errors lol.

This was added to the JS file

Code:

function Enablemake(){
    var x=document.getElementById("make")
    x.disabled=false
}
function Enablemodel(){
    var x=document.getElementById("model")
    x.disabled=false
}
function Enableengine(){
    var x=document.getElementById("engine")
    x.disabled=false
}
function Disablemake(){
    var x=document.getElementById("make")
    x.disabled=true
}
function Disablemodel(){
    var x=document.getElementById("model")
    x.disabled=true
}
function Disableengine(){
    var x=document.getElementById("engine")
    x.disabled=true
}

This was added to the body tag

Code:

onLoad="Disablemake(); Disablemodel(); Disableengine();"

and this is the finished form

Code:

<form action="../store/product.php" method="post" id="myform" onSubmit="return send_query()" >
<table border="0" background="../images/kit_selection.jpg" width="500" height="271" align="center">
<tr><td>
<h2 align="center">Select your vehicle below.</h2>
<table align="center">
<tr><td width="50"><b>Year:</b></td> <td><select  id="year" name="year" onChange="setdata('setyear','make'); Enablemake();" style="width: 225px;">
<option id="year1">-Select Year-</option>
<option id="year2">-Select Year-</option>  

</select> </td></tr>
<tr><td width="50"><b>Make:</b></td> <td><select id="make"  name="make" onChange="setdata('setmake','model'); Enablemodel();" style="width: 225px;">
<option id ="make1">-Select Make-</option>
</select> </td></tr>


<tr><td width="50"><b>Model:</b></td> <td>
<select id="model" name="model" onChange="setdata('setmodel','engine'); Enableengine();" style="width: 225px;">
<option id="model1">-Select Model-</option>
</select>
</td></tr>

<tr><td width="50"><b>Engine:</b></td> <td>
<select id="engine" name="engine" style="width: 225px;">
<option id="engine1">-Select Model-</option>
</select>
</td></tr>

<tr><td colspan="2" align="center"><input type= "submit" name = "go" value="Search">
<script language="JavaScript">
setyear('allyear','year');
</script>
</td></tr>
</table>
</td></tr>
</table>
</form>

Disable/Enable dropdown menu onChange

driveflexfuel

New Member

freecrm

New Member

driveflexfuel

New Member

Free Web Hosting

Our Community

Legal