在 JavaScript 中更改表單動作
Anika Tabassum Era
2024年2月15日
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>
輸出：
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
