js 控制表单提交

<form id="myForm" action="/submit" method="post">
  <input type="text" name="username" required>
  <button type="submit">Submit</button>
</form>

<form id="myForm">
  <input type="text" id="username" required>
  <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
function submitForm() {
  const username = document.getElementById('username').value;
  
  // 数据验证
  if (username.trim() === '') {
    alert('Username cannot be empty');
    return;
  }

  // 创建表单数据
  const formData = new FormData();
  formData.append('username', username);

  // 使用fetch API进行异步提交
  fetch('/submit', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
    alert('Form submitted successfully');
  })
  .catch((error) => {
    console.error('Error:', error);
    alert('There was an error submitting the form');
  });
}
</script>

function submitForm() {
  const submitButton = document.querySelector('button[type="button"]');
  submitButton.disabled = true;

  // 提交逻辑...

  fetch('/submit', { /* ... */ })
    .then(() => {
      submitButton.disabled = false;
    })
    .catch(() => {
      submitButton.disabled = false;
    });
}

function validateForm() {
  const username = document.getElementById('username').value;
  if (username.trim() === '') {
    alert('Username cannot be empty');
    return false;
  }
  return true;
}

function submitForm() {
  if (!validateForm()) {
    return;
  }
  // 提交逻辑...
}