需要Dropdown使用AJAX在我的页面上填写数据库信息

时间:2017-10-17 19:33:07

标签: javascript php ajax

我似乎无法找到我的错误。我的表单中有一个下拉列表,我希望有一个onSelect事件,使其调用查询数据库的AJAX脚本,并填写公司地址的信息以填写表单。我下拉填充字段的唯一方法是单击表单的保存按钮。

这是我的HTML:

<select id="est_for" name="estimate_for" onselect="show_info(this.value)">
<?php
if($estimate_for == NULL){
    ?> 
    <option value="" disabled selected>Please Select a Company</option> 
    <?php
}
else{
    echo '<option value="'.$estimate_for.'">'.$company_name.'</option>'; 
}
$sql = $conn->prepare('SELECT * FROM company');
$sql -> execute();
$result = $sql ->get_result();
if ($result->num_rows>0) {
    while ($row=$result->fetch_assoc()) {
        $company_name = $row['company'];
        $company_id = $row['id'];
        echo '<option value="'.$company_id.'">'.$company_name.'</option>';
    }
}
else{
    echo'Cannot find company information<br>';
}
?>
</select>

<div id="company_info">
<?php                   
if($estimate_for != NULL){
echo $company_info['company'].'<br>'.$company_info['adr_street'].'<br>'.$company_info['city'].', '.$company_info['prov'].' '.$company_info['postal'].'<br>'.$company_info['country'];
}?>                         
</div>

JavaScript的:

function showInfo(str){
    if(str==""){
        document.getElementById("company_info").innerHTML = "";
        return;
    }
    else{
        if(window.XMLHttpRequest){
            //IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else{
            //IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function(){
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("company_info").innerHTML = this.responseText;
            }
        }
    }
    document.write(document.getElementById("company_info").innerHTML);
    xmlhttp.open("GET","create_estimate.php?q="+str,true);
    xmlhttp.send();
}

1 个答案:

答案 0 :(得分:1)

我相信你提供的代码示例缺少一些关键信息,以及表单的其余部分(关于为什么它可以按下按钮,而不是选择onchange事件)...但我相信你的问题可能是你这样做:

onselect="show_info(this.value)"

当您的javascript函数定义如下:

function showInfo(str){ ... }

注意名称差异。

如果你有比你提供的更多的javascript,它实际上有一个名为“show_info()”的函数的定义,那么请提供。如果没有,那可能就是你发出的地方。

+1使用预处理语句,但它有点搞笑,因为语句中没有传递变量;)