CODEWITHSUNDEEP
phpjquerymysqlajax
Krish
Krish

Reputation: 31

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

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 the complete form input fields with the details 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 the about input fields need to be filled with values on client name selection.

EDIT:

I tried with AJAX but couldn't able get the particular 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 get_details.php file I am storing different values in different variables, but I didn't understand how to get them to individual variable to main page.

Upvotes: 3

Views: 7180

Answers (2)

Rasclatt
Rasclatt

Reputation: 12505

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"=>'[email protected]','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>

Upvotes: 5

Mukul Bhardwaj
Mukul Bhardwaj

Reputation: 303

When you made ajaxCall return data in json format like 

json_encode(array("phone"=>'123-12313',"email"=>'[email protected]','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.

Upvotes: -3

Related Questions