javascript - how to fill the items in combo box from database based on the selected item of another combo box

322

When the user selected one of the items in grade_level combobox, the section combobox will automatically fill the sectionName from database. Each grade_level has their own table in database and it's kinda hard because I know javascript has something to do with this. Can you help me to get the selected item and get the data from database?

<script>
  function makeEnable(value){
    document.getElementById("section").disabled = (value=="KINDER 1"||value=="KINDER 2");
  }
</script>

<div >
  <label for="inputPassword">Grade Level:</label>
  <div >
    <select name="grade_level" onChange="makeEnable(this.value)" id="grade_level" required>
      <option></option>
      <option value="KINDER 1">KINDER 1</option>
      <option value="KINDER 2">KINDER 2</option>
      <option value="GRADE 1">GRADE 1</option>
      <option value="GRADE 2">GRADE 2</option>
      <option value="GRADE 3">GRADE 3</option>
      <option value="GRADE 4">GRADE 4</option>
      <option value="GRADE 5">GRADE 5</option>
      <option value="GRADE 6">GRADE 6</option>
      <option value="GRADE 7">GRADE 7</option>
      <option value="GRADE 8">GRADE 8</option>
      <option value="GRADE 9">GRADE 9</option>
      <option value="GRADE 10">GRADE 10</option>
      <option value="GRADE 11">GRADE 11</option>
      <option value="GRADE 12">GRADE 12</option>
    </select>
  </div>
</div>


<div >
  <label for="inputPassword">Section:</label>
  <div >
    <select name="section" id="section" required >
      <option></option>
      <?php
        $query=mysql_query("select * from grade_one") or die(mysql_error());
        while($row=mysql_fetch_array($query)){ ?>
      <option value="<?php echo $row['sectionName']; ?>"><?php echo $row['sectionName']; ?></option>
      <?php } ?>
    </select>
  </div>
</div>
441

Answer

Solution:

There must some sort of mapping betweenselect value and table name.

Value ofselected option must have some relation with the table name, if that is not possible then you must have an array of objects which will be having relation of the both([{'val':'abc pqr', table_name: 'abc_pqr_xyz'}]). This way you can determine which table to be used while making query.

Second select box will be empty initially, onceonchange is fired on first select input, get the value which is mapped with the table name, and retrieve values from specific table.

I would suggest you to go throughajax to achieve this. Could be achieved withoutajax too which is not recommended.

People are also looking for solutions to the problem: php - Validating users upon login and giving them limited rights to database

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.