如何自动填充文本框取决于下拉列表中的选择选项

时间:2018-04-05 11:04:46

标签: php mysql ajax

我创建了一个IMS系统。因为我必须在订单页面和订单页面上创建帐单,当我从下拉菜单中选择客户名称而不是customer_address时,customer_phone和gst号码应该自动填写文本框。在数据库中我创建了一个名为partys的表,其中所有数据都是可用(Customer_name,Customer_address,customer_phone和gst)如果有人知道解决方案,请帮助。以下是我的代码

                    <div class="form-group">
                    <label for="gross_amount" class="col-sm-5 control-label" style="text-align:left;">Customer Name</label>
                    <div class="col-sm-7">
                      <select name="customer_name" id="client" style="width:100%;">
                    <?php
                      $dbc = mysqli_connect('localhost', 'root', '', 'stock')
                        or die('Error connecting to MySQL server.');
                      $query = "SELECT * FROM partys";
                      $result = mysqli_query($dbc, $query);
                      while ($row = mysqli_fetch_array($result)) {
                    ?>
                      <option value="<?php echo $row['party_name'] ?>"><?php echo $row['party_name'] ?></option>
                    <?php } ?>
                    </select>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="gross_amount" class="col-sm-5 control-label" style="text-align:left;">Customer Address</label>
                    <div class="col-sm-7">
                      <input type="text" class="form-control" id="customer_address" name="customer_address" placeholder="Enter Customer Address" autocomplete="off">
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="gross_amount" class="col-sm-5 control-label" style="text-align:left;">Customer Phone</label>
                    <div class="col-sm-7">
                      <input type="text" class="form-control" id="customer_phone" name="customer_phone" placeholder="Enter Customer Phone" autocomplete="off">
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="gstin" class="col-sm-5 control-label" style="text-align:left;">GSTIN</label>
                    <div class="col-sm-7">
                      <input type="text" class="form-control" id="gstin" name="gstin" placeholder="Enter GST Number" autocomplete="off">
                    </div>
                  </div>
<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: '/create.php',
                    type: 'post',
                    // This just sends the value of the dropdown
                     data: {customer_name : party_name},
                     dataType: 'json',
                    success: function(response) {
                        // Parse the jSON that is returned
                        // Using conditions here would probably apply
                        // incase nothing is returned
                        var response    =   JSON.parse(response);
                        // These are the inputs that will populate
                        $("#customer_address").val(response.customer_address);
                        $("#customer_phone").val(response.customer_phone);
                        $("#gstin").val(response.gstin);
                    }
            });
        });
    });
</script>

1 个答案:

答案 0 :(得分:0)

创建单独的php文件作为customer.php并编写以下代码

$content = file_get_contents("php://input");
$customer_data = json_decode($content, true);
$customer_name  = $customer_data['customer_name'];

//using mysql query fetch all data of particular customer
$query = mysqli_query($dbc,"SELECT * FROM partys WHERE party_name=$customer_name");
$result = mysqli_fetch_array($query);

echo json_encode($result);   

在ajax调用中获取此警报json响应后。这将提供客户数据。

并将您的ajax调用修改为

<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: 'customer.php',
                type: 'post',
                // This just sends the value of the dropdown
                 data: {customer_name : party_name},
                 dataType: 'json',
                success: function(response) {
                    alert(response);
                    // Parse the jSON that is returned
                    // Using conditions here would probably apply
                    // incase nothing is returned
                    var response    =   JSON.parse(response);
                    // These are the inputs that will populate
                    $("#customer_address").val(response.customer_address);
                    $("#customer_phone").val(response.customer_phone);
                    $("#gstin").val(response.gstin);
                }
        });
    });
});