skip to Main Content

I am basically trying to select data from the backend mysql database based on the input gathered in a previous drop down. However, I am not able to get this working. Looks like I am missing something, but unable to figure that out!!

Here is the code snippet that I am trying..

376               <div class="col-md-4"><label for="doctor">Doctors:</label></div>
377                 <div class="col-md-8">
378                     <select name="doctor" class="form-control" id="doctor" required="required">
379                       <option value="" disabled selected>Select Doctor</option>
380 
381                       <?php display_medis(); ?>
382                     </select>
383                   </div><br/><br/>
384 
385 
386                         <script>
387               document.getElementById('doctor').onchange = function updateFees(e) {
388                       var selection = document.querySelector(`[value=${this.value}]`).getAttribute('data-value');
389                       document.getElementById('docFees').value = selection;
390               };
391             </script>
392 
393 
394                   <div class="col-md-4"><label for="consultancyfees">
395                                 Consultancy Fees
396                               </label></div>
397                               <div class="col-md-8">
398                               <!-- <div id="docFees">Select a doctor</div> -->
399                               <input class="form-control" type="text" name="docFees" id="docFees" readonly="readonly"/>
400                   </div><br><br>

Function code

function display_medis()
{
 global $con;
 $query = "select med_name,med_id,mrp from med_inv";
 $result = mysqli_query($con,$query);
 while( $row = mysqli_fetch_array($result) )
 {
  $med_name = $row['med_name'];
  $mrp = $row['mrp'];
  $med_id=$row['med_id'];
  echo '<option value="' .$med_name. '" data-value="'.$mrp.'" >'.$med_name.'</option>';
  //echo '<option value="' .$med_name. '" data-value="'.$mrp.'" data-spec="'.$med_id.'">'.$med_name.'</option>';
  //echo '<option value="' .$med_name. '" >'.$med_name.'</option>';
  //echo '<option value="' .$mrp. '" >'.$mrp.'</option>';
 }
}

Any suggestions.

![Screenshot]enter image description here

2

Answers


  1. There is some syntax problem in your original JS script to process the select drop-down selected value.

    Please change

    <script>
    document.getElementById('doctor').onchange = function updateFees(e) {
    var selection = document.querySelector(`[value=${this.value}]`).getAttribute('data-value');
    document.getElementById('docFees').value = selection;
    };
    </script>
    

    to

    <script>
    document.getElementById('doctor').onchange = function updateFees(e) {
    var selection=this.selectedOptions[0].getAttribute('data-value');
    document.getElementById('docFees').value = selection;
    };
    </script>
    
    

    Sandbox link (working):

    http://www.createchhk.com/SOanswers/SOtest5Oct2022.html

    Login or Signup to reply.
  2. function display_medis(){
     global $con;
     $query = "select med_name,med_id,mrp from med_inv";
     $result = mysqli_query($con,$query);
     $option = '';
     while( $row = mysqli_fetch_array($result) )
     {
      $med_name = $row['med_name'];
      $mrp = $row['mrp'];
      $med_id=$row['med_id'];
      $option .= '<option value="' .$med_name. '" data-value="'.$mrp.'" >'.$med_name.'</option>';
     }
     echo $option;
    }
    

    And now your script code should look like this

    <script>
      $('#doctor').on('change',function(e){
        var selection = $('#doctor option:selected').val();
        $('#docFees').val(selection);
      });
    </script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search