在前端开发中，表单是非常常见的元素。而对于需要动态修改表单提交内容的场景，我们可以通过 JavaScript 来捕获表单并进行提交。本文将介绍如何使用 JavaScript 捕获表单并提交表单数据。
表单基础知识
在 HTML 中，表单由 <form> 标签定义。表单中包含了各种类型的输入控件，例如文本框、下拉框和复选框等。用户填写表单后，可以点击提交按钮将表单数据提交到服务器进行处理。
-- -------------------- ---- ------- ------ ------ --------------------------- ------ ----------- ------------- -------------------- ------ -------------------------- ------ --------------- ------------- -------------------- ------ ------------- ----------- -------
在上述代码中，我们定义了一个简单的表单，包含了用户名和密码两个输入框以及一个提交按钮。表单中的每个输入控件都有自己的标识符 id 和 name，这些标识符将在 JavaScript 中用到。
使用 JavaScript 捕获表单
当用户填写完表单后，我们可以通过 JavaScript 来获取表单数据并进行处理。可以使用 document.forms 属性来获取所有表单的列表，或者使用 document.getElementById() 方法获取指定表单元素。
const form = document.getElementById('myForm');获取到表单元素后，我们可以通过 form.elements 属性来获取表单中的所有控件。该属性返回一个类数组对象，包含了表单中的所有控件。可以使用 for 循环遍历这个对象，获取每个表单控件的值。
const inputs = form.elements;
for (let i = 0; i < inputs.length; i++) {
const input = inputs[i];
console.log(input.name + ': ' + input.value);
}在上述代码中，我们遍历了表单中的所有控件，并输出每个控件的名称和值。可以根据需要对这些值进行处理，例如验证用户输入是否合法、将数据发送到服务器等操作。
表单提交
当用户填写完表单后，可以点击提交按钮将表单数据提交到服务器进行处理。可以使用 JavaScript 来拦截表单的默认提交行为，并在提交前对表单数据进行处理。
首先，可以使用 event.preventDefault() 方法来阻止表单默认的提交行为。然后，可以获取表单中的控件值，并将它们打包成一个对象，再将该对象作为参数发送给服务器。
-- -------------------- ---- -------
------------------------------- --------------- -
-----------------------
----- -------- - -
--------- -----------------------------
--------- ----------------------------
--
------------------- -
------- -------
----- -------------------------
-------- -
--------------- ------------------
-
---------------- -- -
-----------------------------
-------------- -- -
---------------------
---
---在上述代码中，我们使用 addEventListener() 方法来监听表单提交事件。当表单被提交时，会执行回调函数中的代码。首先，我们使用 event.preventDefault() 来阻止表单默认的提交行为。然后，我们获取表单中的控件值，并将它们打包成一个对象。最后，我们使用 fetch() 方法向服务器发送数据，并处理服务器返回的响应结果。
总结
本文介绍了如何使用 JavaScript 捕获表单并提交表单数据。通过使用 JavaScript，可以实现动态修改表单内容、验证用户输入、发送数据到服务器等功能。希望读者能够从本文中学习到有关表单的相关知识，并将其应用于实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15147