JavaScript 中的表單 action 屬性

  2. 貼士文章
  3. JavaScript 貼士
  4. JavaScript 中的表單 action 屬性
Muhammad Muzammil Hussain 2023年1月30日
JavaScript JavaScript Form
  1. JavaScript 中的表單 action 屬性
  2. JavaScript 另一個使用表單 action 的示例
  3. 在 JavaScript 中使用表單 action 屬性的另一種方法
JavaScript 中的表單 action 屬性

這篇文章解釋了 JavaScript 的表單 action 屬性。它訪問表單，獲取所有欄位的值，驗證表單資料，並將其傳送到正確的目的地。讓我們看看這些 action 屬性是什麼以及它們是如何工作的。

我們可以通過這種方式建立一個表單。

<form action="/signup" method="post" id="signup"> 
</form>

JavaScript 中的表單 action 屬性

action 屬性指定提交時將表單資料傳送到何處。

語法：

<form action="URL">

action 屬性值

  1. 絕對 URL - 它指向另一個網站（例如 action="https://www.delftstack.com/tutorial/javascript"）
  2. 相對 URL - 它指向網站內的檔案（如 action="example.htm"）

使用 HTML 的表單 action 屬性示例

將表單資料傳送到給定連結以處理提交時的輸入。

<form action="https://www.delftstack.com" method="get">
  <label for="firstname">First name:</label>
  <input type="text" id="firstname" name="firstname"><br><br>
  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lastname"><br><br>
  <input type="submit" value="Submit">
</form>

JavaScript 另一個使用表單 action 的示例

以下示例包含使用 form action 屬性的 HTML。

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Form action javascript</title>
	<style>
		form label 
		{
			display: inline-block;
			width: 100px;
		}

		form div 
		{
			margin-bottom: 10px;
		}
	</style>

</head>

<body>
	<div class="p-2">
		<form id="myForm">
			<div>
				<label>Name:</label>
				<input id="name" name="name" type="text">
			</div>
			<div>
				<label>Email:</label>
				<input id="email" name="email" type="email">
			</div>
			<div>
				<input id="submit" type="submit">
			</div>
		</form>
	</div>
</body>

<script>
	// setting action on window onload event
	window.onload = function () {
		setAction('action.php');
	};
	// this event is used to get form action as an alert which is set by setAction function by using getAction function
	document.getElementById('submit').addEventListener('click', function (e) {
		e.preventDefault();
		getAction();
	});
	// this function is used to set form action
	function setAction(action) {
		document.getElementById('myForm').action = action;
		return false;
	}
	// this function is used to get form action assigned by setAction function in an alert
	function getAction() {
		var action = document.getElementById('myForm').action ;
		alert(action);
	}
</script>

我們在上面的程式碼中使用 JavaScript 新增了自定義表單 action。

在 JavaScript 中使用表單 action 屬性的另一種方法

當使用者提交表單時，使用 onsubmit 事件可以獲得相同的結果。

語法：

<element onsubmit="myScript">

例子：

<form onsubmit="myFunction()">
      <div>
        <label>Name:</label>
        <input id="name" name="name" type="text">
      </div>
      <div>
        <label>Email:</label>
        <input id="email" name="email" type="email">
      </div>
      <div>
        <input id="submit" type="submit">
      </div>
</form>

在上面的示例中，onsubmit 事件用於提交表單資料，而不是 form action 屬性。

相關文章 - JavaScript Form