如何实现选中Other时显示必填文本框并写入同一张数据库表？

Let's break this down into manageable parts to hit all three of your requirements. I'll provide full working code with clear explanations:

1. Update the HTML Form #

First, we’ll add the hidden text input for "Other" country and tweak the existing select element to accommodate the new field:

<form action="submit.php" method="post" id="countryForm">
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <select class="form-control" name="country" id="country" required>
        <option value="">Please select your country</option>
        <option value="A">Country A</option>
        <option value="B">Country B</option>
        <option value="C">Country C</option>
        <option value="Other">Other</option>
      </select>

      <!-- Hidden "Other" input container, shows only when needed -->
      <div id="otherCountryContainer" style="display: none; margin-top: 10px;">
        <input type="text" class="form-control" name="other_country" id="other_country" placeholder="Enter your country name">
      </div>

      <button type="submit" class="btn btn-gpsingh" style="margin-top: 10px;">Next</button>
    </div>
  </div>
</form>

2. Add JavaScript for Show/Hide & Required Validation #

We’ll use vanilla JavaScript to listen for dropdown changes, toggle the input’s visibility, and dynamically set the required attribute to enforce validation only when the input is visible:

document.addEventListener('DOMContentLoaded', function() {
  const countrySelect = document.getElementById('country');
  const otherContainer = document.getElementById('otherCountryContainer');
  const otherInput = document.getElementById('other_country');

  // Handle dropdown selection changes
  countrySelect.addEventListener('change', function() {
    if (this.value === 'Other') {
      otherContainer.style.display = 'block';
      otherInput.setAttribute('required', 'required');
    } else {
      otherContainer.style.display = 'none';
      otherInput.removeAttribute('required');
      // Clear leftover input values when hiding the field
      otherInput.value = '';
    }
  });

  // Optional: Add custom submit validation for extra safety
  document.getElementById('countryForm').addEventListener('submit', function(e) {
    if (countrySelect.value === 'Other' && !otherInput.value.trim()) {
      e.preventDefault();
      alert('Please enter your country name');
      otherInput.focus();
    }
  });
});

3. Backend Handling (Example with PHP) #

Assuming your database table has a country column (or you can add an other_country column for clarity), here’s how to save the data to the same table:

<?php
// Establish database connection (update credentials to match your setup)
$conn = new mysqli('localhost', 'your_username', 'your_password', 'your_database');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $selectedCountry = $_POST['country'];
  $otherCountry = $_POST['other_country'] ?? '';

  // Option 1: Store the actual country name (use custom input if "Other" is selected)
  $finalCountry = ($selectedCountry === 'Other') ? $otherCountry : $selectedCountry;
  $stmt = $conn->prepare("INSERT INTO your_table_name (country) VALUES (?)");
  $stmt->bind_param("s", $finalCountry);

  // Option 2: Store both values in separate columns (if your table has `country` and `other_country`)
  // $stmt = $conn->prepare("INSERT INTO your_table_name (country, other_country) VALUES (?, ?)");
  // $stmt->bind_param("ss", $selectedCountry, $otherCountry);

  $stmt->execute();
  $stmt->close();
  $conn->close();

  // Redirect to success page or show confirmation
  header('Location: success.php');
  exit;
}
?>

Key Notes: #

• The input starts hidden with display: none and only becomes visible when "Other" is selected.
• We dynamically toggle the required attribute so browsers enforce validation only when the input is active.
• The custom submit validation adds a safety net in case browser-level validation is bypassed.
• Choose the database storage option that fits your schema—either store the actual country name directly, or keep both the selected option and custom input in separate columns for traceability.

内容的提问来源于stack exchange，提问作者ph-abdallah