preventDefault 和 type submit 如何与表单一起使用？答案

【问题标题】：How does preventDefault and type submit work with forms?preventDefault 和 type submit 如何与表单一起使用？
【发布时间】：2020-03-30 18:05:53
【问题描述】：

所以我在使用 JS 并尝试提交输入时尝试了几件事，但有些奇怪的事情我不理解逻辑。

<input tpye="submit/> 内部和外部<form> 标记之间存在差异。如果它在表单标签内，我需要使用preventDefault() 函数，但如果它在表单标签外，如果编写简单的 js vanilla 代码，我不需要这样做。这是为什么呢？
onsubmit 和 onclick 有什么区别？特别是在表单标签中。因为如果我使用 onsubmit js 代码并不能真正工作。
如果我使用preventDefault(event)，它会阻止将表单发送到服务器，而是仅使用浏览器进行计算？

谢谢！

【问题讨论】：

请出示您的代码。听起来有点混乱。表单内的提交按钮将提交表单，并且需要停止这样做，而不是外部。有道理，不是吗？
这能回答你的问题吗？ How to prevent form from being submitted?
@GoranStoyanov 实际上不是，只是说它阻止了提交。也许我只是不明白“防止提交”是什么意思。是否阻止表单发送到服务器，而不是在浏览器上进行计算？

标签： javascript forms submit form-submit

【解决方案1】：

如果您在表单中有type="submit" 输入（注意、The default value for the type attribute of button elements is "submit"），则单击时的默认操作是提交该表单。要防止它提交，请将按钮放在</form> 之外。这是有效的，因为该按钮不引用任何要提交的表单。相反，您可以添加一个侦听器并调用event.preventDefault()。这是有效的，因为您告诉浏览器不要采取默认操作（提交表单）
onsubmit 主要用于<form> 元素。它在表单提交之前触发，无论它是如何提交的。 onclick 几乎可以从任何元素发出。当您单击一个元素时会发生这种情况。这可能在<input>、<button> 上。甚至是整个<form>
不要使用这个。

【讨论】：

非常感谢。如果我阻止将表单发送到服务器，js 代码如何仍然有效。谁做所有的计算？浏览器？
@lirsim 你指的是什么“计算”？如果您想手动提交表单，您可以通过调用form_element.submit() 来完成此操作，或者您可以使用 AJAX，但这是一个更复杂的路线，不在此问题的范围内。
@lirsim 如果此（或其他）答案解决了您的问题，请单击答案旁边的复选标记将其标记为已解决。

【解决方案2】：

默认情况下，如果您在表单中有“提交”类型的输入，则单击该输入（或在表单中填写任何输入后按 Enter）将向服务器发送帖子或获取请求，重定向当前页面到服务器的响应。

这是向服务器提交表单数据的原始方式，无需使用 javascript。如果您想防止这种情况发生，您可以使用普通按钮 (<button onclick="doSomething()">Submit</button>) 替换提交输入，或者阻止默认提交事件：(form.onsubmit = event => event.preventDefault())。

onsubmit 和onclick 之间的区别在于onsubmit 仅在从表单发出提交事件时触发。要发出提交事件，表单需要点击<input type="submit">，或者用户通过回车触发提交。

防止这种默认行为的另一种方法是在提交处理程序中return false。

onclick 仅在单击元素时被触发。因为 javascript 中的事件会传播到父元素，所以这也会触发所有父元素上的任何 onclick 处理程序。

如果您想完全忽略默认的表单提交行为，那么您可以定义一个带有 onclick 处理程序的按钮来处理您的自定义提交逻辑。

【讨论】：

非常感谢。如果我阻止将表单发送到服务器，js 代码如何仍然有效。谁做所有的计算？浏览器？
是的，您必须自己实现提交逻辑（例如：从表单输入中获取值并使用这些值进行操作）。