如何用一个按钮提交多个表单？Handlebars场景实现问题

Hey there, let's tackle this issue with your Handlebars-rendered forms. I see you're looping through listRecords to generate multiple unique forms, but haven't found a solution that fits your exact scenario. Since you didn't specify the exact problem you're hitting (like submission conflicts, context errors, or data handling issues), I'll walk through common pain points and fixes for this setup:

1. Fixing Context Ambiguity & Unique Identifiers #

First, let's refine your template to make dynamic values clearer and avoid context confusion. Handlebars' ../ can be tricky in nested loops, so explicitly referencing this for the current record's properties helps prevent bugs:

<ul>
  {{#each listRecords}}
    <form id="form-{{this.id}}" action="/expand-list-records-save/{{../listId}}/{{this.id}}" method="POST" class="record-form">
      <div class="record-box">
        <li>{{this.recordTitle}} by {{this.artistName}} ({{this.releaseYear}})
          <br>
          <div>
            <label>Paste media embed code here:</label>
            <!-- Example input tied to the specific form -->
            <textarea name="embedCode" form="form-{{this.id}}" required></textarea>
          </div>
          <button type="submit">Save Record</button>
        </li>
      </div>
    </form>
  {{/each}}
</ul>

• Using this.id removes ambiguity about which record's ID you're referencing
• Adding a shared record-form class makes it easy to target all forms with JavaScript later
• The form attribute on the textarea ensures it's linked to the correct form, even if structure changes

2. Handling AJAX Submissions (No Page Reload) #

If you want to submit forms without refreshing the page, here's a vanilla JavaScript snippet that works seamlessly with your template:

document.addEventListener('DOMContentLoaded', function() {
  // Target all dynamically rendered forms
  const forms = document.querySelectorAll('.record-form');
  
  forms.forEach(form => {
    form.addEventListener('submit', function(e) {
      e.preventDefault(); // Stop default browser submission
      
      const formData = new FormData(this);
      const submitUrl = this.action;
      
      // Send data to your backend
      fetch(submitUrl, {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        // Handle success (e.g., show a confirmation message)
        alert(`Record ${this.id.split('-')[1]} saved successfully!`);
        this.reset(); // Clear the form input
      })
      .catch(error => {
        console.error('Error saving record:', error);
      });
    });
  });
});

3. Avoiding Duplicate Form Issues #

If you're seeing duplicate IDs or form data bleeding between records, double-check:

• Your listRecords array doesn't have duplicate id values
• You're not reusing the same form element template outside the {{#each}} loop
• Handlebars is correctly re-rendering the list when listRecords updates (if using a framework like Ember or a custom state manager)

If you're facing a specific problem (like form data not being passed to the backend, validation errors, or something else), let me know and I can tailor this solution further!

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