在下拉选择，如何填补完整的数据库表单字段 [英] On Dropdown Selection, how to fill complete form fields from Database

问题描述

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

How to fill the complete form input fields from Database based on the value selected from the Dropdown

实施例：在一个应用中，通过选择一客户端名称它填补与存储在数据库中的信息的完整的形式输入字段

Example: In a Application, by selecting a client name it fills the complete form input fields with the details stored in the Database.

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>

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

All the about input fields need to be filled with values on client name selection.

编辑：

我试着用AJAX，但也没能得到从文件中特定的变量...以下是我的code：

I tried with AJAX but couldn't able get the particular variable from the file... below is my code:

<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 文件我存储在不同的变量值不同，但我不明白如何让他们到各个变量主页。

In the get_details.php file I am storing different values in different variables, but I didn't understand how to get them to individual variable to main page.

推荐答案

这是一个只是一个基本的jQuery的例子，称自己，我有一个名为的index.php 作为在网​​址 jQuery的AJAX的指示。您可以使用两个单独的页面，如果你想这样做。刚分离出的PHP从HTML / Javascript和修改 URL：的index.php：

This is a just a basic jQuery example that calls itself, which I have named index.php as indicated in the url of the jQuery AJAX. You can use two separate pages to do this if you want. Just separate out the PHP from the HTML/Javascript and change the 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 Libraries required -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.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>

这篇关于在下拉选择，如何填补完整的数据库表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！