On Dropdown Selection, how to fill complete form fields from Database

Question

How to fill the complete form input fields from Database based on the value selected from the Dropdown

Example: In a Application, by selecting a client name it fills

Answer 1

This is a just a basic jQuery example that calls itself (the top portion of the script is active when a $_POST is made), which I have named index.php as indicated in the url of the jQuery AJAX. You can use two separate pages to do this if you want. Just separate out the PHP from the HTML/Javascript and change the 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"=>'test@test.com','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

When you made ajaxCall return data in json format like

json_encode(array("phone"=>'123-12313',"email"=>'test@test.com','city'=>'Medicine Hat','address'=>'556 19th Street NE'));

above shown

then parse it in jQuery and put the value in different selectors like

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

above shown.