HTML下拉框联动文本表单及PHP条件语句的功能异常求助

Got it, let's get this sorted out! The core issue here is that your text input's name attribute is static, so we need to dynamically update it whenever the user picks a different option from the dropdown. JavaScript is exactly what we need for this job—let's walk through the fix step by step:

Step 1: Add Unique IDs to Form Elements #

First, we'll add IDs to the dropdown and text input so JavaScript can easily target and modify them:

<form target="_blank" action="results.php" method="post"> 
  <select name="attr" id="attr-select"> 
    <option value="name">Name</option> 
    <option value="age">Age</option> 
  </select> 
  <input type="text" id="dynamic-input" name="name"> 
  <input type="submit" name="submit" value="View Results"> 
</form>

Step 2: Add JavaScript to Sync Input Name with Dropdown Selection #

Next, we'll add a script that listens for changes to the dropdown and updates the text input's name attribute in real time. We'll also set the initial state to match the default dropdown option:

// Wait for the page to fully load before running the script
document.addEventListener('DOMContentLoaded', function() {
  // Grab references to our form elements
  const attrDropdown = document.getElementById('attr-select');
  const textInput = document.getElementById('dynamic-input');

  // Function to update the input's name and optional placeholder
  function syncInputName() {
    textInput.name = attrDropdown.value;
    // Optional: Make the UI clearer by updating the input placeholder
    textInput.placeholder = `Enter ${attrDropdown.options[attrDropdown.selectedIndex].text}`;
  }

  // Set the initial input name when the page loads
  syncInputName();

  // Listen for dropdown changes and trigger the update function
  attrDropdown.addEventListener('change', syncInputName);
});

Step 3: Simplify Your results.php Logic (Optional but Cleaner) #

Now that the input's name matches the selected attribute, you can streamline your PHP code to use the attr value from the dropdown to fetch the correct parameter:

if (isset($_POST['submit'])) {
  $selectedAttribute = $_POST['attr'];
  $inputValue = $_POST[$selectedAttribute]; // This will pull either $_POST['name'] or $_POST['age']

  // Build your database query here (always use prepared statements to avoid SQL injection!)
  // Example: $query = "SELECT * FROM your_table WHERE $selectedAttribute = ?";
}

Full Working Code Example #

Here's the complete HTML with integrated JavaScript, ready to use:

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Input Attribute Selector</title>
</head>
<body>
  <form target="_blank" action="results.php" method="post"> 
    <select name="attr" id="attr-select"> 
      <option value="name">Name</option> 
      <option value="age">Age</option> 
    </select> 
    <input type="text" id="dynamic-input" name="name"> 
    <input type="submit" name="submit" value="View Results"> 
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const attrDropdown = document.getElementById('attr-select');
      const textInput = document.getElementById('dynamic-input');

      function syncInputName() {
        textInput.name = attrDropdown.value;
        textInput.placeholder = `Enter ${attrDropdown.options[attrDropdown.selectedIndex].text}`;
      }

      syncInputName();
      attrDropdown.addEventListener('change', syncInputName);
    });
  </script>
</body>
</html>

Quick Notes: #

• We use DOMContentLoaded to ensure the script only runs after all page elements are loaded, preventing errors from targeting non-existent elements.
• The optional placeholder update makes the UI more intuitive for users, letting them know exactly what to enter based on their selection.
• Critical Reminder: Never directly insert user input into SQL queries without using prepared statements—this protects your database from SQL injection attacks.

内容的提问来源于stack exchange，提问作者Hopeless Coder 99