1

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.

Istari
  • 3,843
  • 3
  • 24
  • 21

2 Answers2

2

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.

Naveed
  • 41,517
  • 32
  • 98
  • 131
  • (+1) Although I always find it safest to return json from the server if I plan to process dynamic strings on the client side. – Bob Sep 07 '10 at 09:36
  • Naveed, using your method, I am getting back what seems like valid data from getdata.php if I call the page in the browser. However, nothing's happening when changing the value of the select. Have I correctly used the jquery code by placing it inside the head section of the page? – Istari Sep 07 '10 at 13:16
  • If nothing happening on select change event then it means your jquery code is not included correctly or your jquery library is not included. Yes you can add jquery code in your head section but you have to close it in `` tag and also use ready function. Look at edited answer. jquery code is added in head section now. Read the whole answer carefully and then try again. If not success then report here again, I will try to help. – Naveed Sep 08 '10 at 02:26
  • Thanks Naveed. I had it in the head section between – Istari Sep 08 '10 at 12:26
  • A slightly related question, not sure whether I should start a new q for this. One of the fields I am updating is another select. The value (a number) is being returned by getdata.php. How do I get the selected attribute of this select to be updated so that the updated value is selected? – Istari Sep 08 '10 at 12:41
  • OK. A dropdown(gender) is added as an example in answer. Slightly change in jQuery code and getData.php file to work properly with textboxes and dropdowns. See edited answer. getData.php is passing value `1` to select an option from gender dropdown and it is selecting option whose value is `1` in dropdown. You can set any value for $gender variable in getData.php. Also look at this: http://stackoverflow.com/questions/499405/change-selected-value-of-drop-down-list-with-jquery/499413#499413 – Naveed Sep 08 '10 at 17:38
  • Hi Naveed. Sorry but in your last edit, something's caused the script not to work when I replace the jquery section with the new. As far as I can tell the only difference between in the jquery is for(var id in data) { $(id).val( data[id] ); } – Istari Sep 08 '10 at 18:56
  • There is also a change in **getData.php**. Did you notice that? The change is `$arr = array( 'input#address1' => $add1, 'input#address2' => $add2, 'select#gender' => $gender );`. Here `address1`, `address2`, and `gender` are the id's of your form elements. Also add new dropdown(gender) in your form. – Naveed Sep 09 '10 at 04:14
  • Naveed, I feel like such an idiot. I had inserted the select# prefix for the select but had not added the input# prefix for the other fields. I blame the late hour last night :-). Just tried it now and it works perfectly. Thanks so much for your patient help with this. – Istari Sep 09 '10 at 05:48
1

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  
    });   
});
showdev
  • 28,454
  • 37
  • 55
  • 73
fatnjazzy
  • 6,070
  • 12
  • 57
  • 83