In the drop-down list, how to fill out the full form fields from the database

Question

How to fill in the full form input fields from the database based on the value selected from the drop-down list

Example. In the application, choosing the name of the client, he fills in the input field of the form with the data stored in the database.

Sample Code:
<select name="client">
 <option value="">-- Select Client Name -- </option>
 <option value="1">John</option>
 <option value="2">Smith</option>                               
</select>

<input name="phone" type="text" value="">
<input name="email" type="text" value="">
<input name="city" type="text" value="">
<textarea name="address"></textarea>

All input fields must be filled with values ​​to select a client name.

---

EDIT:

I tried with AJAX but could not get the specific variable from the file ... below is my code:

<script>
    $(document).ready(function() {
        $('#client').change(function() {
            alert();
            var selected = $(this).find(':selected').html();

            $.post('get_details.php', {'client': selected}, function(data) {
                $('#result').html(data);
            });
        });
    });
</script>

In the file get_details.phpI store different values ​​in different variables, but I did not understand how to transfer them to a separate variable on the main page.

Answer 1

jQuery, ( script $_POST), index.php, url jQuery AJAX. , , . PHP HTML/Javascript url: '/index.php':

<?php
// This is where you would do any database call
if(!empty($_POST)) {
    // Send back a jSON array via echo
    echo json_encode(array("phone"=>'123-12313',"email"=>'[e-mail]','city'=>'Medicine Hat','address'=>'556 19th Street NE'));
    // Exit probably not required if you
    // separate out your code into two pages
    exit;
}
?>

<form id="tester">
    <select name="client" id="client">
        <option value="">-- Select Client Name -- </option>
        <option value="1">John</option>
        <option value="2">Smith</option>                               
    </select>
    <input name="phone" type="text" value="">
    <input name="email" type="text" value="">
    <input name="city" type="text" value="">
    <textarea name="address"></textarea>
</form>

<!-- jQuery Library required, make sure the jQuery is latest -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // On change of the dropdown do the ajax
        $("#client").change(function() {
            $.ajax({
                    // Change the link to the file you are using
                    url: '/index.php',
                    type: 'post',
                    // This just sends the value of the dropdown
                    data: { client: $(this).val() },
                    success: function(response) {
                        // Parse the jSON that is returned
                        // Using conditions here would probably apply
                        // incase nothing is returned
                        var Vals    =   JSON.parse(response);
                        // These are the inputs that will populate
                        $("input[name='phone']").val(Vals.phone);
                        $("input[name='email']").val(Vals.email);
                        $("input[name='city']").val(Vals.city);
                        $("textarea[name='address']").val(Vals.address);
                    }
            });
        });
    });
</script>

Answer 2

ajaxCall json,

json_encode(array("phone"=>'123-12313',"email"=>'[e-mail]','city'=>'Medicine Hat','address'=>'556 19th Street NE'));

jQuery ,

 var Vals    =   JSON.parse(response);
 // These are the inputs that will populate
 $("input[name='phone']").val(Vals.phone);

.