jquery根据选择值填充表中的文本输入

时间:2010-09-07 08:45:09

标签: php jquery

我有一个表单,其中包含一个名为Client_ID的选择以及一些其他文本输入。我需要的是,当用户选择Client_ID时,我的字段Address1,Address 2等应该填充数据库查询的结果

SELECT Address1, Address2 from Client where Client_ID = Client_ID

我知道这有点像一个noob问题,但我真的很感谢能帮助你做最简单,最好的方法。

2 个答案:

答案 0 :(得分:2)

您应该使用jQuery + JSON

执行此类操作

首先从here下载jquery并将其包含在您的应用程序中。

如果 home.php ,您下载的jquery文件( jquery-1.4.2.min.js )和 getData.php 就在在同一个文件夹中,您的 home.php 将如下所示:

home.php (包含表单的文件)

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

?>

我已经在我的机器上测试了这段代码并且它正在运行。

答案 1 :(得分:1)

阅读this tutorial。我认为它可能有助于您理解将数据从客户端移动到服务器的概念,反之亦然。

请记住,在您的情况下,您需要结合事件。

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