在 JavaScript 中更改表单动作

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中更改表单动作

作者：迹忆客最近更新：2024/03/13 浏览次数：

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>