CODEWITHSUNDEEP
phpjquery
Istari
Istari

Reputation: 3973

jquery populate text input from table based on select value

I have a form which contains a select named Client_ID as well as some other text inputs. What I need is that when a user selects a Client_ID, my fields Address1, Address 2 etc should be populated with the result of a database query along the lines of 

SELECT Address1, Address2 from Client where Client_ID = Client_ID

I'm aware this is somewhat of a noob question, but would really appreciate some help on the simplest and best way to do this.

Upvotes: 1

Views: 5217

Answers (2)

fatnjazzy
fatnjazzy

Reputation: 6152

Read this tutorial. I think it might help you understand the concept of moving data from client to the server and vise the versa.

Keep in mind that in your case you need to combine event. 

$(document).ready(function(){  
    $("#my_select_box").change(function()   
    {   
       //send the data to the server as in the tutorial above  
    });   
});

Upvotes: 1

Naveed
Naveed

Reputation: 42093

You should do something like this with jQuery + JSON

First of all download jquery from here and include it in your application.

If home.php, your downloaded jquery file(jquery-1.4.2.min.js) and getData.php are in the same folder then your home.php will be look like this:

home.php (file that contain your form)

<html>

<head>

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#Client_ID').live('change', function(event) {
            $.ajax({
                url     : 'getData.php',
                type    : 'POST',
                dataType: 'json',
                data    : $('#myform').serialize(),
                success: function( data ) {
                       for(var id in data) {        
                              $(id).val( data[id] );
                       }
                }
            });
        });
    });
    </script>

</head>

<body>

    <form id='myform'>
     <select name='Client_ID' id='Client_ID'>
       <option value=''>Select</option>
       <option value='1'>Client 1</option>
       <option value='2'>Client 2</option>
     </select>

     <input type='text' name='address1' id='address1'>
     <input type='text' name='address2' id='address2'>

     <select name='gender' id='gender'>
        <option value=''>Select</option>
        <option value='1'>Male</option>
        <option value='2'>Female</option>
     </select>

    </form>

</body>


</html>

getData.php

<?php

$clientId = $_POST['Client_ID']; // Selected Client Id

$query  = "SELECT Address1, Address2 from Client where Client_ID = $clientId";
$result = mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_ASSOC)

$add1 = $row[Address1];
$add2 = $row[Address2];
$gender = 1;

$arr = array( 'input#address1' => $add1, 'input#address2' => $add2, 'select#gender' => $gender );
echo json_encode( $arr );

?>

I have tested this code on my machine and it is working.

Upvotes: 2

Related Questions