当选择值更改时,ajax调用从数据库查询填充表单字段

时间:2013-11-13 15:31:37

标签: javascript ajax database json

我一直在查看这里的问题,无法找到我所追求的确切答案:(但我已经设法得到了一些东西。

我有一个表单选择字段,我从db查询填充

<select style="width:100%;" class="quform-tooltip chosen-select" id="company_select" name="company_select" title="Company Select" onChange="showUser(this.value)">
<option value="">Please select</option>
<?php
$userID = $user->getUserID();
$query = $user->database->query("SELECT * FROM tbl_businesses as business LEFT JOIN tbl_user_businesses as biz_user ON business.businessID = biz_user.businessID WHERE biz_user.userID ='$userID'");

while($row=$user->database->fetchArray($query))
{
    $bizID = $row['businessID'];
    $bizName = $row['businessName'];
    echo "<option value='$bizID'>$bizName</option>";
}?>
</select>

然后目前有2个其他文本框(最终可能会增加),我想在更改/选择上面的选择框值时填充

<input id="company_name" type="text" name="company_name" value="" />
<input id="company_email" type="text" name="company_email" value="" />

所以我的选择框上有一个onchange函数,就是这个

<script>
function showUser(str)
{
if (str=="")
{
    document.getElementById("company_name").innerHTML="";
    return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var data = JSON.parse(xmlhttp.responseText);
        for(var i=0;i<data.length;i++) 
        {
          document.getElementById("company_name").innerHTML += data[i].id + ' - ' + data[i].name + ' - ' + data[i].web;
        }
    }
}
xmlhttp.open("GET","formdata.php?q="+str,true);
xmlhttp.send();
}
</script>

和我的formdata.php文件是这样的

    <?php
include("include/user.php");

$q = intval($_GET['q']);

$sql="SELECT * FROM tbl_businesses WHERE businessID = '".$q."'";

$result = $user->database->query($sql);
$info = array();
while($row=$user->database->fetchArray($result))
{
    $cID = $row['bussinessID'];
    $cName = $row['businessName'];
    $cWeb = $row['businessWebsite'];
    $info[] = array( 'id' => $cID, 'name' => $cName, 'web' => $cWeb );
}
echo json_encode($info);?> 

正确地调用ajax并返回预期的数据但我现在需要帮助来填充文本框值?

任何人都可以帮我解决这个问题,花了很多时间试图解决这个问题,我不熟悉javascript / json所以不知道从哪里开始

我希望将company_name文本框值设置为$ cName;和 company_email文本框值设置为$ cWeb;

感谢任何帮助

2 个答案:

答案 0 :(得分:6)

确定我使用的解决方案,对于任何想要知道我如何解决它的人来说

我的index.php包含javascript和表单代码

javascript代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>

<script>
function showUser(str)
{
if (str=="")
{
    document.getElementById("company_name").value="";
    return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var data = JSON.parse(xmlhttp.responseText);
        for(var i=0;i<data.length;i++) 
        {
          document.getElementById("company_name").value = data[i].name;
          document.getElementById("company_email").value = data[i].web;
        }
    }
}
xmlhttp.open("GET","formdata.php?q="+str,true);
xmlhttp.send();
}
</script>

和表单代码

    <select style="width:100%;" class="quform-tooltip chosen-select" id="company_select" name="company_select" title="Company Select" onChange="showUser(this.value)">
<option value="">Please select</option>
<?php
$userID = $user->getUserID();
$query = $user->database->query("SELECT * FROM tbl_businesses as business LEFT JOIN tbl_user_businesses as biz_user ON business.businessID = biz_user.businessID WHERE biz_user.userID ='$userID'");

while($row=$user->database->fetchArray($query))
{
    $bizID = $row['businessID'];
    $bizName = $row['businessName'];
    echo "<option value='$bizID'>$bizName</option>";
}?>
</select>

<input id="company_name" type="text" name="company_name" value="" />
<input id="company_email" type="text" name="company_name" value="" />

然后是我的formdata.php

    $q = intval($_GET['q']);

$sql="SELECT * FROM tbl_businesses WHERE businessID = '".$q."'";

$result = $user->database->query($sql);
$info = array();
while($row=$user->database->fetchArray($result))
{
    $cID = $row['businessID'];
    $cName = $row['businessName'];
    $cWeb = $row['businessWebsite'];
    $info[] = array( 'id' => $cID, 'name' => $cName, 'web' => $cWeb );
}
echo json_encode($info);?> 

这就是它,感谢charlietfl的帮助!

希望这有助于某人:)

答案 1 :(得分:0)

这是PHP和JQuery的一个例子。如果你不熟悉JQuery,我建议你在继续使用你的ajax之前花一些时间来深入了解它,它肯定会值得的。 JQuery使用getajax等方法对服务器执行异步请求。

现在,我们用来从服务器获取JSON数据的一些jquery。

var title = '.....'
$.getJSON('getActivite.php?title=' + title, null,
        function(data){
            $("#currentId").val(data.ID);
            $("#nomActivite").val(data.Nom);
            $("#Description").val(data.Description);
            $("#DateEvent").val(data.Date);
});     

$( “#currentId”)VAL(data.ID)。 ,这说:在DOM中找到id为currentId的元素,并将其值更改为从ajax调用接收的数据的属性ID。

在PHP方面,他们有

<?php
    header('Content-Type: application/json');

    mysql_connect("localhost","root") or die (" NOPE . [" . mysql_error() . "]");
    mysql_select_db("garderie");


    $title  = $_GET["title"]; // we received this from the json call


    $query = "  select a.ActiviteID as ActiviteID  , rtrim(a.Nom) as Nom, a.Description from activites a inner join .....' ";


    $result = mysql_query($query);       
    $ligne  = mysql_fetch_array($result);

    $data = array(
        'ID'            => $ligne["ActiviteID"],
        'Nom'           => $ligne["Nom"],
        'Description'   => $ligne["Description"],
        'Date'          => $date
    );

    mysql_close();

    echo (json_encode($data));
?>