如何防止表单被提交?

我有一个表单，其中某处有一个提交按钮。

然而，我想以某种方式“捕捉”提交事件并防止它发生。

有什么办法能让我做到吗?

我不能修改提交按钮，因为它是自定义控件的一部分。

当前回答

你可以像这样使用内联事件onsubmit

<form onsubmit="alert('stop submit'); return false;" >

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

Demo

在做大项目时，这可能不是一个好主意。您可能需要使用事件侦听器。

请阅读更多关于内联事件vs事件监听器(addEventListener和IE的attachEvent)在这里。因为我不能比克里斯·贝克解释得更清楚。

两者都是正确的，但没有一个是“最好的”，而且可能有开发人员选择使用这两种方法的原因。

其他回答

你可以在表单中添加eventListner，即preventDefault()并将表单数据转换为JSON，如下所示:

你可以像这样使用内联事件onsubmit

<form onsubmit="alert('stop submit'); return false;" >

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

Demo

在做大项目时，这可能不是一个好主意。您可能需要使用事件侦听器。

请阅读更多关于内联事件vs事件监听器(addEventListener和IE的attachEvent)在这里。因为我不能比克里斯·贝克解释得更清楚。

两者都是正确的，但没有一个是“最好的”，而且可能有开发人员选择使用这两种方法的原因。

为了防止表单提交，你只需要这样做。

<form onsubmit="event.preventDefault()">
    .....
</form>

通过使用上述代码，这将阻止您的表单提交。

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

与其他答案不同，返回false只是答案的一部分。考虑这样一个场景:JS错误发生在return语句之前…

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

脚本

function mySubmitFunction()
{
  someBug()
  return false;
}

这里返回false将不会被执行，表单将以任何一种方式提交。还应该调用preventDefault来防止Ajax表单提交的默认表单操作。

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

在这种情况下，即使有bug，表单也不会提交!

或者，尝试…可以使用Catch块。

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

推荐文章