在 web 开发中，表单是经常使用的元素之一。表单的 action 属性指定了提交表单时将数据发送到哪个 URL，通常会在 HTML 中静态地设置它。但有时需要根据用户的行为动态地更改这个属性，这时就需要使用 JavaScript 动态地设置表单的 action 属性。
1. 获取表单元素
要设置表单的 action 属性，首先需要获取表单元素。可以通过以下方式获取：
const form = document.querySelector('#my-form');其中 #my-form 是表单元素的 ID。
2. 设置表单的 action 属性
获取到表单元素后，就可以使用 JavaScript 设置它的 action 属性了。例如，将表单提交到 /submit 页面：
form.action = '/submit';
也可以根据用户的输入或其他事件来动态地更改表单的 action 属性。例如，在下拉菜单被选择时将表单提交到不同的页面：
const select = document.querySelector('#my-select');
select.addEventListener('change', () => {
if (select.value === 'option1') {
form.action = '/submit1';
} else if (select.value === 'option2') {
form.action = '/submit2';
}
});3. 示例代码
下面是一个完整的示例代码，展示了如何使用 JavaScript 设置表单的 action 属性：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---- ------ ------- ------------------
-------
------
----- ------------ --------------
-------
-----
------ ----------- ------------
--------
----
-------
------
------ ------------ -------------
--------
----
------- ---------------
------- ---------------------- ----------
------- ---------------------- ----------
---------
----
------- -----------------------------
-------
--------
----- ---- - -----------------------------------
----- ------ - -------------------------------------
--------------------------------- -- -- -
-- ------------- --- ---------- -
----------- - -----------
- ---- -- ------------- --- ---------- -
----------- - -----------
-
---
---------
-------
-------4. 总结
通过 JavaScript 动态地设置表单的 action 属性可以让 web 应用更加灵活和动态。这在一些特定场景下非常有用，例如需要根据用户的选择或行为来动态地改变表单提交的 URL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25814