Displaying Related Information From DropDown into Textbox (From SQL database, using PHP, AJAX AND HTML)

Question

So i can populate the dropdown with information from the database, however i what i need to be done is when i click on a option in the dropdown, it should display the email of that selected option in a textbox. So in essence, select dropdown, select company and then it pulls the information (email) from the database and inserts it into a textbox

Please help?

PHP / HTML PAGE

  <div class="customerInfo">
     <div class="blockSelect">
        <div class="select" style="margin-right: 5px;">
           <select name="cat" id="cat">
              <option value="" disabled selected>Customer</option>
              <?php
                 $records = mysqli_query($conn, "SELECT company FROM clients");
                    while($data = mysqli_fetch_array($records))
                                        {
                   
                             echo "<option value='". $data['company'] ."'>" .$data['company'] ."</option>";  // displaying data in option menu
                    }
                    ?>
           </select>
           <?php mysqli_close($conn);  // close connection ?>
        </div>
     </div>
     <div class="blockSelect">
        <input type="text" name="mail" id="mail" style="color: black; border-bottom: 1px solid;">
     </div>
  </div>

AJAX CODE

$('#cat').change(function(){
var package = $(this).val();
$.ajax({
type:'POST',
data:{package:package},
url:'get_details.php',
success:function(data){
   $('#mail').val(data);
} 
});

get_details.php

<?php 

include("server.php"); 

if (isset($_POST['package'])) {
    $qry = "SELECT * FROM clients WHERE company=" . $_POST['package'];
    $rec = mysql_query($qry);
if (mysql_num_rows($rec) > 0) {
    while ($res = mysql_fetch_array($rec)) {
        echo $res['email'];
    }
}
    die(); 
}
?>

You code is vuirnuable to sql injections [how-can-i-prevent-sql-injection-in-php](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) and you also use `mysql` and `mysqli` only use `mysqli` — Baracuda078, Aug 20 '21 at 11:42
console.log you `package` variable. does it show the right value? In you PHP use xdebug or if you dont use that `var_dump` variables to see what you get where. If I look at your code you expact 1 result back, so use a limit 1 on your query, also you only whant the email so you can replace the `*` in your query with only `email` you got then less data transfer from your data base — Baracuda078, Aug 20 '21 at 11:46
@baracuda078, thank you i changed as needed, however still sitting with the same issue. — MyNameJeff, Aug 20 '21 at 12:21
And what's your problem with the given code? What **exactly** is not working? What have you tried to resolve the problem? — Nico Haase, Aug 20 '21 at 12:36
@NicoHaase, the issue is that i does not display anything in the textbox after selecting the company from the dropdown. — MyNameJeff, Aug 20 '21 at 12:46
And what have you tried to resolve this problem? Is the AJAX request sent properly? Is it handled properly by the server? Does the response match what you expect to see? — Nico Haase, Aug 20 '21 at 12:47

X999 · Accepted Answer · 2021-08-20T12:31:25.977

I assume you have some info about companies in your database like id, name, email, and some other stuff. You want to get email value from the database and show it in input field. I would use data- attribute. For example data-email="company_a@gmail.com" then get that data via javascript and show it in the input element.

See the complete example below.

var mySelect = document.getElementById("cat");
mySelect.addEventListener("change", function() {
  var myOption = mySelect.options[mySelect.selectedIndex].getAttribute("data-email");
  document.getElementById('mail').value = myOption;
});

<div class="customerInfo">
  <div class="blockSelect">
    <div class="select" style="margin-right: 5px;">
      <select name="cat" id="cat">
        <option value="" disabled selected>Customer</option>
        <option value="Company_A" data-email="company_a@gmail.com">Company A</option>
        <option value="Company_B" data-email="company_b@gmail.com">Company B</option>
        <option value="Company_C" data-email="company_c@gmail.com">Company C</option>
        <option value="Company_D" data-email="company_d@gmail.com">Company D</option>
      </select>
    </div>
  </div>
</div>

<div class="blockSelect">
  <input type="text" name="mail" id="mail" style="color: black; border-bottom: 1px solid;">
</div>

So after you comment out how to do it. You should add a little more code to php.

Guess your database column is company_email when you are using php to show your data like below.

echo "<option value='". $data['company'] ."'>" .$data['company'] ."</option>";

Change it with this.

echo '<option value="'.$data['company'].'" data-email="' . $data['company_email'] . '">' . $data['company'] . '</option>';

okay so the idea is there. I need it to pull the email from the database that is related to that company. So when the user selects a company from the dropdown, it will automatically fill a textbox with the email address. — MyNameJeff, Aug 20 '21 at 12:18
Okay this is doing what you want. I will more examples to answer — X999, Aug 20 '21 at 12:25
thank you dude! That worked perfectly after adjusting the PHP code in accordance to your original post. — MyNameJeff, Aug 20 '21 at 13:15

Displaying Related Information From DropDown into Textbox (From SQL database, using PHP, AJAX AND HTML)

1 Answers1