使用 getJSON 从表单提交中填充选择选项答案

【问题标题】：populate select options from form submit using getJSON使用 getJSON 从表单提交中填充选择选项
【发布时间】：2012-12-29 03:29:06
【问题描述】：

我在一个 html 页面上有两个表单，并希望使用第一个表单提交通过 php/mysql 查询从数据库中进行选择，并使用 JSON 进行编码以填充我的第二个表单上的选择选项，而无需离开页面。第一种形式和 php 正在发送数组，但第二种形式没有被填充。不知道我错过了什么，任何帮助表示赞赏。请参阅下面的 html、php 和查询...

HTML

<form method="post" action="find.php" id="find" >
    <div class="input-box">
        <label>Last Name</label>
        <input type="text" name="lname"/>
    </div>
    <div class="input-box">
        <label>Phone</label>
        <input type="text" name="phone" />
    </div>
    <div class="submit">
        <input type="submit" value="Select" />
    </div>
</form>
<div><h1>Checkin</h1></div>
<form method="post" action="checkin.php" id="contact-us">
<div id="contact-us-message"></div>
    <input type="hidden" name="date" id="date" />
    <select id="clients" name="clients">
    </select>
    <div class="submit">
        <input type="submit" value="Submit"  />
    </div>
</form>

PHP

$lastname = $_POST['lname'] ;
        $number = $_POST['phone'] ;
        $q = "select Site_ID, FirstName, LastName, Email, Phone, Message,     ParentName from ClientInfo where LastName = '$lastname' and Phone = '$number'";
        $sql = mysql_query($q);
        $data = array();
        while($row = mysql_fetch_array($sql, true)){
            $data[] = $row; 
        };
        echo json_encode($data);

脚本

<script type="text/javascript">
$("#find").submit(function(){
  $.getJSON('checkin.php',function(data){
    var items = '';
    $.each(data,function(name,value) {
        items += "<option type='text' value='"+value.Site_ID+"'>"+value.FirstName+" "+value.LastName+" </option>" ;
    });
    $("#clients").append(items);  
  });
});
</script>

编辑

好的，我修复了 id 问题，现在在提交时转到 php 页面并回显正确的数组。但它不应该离开 html 页面。有人知道为什么吗？

数组

[{"Site_ID":"10000007","FirstName":"Drew","LastName"...}]

【问题讨论】：

您的脚本与 HTML 完全无关，因为它仅适用于您的 HTML 中不存在的 ID 为“test”的元素。嗯，也许这就是问题的全部？
首先在浏览器控制台中检查 AJAX 请求以查看发送的内容以及返回的内容...如果有的话。如果您有 500 错误，则说明 php 代码有问题。为了将问题隔离到脚本或服务器代码，需要了解这些细节

标签： php jquery html json

【解决方案1】：

您的脚本仅适用于带有id="test" 的元素，而该元素在您的 HTML 中不存在。

【讨论】：

OP 提到了 2 个表单。提交处理程序显示代码以填充所示表单中的元素
一种是#find，另一种是#contact-us，都不是#test。
ahhh 是的...我只注意到第一个表单 html..我的错误

【解决方案2】：

根据我的说法，尝试尝试Divide and Conquer规则，我的意思是划分代码的每个部分并尝试找出，每个都可以正常工作（独立代码）。

关于php 代码的第一件事

$lastname = $_POST['lname'] ;  // change to some value
$number = $_POST['phone'] ; // change to some value
$q = "select Site_ID, FirstName, LastName, Email, Phone, Message,ParentName from ClientInfo where LastName = '".$lastname."' and Phone = '".$number."'";
$sql = mysql_query($q);
$data = array();
while($row = mysql_fetch_array($sql, true)){
$data[] = $row; 
};
echo json_encode($data);

首先，对您的查询进行正确的concatenation。然后检查您当前的php 代码encode 是否正确形成json？

如果您验证了上述代码，则转到您的javascript 代码并检查与html 代码相关的所有变量。如您所见

$("#test").submit(function(){

您提到了test id，但在您的html 代码中，它不存在。

【讨论】：