在 JavaScript 中使用 Onclick 重定向頁面

Habdul Hazeez 2024年2月15日

JavaScript JavaScript Redirect

本教程將教你如何在使用者單擊 HTML 按鈕時建立 JavaScript 重定向。

我們將使用 onclick 事件來監聽按鈕上的點選事件。如果使用者單擊按鈕，我們將執行重定向。

使用 JavaScript 中的 `onclick` 事件重定向到另一個頁面

初始設定

我們旨在解釋如何在網站上執行此操作；但是，你可以在本地開發伺服器上進行嘗試。也就是說，下載像 Apache 這樣的伺服器。

你可以通過 XAMPP 安裝獲得 Apache。安裝 XAMPP 後，你應該將本教程中的所有程式碼放在 htdocs 資料夾中；你將在 XAMPP 安裝目錄中找到 htdocs 資料夾。

最好在 htdocs 中建立一個名為 jsredirect 的資料夾。所以 jsredirect 資料夾將包含你的程式碼。

建立 HTML 表格

我們在下面有兩個 HTML 程式碼。第一個是帶有兩個表單輸入和一個按鈕的 HTML 表單。

該按鈕有一個我們將在 JavaScript 程式碼中使用的唯一 ID。同時，第二個 HTML 包含一個文字，內容為 Redirected from a form。

下一個程式碼是我們將重定向到的 HTML 表單。將其儲存為 home.html 並帶有 HTML 文件所需的文件型別。

<body>
	<h1>Redirected from a form</h1>
</body>

In the next code, we have the code for the HTML form. Save it as form.html.

<main>
	<form>
		<div class="form-row">
			<label for="first-name">First name</label>
			<input id="first-name" type="text" name="first-name" required>
		</div>
		<div class="form-row">
			<label for="last-name">Last name</label>
			<input id="last-name" type="text" name="last-name" required>
		</div>
		<div class="form-row">
			<button id="submit-form" type="submit">Submit</button>
		</div>
	</form>
</main>

建立 JavaScript 程式碼

如果使用者單擊我們表單中的按鈕，下面的 JavaScript 程式碼將執行重定向。

首先，我們使用 document.getElementById 方法通過其 id 獲取按鈕。之後，我們將事件偵聽器附加到按鈕。

在重定向函式中，我們使用 location.href 方法來描述重定向的位置。在這種情況下，我們將其設定為儲存為 home.html 的第二個 HTML 程式碼。

因此，重定向 URL 是 http://localhost/jsredirect/home.html，其中 jsredirect 是我們專案資料夾的名稱。

如果你在實時伺服器上，請將 localhost 替換為你網站的名稱。
```
let button = document.getElementById('submit-form');

button.onclick = function(e) {
  e.preventDefault();

  // Replace localhost and the folder name
  // based on your setup
  location.href = 'http://localhost/jsredirect/home.html';
}
```
測試我們的程式碼

現在我們已經設定了 HTML 檔案和 JavaScript，我們可以測試它是否有效。啟動你的本地伺服器並通過 localhost/<your_project_folder> 導航到你的專案資料夾。

載入後，如果你願意，可以使用任意資料填寫表單。此外，你可以實現確保使用者填寫表單的邏輯。

但是，重要的是要確保在單擊按鈕時重定向有效。所以，繼續點選按鈕。

如果你做的一切正確，你的網路瀏覽器應該會重定向到第二個 HTML 檔案。我們在下面的 GIF 影象中展示了一個重定向示例。

CSS 程式碼

下一個 CSS 程式碼塊為表單設定樣式。

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

main {
	margin: 2em auto;
	width: 50%;
	outline: 1px solid #1a1a1a;
}

.form-row {
	padding: 0.5em;
	display: flex;
	justify-content: space-around;
}

.form-row input {
	width: 45%;
	padding: 0.2em;
}

.form-row button {
	padding: 0.5em;
}

作者： Habdul Hazeez

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

使用 JavaScript 中的 onclick 事件重定向到另一個頁面

相關文章 - JavaScript Redirect

使用 JavaScript 中的 `onclick` 事件重定向到另一個頁面