在 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