Auto fill text box depending on Drop Down value

This might be a stupid question but I would like to have a clarification on how to go about this. I have come across quite a few articles that let to set the values of a text box depending on the choices made in a drop down menu using jQuery and Ajax. My issue is when I’m trying to do the same depending on the choices made in 5 drop down menus. I have the Id values stored in the database which should be used to populate the text box. Can anyone guide on how to go about this issue with multiple drop downs. This is my code so far:

    <?php
     $sql1="SELECT Schlungen  FROM schulung as s"; 
     $result=mysql_query($sql1); 
     echo "<p align='left'> <strong>Schulung 1</strong> <select name='Schlungen1'>           <option value default></option>";
     while ($row = mysql_fetch_array($result)) 
     {
     echo "<option value='" . $row['Schlungen'] . "'>" . $row['Schlungen'] . "   </option>";
      }
      echo "</select>";
      ?>

      <?php
      error_reporting(0);
      //Drop Down for Schulung 2
      $sql2="SELECT Schlungen  FROM schulung as s"; 
      $result=mysql_query($sql2); 
      echo "<p align='left'> <strong>Schulung 2</strong> <select name='Schlungen2'>  <option value default></option>";
      while ($row = mysql_fetch_array($result)) 
      {
      echo "<option value='" . $row['Schlungen'] . "'>" . $row['Schlungen'] . " </option>";
       }
      echo "</select>";
      ?>


      <?php
      error_reporting(0);
      //Drop Down for Schulung 3 
      $sql3="SELECT Schlungen  FROM schulung as s"; 
      $result=mysql_query($sql3); 
      echo "<p align='left'> <strong>Schulung 3</strong> <select name='Schlungen3'> <option value default></option>";
      while ($row = mysql_fetch_array($result)) 
      {
      echo "<option value='" . $row['Schlungen'] . "'>" . $row['Schlungen'] . "</option>";
       }
      echo "</select>";
      ?>

      <?php
      error_reporting(0);
      //Drop Down for Schulung 4 
      $sql4="SELECT Schlungen  FROM schulung as s"; 
      $result=mysql_query($sql4); 
      echo "<p align='left'> <strong>Schulung 4</strong> <select name='Schlungen4'><option value default></option>";
      while ($row = mysql_fetch_array($result)) 
      {
      echo "<option value='" . $row['Schlungen'] . "'>" . $row['Schlungen'] . " </option>";
       }
      echo "</select>";
      ?>

      <?php
      error_reporting(0);
      //Drop Down for Schulung 5  
      $sql5="SELECT Schlungen  FROM schulung as s"; 
      $result=mysql_query($sql5); 
      echo "<p align='left'> <strong>Schulung 5</strong> <select name='Schlungen5'><option value default></option>";
      while ($row = mysql_fetch_array($result)) 
      {
      echo "<option value='" . $row['Schlungen'] . "'>" . $row['Schlungen'] . " </option>";
      }
      echo "</select>";
      ?>   
      <p align="left"><strong>Access_level </strong> 
      <input type="text" name="a_level" disabled="disabled">
      </p>

Answer

For achieving auto completion,you can create a select field in html file,call a javascript function on keyup event and use jQuery for calling your php file

<html>
<head>
    <script>
        $('.autosuggest').keyup(function(){
         $.post("<your file.php>",{any data you need},function(data){
          //echo the data
        //echo "<option value='" . $row['Schlungen'] . "'>" . //$row['Schlungen'] ."   </option>";
        $('.result').html(data)

});
        });
        $('.result option').click(function(){
            var rValue = $(this).text();
            $('.autosuggest').attr('value',rValue);        
            $('.result').html('');
        });

    </script>
</head>
<body>
    <input type='text' class='autosuggest'/>
    <select class='result'>
    </select>
</body>
</html>

Advertisement

Answer