jquery populate text input from table based on select value_问答_开发者

jquery populate text input from table based on select value

开发者 https://www.devze.com 2023-01-15 16:16 出处：网络

I have a form which contains a selec开发者_运维技巧t 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

相关专题：jquery php

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.

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.

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  
    });   
});