在 JavaScript 中更改表單動作
Anika Tabassum Era
2022年5月5日
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>
輸出:
Author: Anika Tabassum Era