Populating Inputs Based on HTML Dropdown Selection

Question

I know there are many questions like this one on Stack Overflow, but I am really needing something more related towards what I am doing...so that is why I am posting this question.

I have an HTML form with PHP that pulls data from an MSSQL database in order to populate a dropdown box. I want to be able to populate the contact information text boxes once I select a name from my dropdown box. So far, I have it to where, if I select a specific vendor, the vendor name gets entered automatically into the Name, Email, and Phone Number fields. However, I want to have different attributes entered into the text fields and not the vendor name itself. How could I do this?

The fields from my database with the name, email, and phone number that I want imported are named MR_POC_N, MR_POC_E, and MR_POC_P

Also the "MR_Name" that you see is the field with all names of the vendors FYI

Here is my code for the HTML dropdown:

<select name="vendor_dropdown" id="ven" onChange="updateinput();">
    <option value="">Choose a Vendor</option>
        <?php foreach($users->fetchAll() as $user): ?>
            <option><?php echo $user['MR_Name'];?></option>
        <?php endforeach; ?>
</select>

Here is my Contact Info code:

<table align="center">
    <tr>
        <td align="right">Name:</td>
        <td><input class="textbox" type="text" id="name" name="name"></td>
    </tr>
    <tr>
        <td align="right">Email:</td>
        <td><input class="textbox" type="email" id="email" name="email"></td>
    </tr>
    <tr>
        <td align="right">Phone Number:</td>
        <td><input class="textbox" type="tel" id="tel" name="number"></td>
    </tr>
</table>

Here is the update input function I have in JS. I know this is off but looking for some sort of direction as I am not the best in JS:

function updateinput() {


    var e = document.getElementById("ven");
        var venSelected = e.options[e.selectedIndex].value;

        document.getElementById("name").value=venSelected;
        document.getElementById("email").value=venSelected;
        document.getElementById("tel").value=venSelected;
    }

Answer 1

Keep your script the same as it currently is but change your JavaScript and the dropdown. In your dropdown try doing

<option value = "<?=$user['MR_Name'];?>"><?php echo $user['MR_Name'];?></option>

You want to make what's called an AJAX request. This will allow you to go off to another page get some data in your case you would be getting some user information, and return it to the page, without the user physically changing page!

Check this link out for more information on AJAX.

Your AJAX call will look something like this.

function updateinput() {
    var e = $("#ven").val();

    $.ajax({
        url: "get-user-info.php",
        type: "POST",
        data: {e: e},
        success: function(data){
            data = JSON.parse(data);

            var email = data[0];
            var tel = data[1];

            $("#email").val(email);
            $("#tel").val(tel);
        }
    });
}

This script first gets the selected value of the dropdown. Then it starts the make the AJAX call, it's like submitting a form, we are POSTING the values across to the next page. So the page the AJAX will talk to is get-user-info.php it's posting the values from data. The data is sending across e which is what the dropdown value is. On success it will then do the code underneath which is saying parse data from a PHP array to JavaScript and then it is saying email is the first value of the array and tel is the second value from the array. Then we are saying the input with ID 'email' now equals email from the array and the input with ID 'tel' now equals tel from the array.

You will now need to create a php script in the same directory called get-user-info.php

In this script make a call to your database where the user is the same as the selected value e and return a PHP array that looks like this:

array(email, telephone)

This is pseudo-code for your PHP script get-user-info.php:

<?php

$e = $_POST["e"];
//Do your SQL

//In the loop
$array[] = $user["email"];
$array[] = $user["tel"];

echo json_encode($array);
?>