在 JavaScript 中更改表单动作

Anika Tabassum Era 2022年5月5日
在 JavaScript 中更改表单动作

HTML formaction 属性是表单活动中不可避免的组成部分。除了 postget 方法之外,这些特定属性确保了提交数据的存储路径以供进一步使用。

在这里,我们将研究一个示例,该示例将定义动作更改机制的基本结构。

基于 JavaScript 中的 onclick 方法更改表单动作

在这种情况下,我们最初将带有必要的 idmethodform 声明为 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>

输出:

基于 onclick 方法改变表单动作

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相关文章 - JavaScript Form