在前端开发中，有时候需要用户填写多个表单来完成某项操作。这时如果要求用户分别点击多个按钮进行提交，会降低用户体验。本文将介绍如何使用一个按钮同时提交两个表单，提高用户交互的效率。
前置知识
- HTML 表单元素：
form,input,button - JavaScript DOM 操作：
document.querySelector,Event.preventDefault
实现步骤
在 HTML 文件中添加两个表单，以及一个提交按钮。为了区分不同表单，可以设置它们的 ID 属性。例如：
-- -------------------- ---- ------- ----- ----------- ---- ---- -------- ---- --- ------- ----- ----------- ---- ---- -------- ---- --- ------- ------- ------------------------------
使用 JavaScript 监听按钮的点击事件，并获取表单元素。可以使用
document.querySelector方法来获取表单元素，例如：const submitBtn = document.querySelector('#submitBtn'); const form1 = document.querySelector('#form1'); const form2 = document.querySelector('#form2');在按钮被点击时，阻止浏览器默认的表单提交行为，并手动提交两个表单。可以使用
Event.preventDefault方法阻止表单提交，然后分别调用form.submit()方法提交每个表单。完整代码如下：submitBtn.addEventListener('click', (event) => { event.preventDefault(); form1.submit(); form2.submit(); });
示例代码
下面是一个完整的示例代码，你可以在本地运行它测试效果。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
------------- --- ----- ---- --- --------------
-------
------
----- -----------
------ ------------------------
------ ----------- ----------- --------- -------- --
--- --
------ --------------------------
------ ------------ ------------ ---------- -------- --
-------
----- -----------
------ --------------------------
------ ---------- ------------ ---------- -------- --
--- --
------ ------------------------------
--------- -------------- ------------------------
-------
------- ------------------------------
--------
----- --------- - -------------------------------------
----- ----- - ---------------------------------
----- ----- - ---------------------------------
----------------------------------- ------- -- -
-----------------------
---------------
---------------
---
---------
-------
-------总结
通过本文的介绍，我们了解了如何使用一个按钮同时提交两个表单。这种方法可以提高用户交互的效率，避免了多次点击提交按钮的烦恼。同时，这种做法也可以用于其他需要同时提交多个表单的场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28065