JavaScript 中的表單 action 屬性

Muhammad Muzammil Hussain 2023年1月30日
  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