如何从导航选项卡中收集信息并以单个表单的形式提交

<div class="tabs">
  <button class="tab-button active" data-tab="tab1">Tab 1</button>
  <button class="tab-button" data-tab="tab2">Tab 2</button>
  <button class="tab-button" data-tab="tab3">Tab 3</button>
</div>

<div class="tab-content active" id="tab1">
  <!-- Form fields for Tab 1 -->
  <input type="text" name="field1" placeholder="Field 1">
</div>
<div class="tab-content" id="tab2">
  <!-- Form fields for Tab 2 -->
  <input type="text" name="field2" placeholder="Field 2">
</div>
<div class="tab-content" id="tab3">
  <!-- Form fields for Tab 3 -->
  <input type="text" name="field3" placeholder="Field 3">
</div>

document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    const targetTab = button.getAttribute('data-tab');
    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
    button.classList.add('active');
    document.getElementById(targetTab).classList.add('active');
  });
});

document.getElementById('submit-button').addEventListener('click', () => {
  const formData = new FormData();
  document.querySelectorAll('input').forEach(input => {
    formData.append(input.name, input.value);
  });

  fetch('/submit-form', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
});