如何将text-box的值传递至combo-box？基于HTML/CSS/PHP的Web应用实现

Alright, let's figure out how to take the value from your text input and add it to your combo box (the select element) — while keeping the existing database-driven options intact. Here's a solution that fits your current code structure, with both traditional form submission and optional AJAX for a smoother experience:

Step 1: Backend PHP Handling (Traditional Form Submission) #

First, we'll handle the form submission to save the new item name to your database, then fetch all items (including the new one) to populate the combo box.

Add this PHP code at the top of your page (before any HTML):

<?php
// Replace these with your actual database credentials
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "your_db_name";

// Create database connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Handle form submission when "Add" is clicked
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST['name'])) {
    $newItem = trim($_POST['name']);
    
    // Use prepared statements to prevent SQL injection
    $stmt = $conn->prepare("INSERT INTO your_items_table (item_name) VALUES (?)");
    $stmt->bind_param("s", $newItem); // "s" means string type
    $stmt->execute();
    $stmt->close();
}

// Fetch all items from the database (including the new one)
$itemsResult = $conn->query("SELECT item_name FROM your_items_table");
$conn->close();
?>

Step 2: Update the HTML Select Element #

Modify your existing <select> to dynamically render all database items (including the newly added one):

<form method="post">
  <div class="form-group">
    <label for="text">Item Name</label>
    <select class="form-control show-tick" name="ItemName" id="ItemName" required>
      <option value="">Please select</option>
      <?php
      // Loop through the database results and add options to the select
      if ($itemsResult->num_rows > 0) {
          while($row = $itemsResult->fetch_assoc()) {
              // Use htmlspecialchars to prevent XSS attacks
              $safeItemName = htmlspecialchars($row['item_name']);
              echo "<option value='$safeItemName'>$safeItemName</option>";
          }
      }
      ?>
    </select><br>
    <div>
      <table>
        <tr>
          <td style="border: 7px solid transparent"><label for="text">Add Item Name :</label></td>
          <td style="border: 5px solid transparent"><input type="text" name="name" id="name" class="form-control"></td>
          <td style="border: 5px solid transparent"><button type="submit" class="btn btn-info">Add</button></td>
        </tr>
      </table>
    </div>
  </div>
</form>

Key Notes for Security & Reliability #

• SQL Injection Prevention: Always use prepared statements (like we did above) instead of directly concatenating user input into SQL queries. This stops malicious actors from manipulating your database.
• HTML Escaping: The htmlspecialchars() function ensures that any special characters in the item name don't break your HTML or lead to XSS attacks.
• Avoid Duplicates: Add a UNIQUE constraint to your item_name column in the database to prevent duplicate entries. Example table setup:

  CREATE TABLE your_items_table (
      id INT AUTO_INCREMENT PRIMARY KEY,
      item_name VARCHAR(255) NOT NULL UNIQUE
  );
  

Optional: No-Refresh Addition with AJAX #

If you want to add the item without reloading the page, use AJAX (we'll use jQuery for simplicity):

1. Add jQuery to your page (place this before the closing </body> tag):

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <script>
   $(document).ready(function() {
       $('form').submit(function(e) {
           e.preventDefault(); // Stop the form from reloading the page
           const newItem = $('#name').val().trim();
           
           if (!newItem) {
               alert("Please enter an item name first!");
               return;
           }
           
           // Send the new item to a separate PHP file
           $.ajax({
               url: "add_item.php",
               method: "POST",
               data: { name: newItem },
               success: function(response) {
                   if (response === "success") {
                       // Add the new option to the select box
                       const safeItem = $('<option>').val(newItem).text(newItem);
                       $('#ItemName').append(safeItem);
                       $('#name').val(''); // Clear the input field
                   } else {
                       alert("Failed to add item: " + response);
                   }
               },
               error: function() {
                   alert("Something went wrong connecting to the server.");
               }
           });
       });
   });
   </script>
   

2. Create a new file add_item.php to handle the AJAX request:

   <?php
   $servername = "localhost";
   $username = "your_db_username";
   $password = "your_db_password";
   $dbname = "your_db_name";
   
   $conn = new mysqli($servername, $username, $password, $dbname);
   if ($conn->connect_error) {
       die("Connection failed: " . $conn->connect_error);
   }
   
   if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST['name'])) {
       $newItem = trim($_POST['name']);
       $stmt = $conn->prepare("INSERT INTO your_items_table (item_name) VALUES (?)");
       $stmt->bind_param("s", $newItem);
       
       if ($stmt->execute()) {
           echo "success";
       } else {
           echo $stmt->error; // Return error message for debugging
       }
       $stmt->close();
   } else {
       echo "Invalid input";
   }
   $conn->close();
   ?>
   

Choose the traditional form submission if you want a simple setup, or AJAX if you prefer a more seamless user experience.

内容的提问来源于stack exchange，提问作者user9282052