javascript - html selection enable disable attribute -

i have 3 selection boxes in 1 of web page. set 2 of dependent on value of first 1 when value of select 1 other 2 enabled , did problem lies after press submit because after cannot clicked other 2 if value of first s still selected 1. here select boxes:

<form action="<?php echo htmlentities($_server['php_self']);?>">     <label>department</label>     <select class="field" id="cmbdept" name="dept" onchange="handleselect()">         <option value=""></option>         <?php             try{                 $query1 = $con->prepare("select * departments");                 $query1->execute();              } catch(pdoexception $e){                 echo $e->getmessage();                 exit();             }             while($r = $query1->fetch()) {                 extract($r);                 echo <<<eol                     <option value='$deptname'>$deptname</option>                 eol;             }         ?>     </select>     <script type="text/javascript">         document.getelementbyid('cmbdept').value = "<?php echo $_get['dept'];?>";     </script>      <label><strong>section</strong></label>      <select id="cmbsection" name="section" disabled="disabled">         <option value=""></option>         <?php             try {                 $query2 = $con->prepare("select * section");                 $query2->execute();             } catch(pdoexception $e) {                 echo $e->getmessage();                 exit();             }             while($s = $query2->fetch()) {                 extract($s);                 echo "<option value='$sectionname'>$sectionname</option>";                                       }         ?>     </select>     <script type="text/javascript">         document.getelementbyid('cmbsection').value = "<?php  echo $_get['section'];?>";     </script>      <label><strong>line</strong> </label>     <select id="cmbline" name="line" disabled="disabled">         <option value=""></option>         <?php             try{                 $query3 = $con->prepare("select * line");                 $query3->execute();             } catch(pdoexception $e){                 echo $e->getmessage();                 exit();             }             while($t = $query3->fetch()) {                 extract($t);                 echo "<option value='$linename'>$linename</option>";                                                             }         ?>     </select>     <script type="text/javascript">         document.getelementbyid('cmbline').value = "<?php echo $_get['line'];?>";     </script>      <label for="from">from</label>     <input type="text" id="from" name="from">     <script type="text/javascript">         document.getelementbyid('from').value = "<?php echo $_get['from'];?>";     </script>      <label for="to">to</label>     <input type="text" id="to" name="to">     <script type="text/javascript">         document.getelementbyid('to').value = "<?php echo $_get['to'];?>";     </script>      <br/>      <input type="submit" name="submit" value="submit">  </form> 

and here javascript use:

function handleselect() {     var item1 = document.getelementbyid("cmbdept");     var item2 = document.getelementbyid("cmbsection");      if(item1.value == 'sewing') {         document.getelementbyid('cmbsection').disabled = false;         document.getelementbyid('cmbline').disabled = false;     } else {         document.getelementbyid('cmbsection').disabled = true;         document.getelementbyid('cmbline').disabled = true;     } } 

see if trying do. key here limit repetitions in script. if doing things on , on again, same database call sequence, signal should creating function (or class) go in place of it:

/functions/form.php

<?php // since doing same query sequence on , over, // once , make reusable function fetch_query($con,$sql,$keyname = false)     {         try{                 $query = $con->prepare($sql);                 $query->execute();              } catch(pdoexception $e){                 // let's not announce issues users. reveal error                 // if user logged in administrator otherwise                 // should able return empty array                 // web app keeps on going (unless want exit, can)                 //echo $e->getmessage();                 return array();             }          while($r = $query->fetch()) {                 $result[]   =   (isset($r[$keyname]))? $r[$keyname] : $r;             }          return (!empty($result))? $result : array();     } // create get_departments function function get_departments($con)     {         return fetch_query($con,"select * `departments`","deptname");     } // create get_section function function get_section($con)     {         return fetch_query($con,"select * `section`","sectionname");     } // create get_line function function get_line($con)     {         return fetch_query($con,"select * `line`","linename");     } // create sanitizer function checks set array keys function to_page($array = false,$key = false)     {         if(!is_array($array))             return false;          return (isset($array[$key]))? htmlspecialchars($array[$key],ent_quotes) : "";     } 

/form.php (or whatever name of page is)

<?php // include php functions above include_once("functions/form.php"); ?> <!-- include jquery libraries if not set --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> <form action="<?php echo htmlentities($_server['php_self']);?>">     <label>department</label>     <select class="field" id="cmbdept" name="dept">         <option value="">select</option> <?php   foreach(get_departments($con) $deptname) {  ?>      <option value="<?php echo $deptname; ?>"><?php echo $deptname; ?></option> <?php   } ?>     </select>     <label><strong>section</strong></label>      <select id="cmbsection" name="section" disabled="disabled">         <option value="">select</option> <?php   foreach(get_section($con) $sectionname) {  ?>      <option value="<?php echo $sectionname; ?>"><?php echo $sectionname; ?></option> <?php   } ?>     </select>     <label><strong>line</strong> </label>     <select id="cmbline" name="line" disabled="disabled">         <option value="">select</option> <?php   foreach(get_line($con) $linename) {  ?>      <option value="<?php echo $linename; ?>"><?php echo $linename; ?></option> <?php   } ?>     </select>      <label for="from">from</label>     <input type="text" id="from" name="from" value="<?php echo to_page($_get,"from");?>" />     <label for="to">to</label>     <input type="text" id="to" name="to" value="<?php echo to_page($_get,"to");?>" />     <br/>     <input type="submit" name="submit" value="submit"> </form>  <script type="text/javascript"> $(document).ready(function() { <?php     // fetch values of     $set['line']    =   to_page($_get,"line");     $set['cmbdept'] =   to_page($_get,"dept");     $set['section'] =   to_page($_get,"section");     // remove empty      $set            =   array_filter($set);     // if there left, loop through them     if(!empty($set)) {         foreach($set $idname => $value) {  ?>$('#<?php echo $idname; ?>').val('<?php echo $value; ?>'); <?php   }     } ?>     // run on load     handleselect();     // run on change     $("#cmbdept").change(function() {         handleselect();     }); }); function handleselect()     {         var item2 = $("#cmbsection");         var item1 = $("#cmbdept");          if(item1.val() == 'sewing') {             item2.prop("disabled",false);             $("#cmbline").prop("disabled",false);         } else {             item2.prop("disabled",true);             $("#cmbline").prop("disabled",true);         }     } </script>