在 JavaScript 中更改表单动作

Anika Tabassum Era 2022年5月5日

JavaScript JavaScript Form

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>

输出：

基于 onclick 方法改变表单动作

Author: Anika Tabassum Era

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 中的 onclick 方法更改表单动作

相关文章 - JavaScript Form

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