在 JavaScript 中更改表单动作
Anika Tabassum Era
2024年2月15日
HTML form 的 action 属性是表单活动中不可避免的组成部分。除了 post 和 get 方法之外，这些特定属性确保了提交数据的存储路径以供进一步使用。
在这里，我们将研究一个示例，该示例将定义动作更改机制的基本结构。
基于 JavaScript 中的 onclick 方法更改表单动作
在这种情况下，我们最初将带有必要的 id 和 method 的 form 声明为 post，并且不初始化 HTML 结构中的任何 action。
然后，一个基本的 select-option 字段是我们将处理的地方，我们的脚本标签将设置一个 alert，每次更改选项时都会通知我们。
当我们在此页面上填写了必要的信息后，我们可以将信息存储在首选视图或门户中。这就是 submit 的作用，通过新设置的 action 将数据包引导到不同的路径。
代码片段：
<!DOCTYPE html>
<html>
<body>
<form id="form_id" method="post" name="myform">
<label>Form Action :</label>
<select id="form_action" onChange="select_change()" >
<option value="">--- Set Form Action ---</option>
<option value="first.php">first.php</option>
<option value="second.php">second.php</option>
<option value="third.php">third.php</option>
</select>
<input type="button" value="Submit" onclick="myfunction()"/>
</form>
<script>
function select_change() {
var index = document.getElementById("form_action").selectedIndex;
var option = document.getElementsByTagName("option")[index].value;
alert("Form action changed to " + option);
}
function myfunction() {
if (validation()) {
var x = document.getElementById("form_action").selectedIndex;
var action = document.getElementsByTagName("option")[x].value;
if (action !== "") {
document.getElementById("form_id").action = action;
document.getElementById("form_id").submit();
} else {
alert("Set form action");
}
}
}
</script>
</body>
</html>
输出：
