JS动态添加的textbox提交表单时未被识别问题求助

Got it, let's figure out why your dynamic textboxes aren't showing up in form submissions—this is a super common issue, but easy to fix!

First, let's break down the most likely reasons your dynamic inputs aren't being picked up, and how to fix each one:

1. Your Dynamic Textboxes Aren't Inside the Form #

This is the #1 culprit. If you create the textbox but append it to a container outside your <form> tag, the browser won't include it in the submitted form data.

Here's how to fix that:

• First, make sure you have a container inside your form where you want to add the new textboxes (like a <div> with an id).
• Then, append your new textbox directly to that container.

Example code adjustment:

// Get the container that's INSIDE your form
const textboxContainer = document.getElementById('dynamic-textboxes');

// Create your textbox as you did before
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.setAttribute('name','description[]'); // Using [] is perfect for multiple inputs
textbox.setAttribute('class', 'form-control form-control2');
textbox.setAttribute('required', 'true');
textbox.setAttribute('placeholder', 'Describe Problem Encountered...');

// Append it to the form's container
textboxContainer.appendChild(textbox);

And your HTML form should look something like this:

<form method="POST" action="/your-submit-url">
  <!-- Initial textbox -->
  <input type="text" name="description[]" class="form-control form-control2" required placeholder="Describe Problem Encountered...">
  
  <!-- Container for dynamic textboxes -->
  <div id="dynamic-textboxes"></div>
  
  <button type="submit">Submit</button>
</form>

2. You're Using Duplicate id Attributes #

Your current code sets id='tasks' for every dynamic textbox. HTML requires ids to be unique across the page—while this might not directly break form submission, it can cause weird DOM behavior later. Let's fix that with a simple counter:

// Initialize a counter outside your click handler
let taskIdCounter = 1;

// Inside your click function:
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.setAttribute('name','description[]');
textbox.setAttribute('id', `tasks-${taskIdCounter}`); // Unique id each time
taskIdCounter++; // Increment for the next textbox
// ... rest of your attributes

3. If You're Using AJAX, Make Sure to Collect All Form Data #

If you're submitting the form via AJAX (instead of a standard page reload), don't just collect data from initial inputs—use FormData to capture everything, including dynamic elements:

const form = document.getElementById('your-form-id');
const formData = new FormData(form);

// You can verify the data includes dynamic inputs like this:
for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

// Then send formData via fetch or XMLHttpRequest
fetch('/your-submit-url', {
  method: 'POST',
  body: formData
});

4. Double-Check Server-Side Handling #

Once your frontend is fixed, make sure your server is set up to handle the array of values. For example, in PHP, you'd access the data with $_POST['description'] (which will be an array containing all values from initial and dynamic textboxes).

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