在下拉选择中，如何从数据库中填写完整的表单字段

Posted 2023-02-24

【中文标题】在下拉选择中，如何从数据库中填写完整的表单字段

【英文标题】：On Dropdown Selection, how to fill complete form fields from Database

【发布时间】：2015-08-29 19:07:33

【问题描述】：

如何根据从下拉列表中选择的值从数据库中填写完整的表单输入字段

示例：在应用程序中，通过选择客户名称，它会使用存储在数据库中的详细信息填充完整的表单输入字段。

Sample Code:
<select name="client">
 <option value="">-- Select Client Name -- </option>
 <option value="1">John</option>
 <option value="2">Smith</option>                               
</select>

<input name="phone" type="text" value="">
<input name="email" type="text" value="">
<input name="city" type="text" value="">
<textarea name="address"></textarea>

所有关于输入字段都需要填写客户端名称选择的值。

---

编辑：

我尝试使用 AJAX，但无法从文件中获取特定变量...下面是我的代码：

<script>
    $(document).ready(function() 
        $('#client').change(function() 
            alert();
            var selected = $(this).find(':selected').html();

            $.post('get_details.php', 'client': selected, function(data) 
                $('#result').html(data);
            );
        );
    );
</script>

在get_details.php 文件中，我将不同的值存储在不同的变量中，但我不明白如何将它们放到主页的单个变量中。

【问题讨论】：

使用 Ajax。 Jquery 很简单。

到目前为止，您为实现目标做了哪些尝试？

尝试使用 ajax 但无法从文件中获取特定变量...下面是我的代码 在 get_details.php 文件中我将不同的值存储在不同的变量中，但我不明白如何将它们获取到主页的单个变量

你需要添加上面格式化的代码，它非常不可读。假设您的 php 正确返回，您需要设置相关输入的值：api.jquery.com/val。我不确定您期望 $('#result') 做什么，这与您的 html 中的任何内容都无关。

我不知道如何使用 jquery 来帮助你，但如果你对实际的 ajax 代码没问题，我可以提供帮助。

【参考方案1】：

这只是一个基本的 jQuery 示例，它调用自身（脚本的顶部在生成 $_POST 时处于活动状态），我将其命名为 index.php，如url 的 jQuery AJAX。如果需要，您可以使用两个单独的页面来执行此操作。只需将 PHP 从 HTML/javascript 中分离出来并更改 url: '/index.php':

<?php
// This is where you would do any database call
if(!empty($_POST)) 
    // Send back a jSON array via echo
    echo json_encode(array("phone"=>'123-12313',"email"=>'[e-mail]','city'=>'Medicine Hat','address'=>'556 19th Street NE'));
    // Exit probably not required if you
    // separate out your code into two pages
    exit;

?>

<form id="tester">
    <select name="client" id="client">
        <option value="">-- Select Client Name -- </option>
        <option value="1">John</option>
        <option value="2">Smith</option>                               
    </select>
    <input name="phone" type="text" value="">
    <input name="email" type="text" value="">
    <input name="city" type="text" value="">
    <textarea name="address"></textarea>
</form>

<!-- jQuery Library required, make sure the jQuery is latest -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(document).ready(function() 
        // On change of the dropdown do the ajax
        $("#client").change(function() 
            $.ajax(
                    // Change the link to the file you are using
                    url: '/index.php',
                    type: 'post',
                    // This just sends the value of the dropdown
                    data:  client: $(this).val() ,
                    success: function(response) 
                        // Parse the jSON that is returned
                        // Using conditions here would probably apply
                        // incase nothing is returned
                        var Vals    =   JSON.parse(response);
                        // These are the inputs that will populate
                        $("input[name='phone']").val(Vals.phone);
                        $("input[name='email']").val(Vals.email);
                        $("input[name='city']").val(Vals.city);
                        $("textarea[name='address']").val(Vals.address);
                    
            );
        );
    );
</script>

【讨论】：

感谢@Rasclatt，它有效！！

没问题！确保将您的问题标记为已回答，这样您就不会有人来尝试解决已经解决的问题。干杯

@Aswathy 你是什么意思？如前所述，我的示例正在调用自身。当 Ajax 运行时，它会调用自己，因为它发送一个 post 请求，所以页面的顶部（php 部分）运行然后退出，因此页面的其余部分也不会运行并弄乱 json。

@Aswathy 另外，这并不是一件很常见的事情，但它确实有效。我建议调用不同的页面，除非你正在重写。

好的..好的...谢谢您的回复。这是我粗心的错误..对不起..:)

【参考方案2】：

当您让 ajaxCall 以 json 格式返回数据时，例如

json_encode(array("phone"=>'123-12313',"email"=>'[e-mail]','city'=>'Medicine Hat','address'=>'556 19th Street NE'));

如上图

然后在 jQuery 中解析它并将值放在不同的选择器中，例如

 var Vals    =   JSON.parse(response);
 // These are the inputs that will populate
 $("input[name='phone']").val(Vals.phone);

如上所示。

【讨论】：

你为什么要复制我的部分答案？？真是个奇怪的人。逐字逐句复制，那就更糟了！

我为 OP 做了很多注释，我不认为你的补充比我写的更清楚......