在输入信息并将信息传递到多个 HTML 表单元素时进行搜索

问题描述 投票：0回答：1

我已经设法抄近路到目前为止了！

我有一个客户数据库。我有这个漂亮的 HTML 表单需要填写。当我点击提交时，它会在服务器上填充一个可填写的 PDF。

当您开始输入名称时，它会显示所有结果，您可以单击其中之一，它会填充 HTML 字段的 NAME 部分。但只有名字。我希望它填充所有 HTML 元素。 （也许不是复选框）。

这是我的 HTML 表单，名为 search.php

<!DOCTYPE html>
<html>
<head>
   <title>Deer Processing</title>
   <!-- jQuery library is required. -->
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <!-- Include our script file. -->
   <script type="text/javascript" src="script.js"></script>
   <!-- Include the CSS file. -->
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Search box. 
   <input type="text" id="search" placeholder="Search" /> -->
   
   
  <div id="registration-form">
  <div class='fieldset'>
  <legend>Deer Processing Form</legend>
    <form action="formFiller.php" method="post">
      <div class='row'>
        <label for="Name_textbox"></label>
        <input type="text" id="search" name="Name_textbox" placeholder="Name">
      </div>
      <div>
        <label for="Address_textbox"></label>
        <input type="text" id="address" name="Address_textbox" placeholder="Address">
      </div>
      <div>
        <label for="CityState_textbox"></label>
        <input type="text" name="CityState" placeholder="City, State">
      </div>
      <div>
        <label for="Zip_textbox"></label>
        <input type="text" name="Zip_textbox" placeholder="Zip Code">
      </div>
      <div>
        <label for="CellPhone_textbox"></label>
        <input type="text" name="CellPhone_textbox" placeholder="Cell Phone">
      </div>
      <div>
        <input type="checkbox" name="Checkbox_1_checkbox">
        <label for="Checkbox_1_checkbox">Receive Text Message</label>
      </div>
      <div>
        <label for="SecondaryPhone_textbox"></label>
        <input type="text" name="SecondaryPhone_textbox" placeholder="Mandatory Phone">
      </div>
      

      <input type="submit">
    <div id="display"></div>
    </form>
    </div></div>
   
   
   
   <br>
   <b>Example: </b><i>Emily Anderson, Liam Johnson, Sophia Martinez, Ethan Thompson, Olivia Davis</i>
   <br />
   <!-- Suggestions will be displayed in the following div. -->
   <div id="display"></div>
</body>
</html>

这是我的 AJAX.PHP 文件。

<?php
// Include the database configuration file.
include "db.php";
// Retrieve the value of the "search" variable from "script.js".
if (isset($_POST['search'])) {
   // Assign the search box value to the $Name variable.
   $Name = $_POST['search'];
   // Define the search query.
   $Query = "SELECT Name, Address, CityState FROM customers WHERE Name LIKE '%$Name%' LIMIT 50";
   // Execute the query.
   $ExecQuery = MySQLi_query($con, $Query);
   // Create an unordered list to display the results.
   echo '
<ul>
   ';
   // Fetch the results from the database.
   while ($Result = MySQLi_fetch_array($ExecQuery)) {
       ?>
   <!-- Create list items.
        Call the JavaScript function named "fill" found in "script.js".
        Pass the fetched result as a parameter. -->
   <li onclick='fill("<?php echo $Result['Name']; ?>")'>
   <a>
   <!-- Display the searched result in the search box of "search.php". -->
       <?php echo $Result[0]; ?><?php echo", "; ?>
       <?php echo $Result[1]; ?><?php echo", "; ?>
       <?php echo $Result[2]; ?>
   </li></a>
   <!-- The following PHP code is only for closing parentheses. Do not be confused. -->
   <?php
}}
?>
</ul>

这是我的 script.js 文件。

// Retrieve the value from "ajax.php".
function fill(Value) {
   // Assign the value to the "search" div in "search.php".
   $('#search').val(Value);
   // Hide the "display" div in "search.php".
   $('#display').hide();
}

$(document).ready(function() {
   // When a key is pressed in the "Search box" of "search.php", this function will be called.
   $("#search").keyup(function() {
       // Assign the search box value to a JavaScript variable named "name".
       var name = $('#search').val();
       // Validate if "name" is empty.
       if (name == "") {
           // Assign an empty value to the "display" div in "search.php".
           $("#display").html("");
       }
       // If the name is not empty.
       else {
           // Initiate an AJAX request.
           $.ajax({
               // Set the AJAX type as "POST".
               type: "POST",
               // Send data to "ajax.php".
               url: "ajax.php",
               // Pass the value of "name" into the "search" variable.
               data: {
                   search: name
               },
               // If a result is found, this function will be called.
               success: function(html) {
                   // Assign the result to the "display" div in "search.php".
                   $("#display").html(html).show();
               }
           });
       }
   });
});

as you type John it finds all johns but it only passes his name to the form, no his address and city/state

我希望在您点击您喜欢的搜索结果后，让它填充地址和城市状态。 （我也有两部手机和其他信息，但一次只做一件事）。

javascript php mysql ajax
1个回答
0
投票

要解决您的问题，您可以通过带有适当分隔符的ajax返回数据（名称，地址，城市州），然后处理选择框更改时的ajax返回）

因此，

(1) 请在您的CityState输入框中添加ID，以便更改

<input type="text" name="CityState" placeholder="City, State">

到

<input type="text" id="CityState" name="CityState" placeholder="City, State">

(2) 然后，修改你的 ajax.php 

 echo '
<ul>
   ';
   // Fetch the results from the database.
   while ($Result = MySQLi_fetch_array($ExecQuery)) {
       ?>
   <!-- Create list items.
        Call the JavaScript function named "fill" found in "script.js".
        Pass the fetched result as a parameter. -->
   <li onclick='fill("<?php echo $Result['Name']; ?>")'>
   <a>
   <!-- Display the searched result in the search box of "search.php". -->
       <?php echo $Result[0]; ?><?php echo", "; ?>
       <?php echo $Result[1]; ?><?php echo", "; ?>
       <?php echo $Result[2]; ?>
   </li></a>
   <!-- The following PHP code is only for closing parentheses. Do not be confused. -->
   <?php
}

到

 echo '
<select id=ajaxreturn onchange="javascript:fill();">
<option value="">Please select
   ';
   // Fetch the results from the database.
   while ($Result = MySQLi_fetch_array($ExecQuery)) {
       ?>
   <!-- Create list items.
        Call the JavaScript function named "fill" found in "script.js".
        Pass the fetched result as a parameter. -->
<option value="<?php echo $Result[0]; ?><?php echo"||"; ?><?php echo $Result[1]; ?><?php echo"||"; ?><?php echo $Result[2]; ?>
  ">
   <!-- Display the searched result in the search box of "search.php". -->
       <?php echo $Result[0]; ?><?php echo", "; ?>
       <?php echo $Result[1]; ?><?php echo", "; ?>
       <?php echo $Result[2]; ?>
   </option>
   <!-- The following PHP code is only for closing parentheses. Do not be confused. -->
   <?php
}

(3) 最后，将 fill JS 函数修改为：

function fill() {
   // Assign the value to the "search" div in "search.php".
//   $('#search').val(Value);

var strUser = document.getElementById("ajaxreturn").value;

if (strUser!="")
{
const myArray = strUser.split("||");

   $('#search').val(myArray[0]);
   $('#address').val(myArray[1]);
   $('#CityState').val(myArray[2]);

   $('#display').hide();
}

}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.