时间戳

首页 > 解决方案 > 使用对数据库表的查询结果填充 html 表单选择元素

php - 使用对数据库表的查询结果填充 html 表单选择元素

问题描述

我正在尝试制作一个包含文本输入和下拉选择元素的表单。目标是能够在文本框中输入将在查询中使用的客户姓氏的文本。然后需要将查询的结果放在选择下拉框中以供进一步使用，其中值为 custID，文本是客户的名字和姓氏，可能还有电话号码。到目前为止，每当我运行它并输入任何值时，无论我输入什么，我都只会在我的警报框中得到 data[] 和 status:succesful 。

这是我一直在玩的表单和ajax。

    <form  method="post" class="form-container" >
                <input type="text" name="lName" id="lName" placeholder="Last name" 
                onkeyup="showCustomer(this.value)"><br>
                <select id = "custSelect" name="custSelect0" onchange="show(this)">
                <option value="">-- Select Customer--</option>
            </select><br>
    </form>
<script>

    function showCustomer(str) {
          //alert("click");
          var LastName = str;
          var ele = document.getElementById('custSelect');
       //alert (LastName);
       $.ajax({
            url:"getcustomer.php",
            type:"POST",
            data:{customer:LastName},

            success:function(data, status){
                alert("Data: " + data + "\nStatus: " + status);
                //alert("Search succesful")
                    /*  $.each(data, function(i,item)) {
                          // POPULATE SELECT ELEMENT WITH JSON.
                          ele.innerHTML = ele.innerHTML +
                              '<option value="' + data[i]['custId'] + '">' + data[i]['fname'] + ' ' + data[i]['lname'] + '</option>';
                      }*/
            }
          })
        }

        function show(ele) {
          // GET THE SELECTED VALUE FROM <select> ELEMENT AND SHOW IT.
          var msg = document.getElementById('msg');
          msg.innerHTML = 'Selected Customer: <b>' + ele.options[ele.selectedIndex].text + '</b> </br>' +
              'ID: <b>' + ele.value + '</b>';
}
    </script>

这是我用来访问数据库并进行查询的 php 文件。它正在使用 PDO。

<?php

      require_once "configPDO.php";
    if(isset($_POST['customer'])){
      $customer = $_POST['customer'];
    
    
    $data = array();
    
    $sql = "SELECT *
    FROM `customers`
    WHERE `LastName`
    LIKE '$customer'";
    
    $statement = $connect->prepare($sql);
    //$statement->bind_param("s", $_GET['q']);
    $statement->execute();
    $result = $statement->fetchAll();
    
    foreach($result as $row){
      $data[] = array(
        'custId' => $row["Cust_ID"],
        'fname' => $row["FirstName"],
        'lname' => $row["LastName"],
        'phone' => $row["PhoneNumber"],
        'altPhone' => $row["AltPhone"]
      );
    }
    
    echo json_encode($data);
    }
    
    ?>

标签： phphtmljqueryajaxdynamic

解决方案

在使用此视频 https://www.youtube.com/watch?v=RcW8mMiIexc中的信息进行一些建议的更改 并更正要搜索的表格的拼写后，我已经能够将结果返回到形式。

<?php
      require_once "/home/users/web/b1240/dom.heather93124/public_html/resources/configPDO.php";
    if(isset($_POST['customer'])){
        $customer = $_POST['customer'];
    
        $data = array();
    
        try{
          $sql = "SELECT * FROM `Customer` WHERE `LastName` LIKE :customer";
          $customer = "%$customer%";
          $stmt = $connect->prepare($sql);
          $stmt->bindValue(':customer', $customer);
          $stmt->execute();
          while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            $data[] = array(
              'custId' => $row["Cust_ID"],
              'fname' => $row["FirstName"],
              'lname' => $row["LastName"],
              'phone' => $row["PhoneNumber"],
              'altPhone' => $row["AltPhone"]
            );
            }
    
        echo json_encode($data);
        }catch(Exception $e){
          echo $e-getMessage();
        }
    }
    ?>

推荐阅读