如何从mysql查询结果中自动填充文本框值onChange of dropdown?

时间:2012-09-04 21:38:29

标签: javascript jquery mysql ajax onchange

我希望customer_addresscustomer_citycustomer_statecustomer_zip自动填充onChange下拉列表customer_name。我环顾四周,但我很难过。

请帮忙。

<form action="" method="post" name="booking_form" class="booking" style="width: auto">
<select name="customer_name" onChange="???????">
<option value="index.php">Click to select your school </option>
<?php

// Make a MySQL Connection

$username="";

$password="";

$database="";

mysql_connect('localhost',$username,$password);

@mysql_select_db($database) or die( "Unable to select database");

$query = "SELECT * FROM table"; 
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)){

$id = $row['id'];
$school = $row['customer_name'];
$phone = $row['customer_phone'];
$address = $row['customer_address'];
$city = $row['customer_city'];
$state = $row['customer_state'];
$zip = $row['customer_zip'];    
$notes = $row['customer_notes'];
?>
<option value="<?php echo $school; ?>"><?php echo "$school".", "."$city"; ?></option>
<?php } 

?></select>
<input type="text" name="customer_address">
<input type="text" name="customer_city">
<input type="text" name="customer_state">
<input type="text" name="customer_zip">
</form>

3 个答案:

答案 0 :(得分:1)

您可以生成包含所有sql结果的javascript对象,如下所示:

var schoolInfo = { id1 : {name:"Name 1", address:"address line" ...}, 
id2: {} .... }

然后将每个设置为包含自定义属性'sid':

<option value="school" sid="id1">school, city</option>

对于使用jQuery的element的onchange事件处理程序:

.change(function(){
     var sid = $(this).attr('sid');
     $("input[name='customer_address']").val(schoolInfo[sid].address);
     $("input[name='customer_city']").val(schoolInfo[sid].city);
     $("input[name='customer_zip']").val(schoolInfo[sid].zip);
});

答案 1 :(得分:0)

尝试发布一个php脚本并与Mysql建立连接然后返回值。

<select name="customer_name">
<option id='selects' value="index.php">Click to select your school </option>

的Javascript

       $("select[name='customer_name']").change(function(){
            $.post("-YOUR PHP FILE-", customer_name: $(this).val(), function(data){
               schools = data.split(",");
               for(var i in schools){
               $("select[name='customer_name']").append("<option>"+schools[i]+"</option>");
               }
            })
       })

PHP

       <?php
          //You connected and got an array contains your school names($schools)
          $schools = implode(",",$schools); 
          echo $schools;
       ?>

我认为你正试图做那样的事情。

答案 2 :(得分:0)

自我原帖后的一些事情...... mysql_已不再安全。将所有内容都放在一个文件中并不好,最好将sql&amp;您所查看的业务逻辑,查找MVC模式。然而,这里是快速&amp;脏的方法: 你可以在这里看到最终结果:http://jsfiddle.net/webaholik/kcce6Ls9/

<?php
$sql = "SELECT id, 
    customer_name AS name, 
    customer_phone AS phone, 
    customer_address AS address, 
    customer_city AS city, 
    customer_state AS state, 
    customer_zip AS zip, 
    customer_notes AS notes 
    FROM table";
$schoolInfo = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);

$array = array();
foreach ($schoolInfo as $item) {
    $array[$item['id']] = $item;
}
$json = 'var SchoolInfo = ' . json_encode($array) . ';';
?>
<form action="" method="post" name="booking_form" class="booking"
style="width: auto">
<select id="customer_name" name="customer_name">
    <option value="index.php">Click to select your school</option>
<?php foreach($schoolInfo as $row){?>
    <option value="<?php echo $row['id']; ?>"><?php echo $row['name'].", ".$row['city']; ?></option>
<?php } ?>
</select>
<input type="text" name="customer_address">
<input type="text" name="customer_city">
<input type="text" name="customer_state">
<input type="text" name="customer_zip">
</form>
<script>
<?php echo $json;?>

$("#customer_name").change(function(){
    var sid = $(this).val();
    $("input[name='customer_address']").val(SchoolInfo[sid].address);
    $("input[name='customer_city']").val(SchoolInfo[sid].city);
    $("input[name='customer_zip']").val(SchoolInfo[sid].zip);
});
</script>