在前端开发中，我们经常需要使用表单来收集用户数据。而有时候，我们需要在用户点击表单提交按钮之前进行一些处理。这时候，我们可以使用 JavaScript 来拦截表单提交事件，并对表单数据进行处理。但是，如果拦截了表单提交事件，就会导致无法使用 submit() 方法来提交表单，这可能会给开发带来一些困扰。
问题描述
当我们使用 JavaScript 拦截表单提交事件后，如果我们想要在处理完表单数据后继续提交表单，通常会尝试使用 submit() 方法来提交表单。但是，我们会发现此时调用 submit() 方法并没有效果，表单并没有被提交。
以下是一个简单的示例代码：
-- -------------------- ---- -------
----- ------------
------ ----------- ------------- --------------
------ ------------- ---------------
-------
--------
----- ---- - ----------------------------------
------------------------------- ------- -- -
-----------------------
----------------- ------- --- ----------------
---
------------- -- -
----------------------- ----------
--------------
-- ------
---------在上面的代码中，我们拦截了表单提交事件，在控制台输出了表单数据，并使用了 setTimeout 函数来模拟在一段时间后自动提交表单。
当我们运行上面的代码时，我们会发现表单数据被正确输出到了控制台，但是表单并没有被提交。
问题分析
这个问题的原因在于，通过调用 submit() 方法来提交表单只能触发表单的默认提交行为。而由于我们在拦截表单提交事件时调用了 preventDefault() 方法，阻止了表单的默认提交行为，因此 submit() 方法也就失效了。
解决方案
要解决这个问题，我们需要手动创建一个 HTTP 请求，并将表单数据作为请求参数发送到服务器。
以下是一个示例代码：
-- -------------------- ---- -------
----- ------------
------ ----------- ------------- --------------
------ ------------- ---------------
-------
--------
----- ---- - ----------------------------------
------------------------------- ------- -- -
-----------------------
----------------- ------- --- ----------------
----- -------- - --- ---------------
--------------------- -
------- -------
----- ---------
---------- -- -
----------------- ------------
---
---
------------- -- -
----------------------- ----------
---------------------- -----------------
-- ------
---------在上面的代码中，我们使用了 fetch 函数来发送表单数据到服务器。我们在拦截表单提交事件时将表单数据保存到了 formData 变量中，并在 fetch 函数中将其作为请求参数发送到了服务器。由于我们手动发送了 HTTP 请求，因此即使调用 submit() 方法失效了，也不会影响到表单的提交。
总结
在前端开发中，拦截表单提交事件可以让我们对表单数据进行处理，并且避免了页面刷新的问题。但是，如果在拦截表单提交事件后想要继续提交表单，就需要使用手动创建 HTTP 请求来发送表单数据，以替代 submit() 方法。
希望本文能够帮助你解决类似的问题，并提高你的前端开发技能！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29785