合并onsubmit脚本

Question

我有一个表单，其中有两个脚本在提交时运行；一个用于在单击一次后禁用提交按钮，另一个用于将英国国家代码添加到phoneNumber字段。我一次只能让它们中的一个运行，如何才能让它们都运行呢？

​

  <form action="https://123.com" method="post" onsubmit="return checkForm(this);"> 
   <input name="PhoneNumber" type="tel" required="">
   <input name="myButton" type="submit" value="Submit">
   </form>

​

​

 <script type="text/javascript">
  function checkForm(form)
  {
    //
    // validate form fields
    //

    form.myButton.disabled = true;
    return true;
  }
</script> 
  <script>
function checkForm(f) {
  const phoneNumberField = f.querySelector("[name='PhoneNumber']");
  if(phoneNumberField.value.startsWith("0")){
    phoneNumberField.value = "44" + phoneNumberField.value.substring(1);
  }
   return true; // Just for demo to stop the form submitting
}
  </script> 

​

Answer 1

不要使用onclick属性。请改用Element.addEventListener()

​

document.getElementById('my-form').addEventListener('submit', checkForm)

function checkForm1(form) {
  form.myButton.disabled = true;
}
function checkForm2(f) {
  const phoneNumberField = f.querySelector("[name='PhoneNumber']");
  if (phoneNumberField.value.startsWith("0")) {
    phoneNumberField.value = "44" + phoneNumberField.value.substring(1);
  }
}
function checkForm(e) {
  checkForm1(e.target)
  checkForm2(e.target)
  // This stops the form from submitting
  e.preventDefault()
  e.stopPropagation()
  return false;
}

<form id="my-form" action="https://123.com" method="post">
  <input name="PhoneNumber" type="tel" required="">
  <input name="myButton" type="submit" value="Submit">
</form>

​

或

​

document.getElementById('my-form').addEventListener('submit', checkForm1)
document.getElementById('my-form').addEventListener('submit', checkForm2)
document.getElementById('my-form').addEventListener('submit', cancel)

function checkForm1(e) {
  e.target.myButton.disabled = true;
}

function checkForm2(e) {
  const phoneNumberField = e.target.querySelector("[name='PhoneNumber']");
  if (phoneNumberField.value.startsWith("0")) {
    phoneNumberField.value = "44" + phoneNumberField.value.substring(1);
  }
}

function cancel(e) {
  // This stops the form from submitting
  e.preventDefault();
  e.stopPropagation();
  return false;
}

<form id="my-form" action="https://123.com" method="post">
  <input name="PhoneNumber" type="tel" required="">
  <input name="myButton" type="submit" value="Submit">
</form>

​