Javascript 如何防止表单被提交？

我有一个表单，它的某个地方有一个提交按钮

但是，我希望以某种方式“捕获”提交事件并防止其发生

有什么办法我可以做到这一点吗

---

我无法修改submit按钮，因为它是自定义控件的一部分。

您可以像这样使用inline event

onsubmit

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

或

函数toSubmit（）{
警惕（“我不会提交”）；
返回false；
}

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

求你了。因为我无法解释得更多

两者都是正确的，但它们本身都不是“最好的”，而且可能有 开发人员选择使用这两种方法的原因

---

与其他答案不同，return

false

只是答案的一部分。考虑在返回语句之前发生JS错误的场景…

html

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

此处返回的

false

将不会执行，表单将以任何方式提交。您还应该调用

preventDefault

，以防止Ajax表单提交的默认表单操作

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

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

或者，可以使用

try…catch

块

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

试试这个

HTML代码

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

或

---

到目前为止，以下功能可以正常工作（在chrome和firefox中测试）：

其中validateMyForm（）是一个函数，如果验证失败，它将返回

false

。关键点是使用名称

事件

。我们不能使用例如

e.preventDefault（）

来遵循编程约定，根据加载速度的不同，最好使用以下选项：

<form onsubmit="return false;"></form>

标签{
显示：块；
}
#我的表格>输入[type=“text”]{
背景：青色；
}

你的名字
你的姓

使用将事件侦听器附加到表单，然后在

事件上调用该方法

：

const元素=document.querySelector（'form'）；
元素。addEventListener（'submit'，事件=>{
event.preventDefault（）；
//实际逻辑，例如验证表单
console.log（'表格提交已取消'）；
});

提交
要防止表单提交，您只需执行此操作

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


.....

使用上述代码将阻止您提交表单。
以下是我的答案：

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>


...
const searchOrder=e=>{
e、 预防默认值（）；
const name=e.target.name.value；
renderSearching（）；
返回false；
}

我添加
event.preventDefault（），它可以正常工作。
您可以将eventListner添加到表单中，该表单将
preventDefault（）
并将表单数据转换为JSON，如下所示：


const formToJSON=elements=>[].reduce.call（elements，（data，element）=>{
data[element.name]=element.value；
返回数据；
}, {});
const handleFormSubmit=事件=>{
event.preventDefault（）；
const data=formToJSON（form.elements）；
控制台日志（数据）；
//const-odata=JSON.stringify（数据，null，“”）；
const jdata=JSON.stringify（数据）；
console.log（jdata）；
（异步（）=>{
const rawResponse=wait fetch（“/”{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：jdata
});
const content=await rawResponse.json（）；
控制台日志（内容）；
})();
};
const form=document.forms['myForm']；
表格。附录列表（“提交”，手册或提交）

复选框：



编号：



密码：



类型：
A.
B
C



文本区域：
在这里写点东西。



选择：
价值A
B值
C值



提交：



您仍然可以访问提交按钮。呈现页面并通过查看页面源获取其ClientID。然后，使用类似jQuery的东西，您可以执行类似$（'#ctl01_cph01_controlBtn1'）的操作@拉斐尔：没错。。。但这将是最后的手段-这是一个非常复杂的控件。@Raf基于asp.net，也不是最佳实践。但这基本上是正确的。我只是避免偷看源代码和使用控件名，因为如果有人编辑页面，它可能会改变。意外副作用等。为什么不直接从
onsumbit
返回
false
？您可能希望在onsubmit中向用户显示错误消息。例如，“填写此必填字段，然后提交”。在这种情况下，违约将非常严重handy@ProfK如果您使用event.preventDefault（），不管怎样，try/catch都只是错误处理的一部分。。。必须使用括号中的“事件”一词firefox@BenRowe您应该将evt参数添加到被调用的方法中
（）
。否则它会给出未定义的错误。我认为使用
.onsubmit
是个坏主意，因为它会阻止您将多个
submit
回调附加到一个元素。我建议使用
.addEventListener（）
。即使您通过.onsubmit属性设置了事件处理程序，也可以通过.addEventListener（）添加其他处理程序。将首先调用由属性注册的处理程序，然后按注册顺序调用向.addEventListener（）注册的处理程序。此问题中没有jQuery标记。@Gothdo，但解决方案仍然相同。疯狂吧？@Gothdo是的，完全一样。eventObject.preventDefault。绑定处理程序的方式不会改变解决方案。
$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

<form onsubmit="event.preventDefault(); return validateMyForm();">

<form onsubmit="return false;"></form>

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

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>