HTML表单提交时仅发送"Send"而非用户输入的问题求助

Hey there! Let's dig into why your form is only sending the text "Send" instead of the user's actual input—this is a common gotcha, so we'll fix it step by step.

Common Causes & Fixes #

• Missing name attributes on input elements
  This is the most likely culprit. HTML form elements require a name attribute to be included in the submitted data. If your input fields don't have a name, they won't send any data to the server—while if your submit button has a name attribute, its text ("Send") will get sent instead.

  Example of incorrect code:

  <form method="POST" action="/your-endpoint">
    <input type="text" placeholder="Enter your message"> <!-- No name attribute! -->
    <button type="submit" name="submission">Send</button> <!-- This sends submission=Send -->
  </form>
  

  Fix it by adding name attributes to all inputs you want to submit, and remove unnecessary name from the submit button unless you need it for logic:

  <form method="POST" action="/your-endpoint">
    <input type="text" name="user_message" placeholder="Enter your message"> <!-- Now this will send user_message=[input value] -->
    <button type="submit">Send</button> <!-- No name, so it won't add extra data -->
  </form>
  

• Hardcoded value on input elements
  Double-check if any of your input fields have a fixed value="Send" attribute. Even if users type something, if the field is set to readonly or your JS isn't updating the value correctly, it might stick to the hardcoded text.

  Example to avoid:

  <input type="text" name="user_message" value="Send" readonly> <!-- Stuck on "Send" -->
  

• JavaScript interfering with form submission
  If you're using JS to handle form submission (like AJAX), make sure you're not accidentally overwriting the form data. For example, if you're manually creating a FormData object and setting all values to "Send", that's obviously going to cause issues.

  Check your submit event listeners for code like this:

  document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(this);
    formData.set('all_data', 'Send'); // This would overwrite your input data!
    // ... rest of submission code
  });
  

Quick Checklist #

• Confirm every input/textarea/select you want to submit has a unique name attribute.
• Remove name from your submit button unless you need to track which button was clicked.
• Verify no input fields have hardcoded value attributes that override user input.
• Audit any JS handling form submission to ensure it's correctly collecting input values.

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