在 JavaScript 中使用 Onclick 重定向頁面

Habdul Hazeez 2022年5月10日
在 JavaScript 中使用 Onclick 重定向頁面

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

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

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

  1. 初始設定

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

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

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

  2. 建立 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>
    
  1. 建立 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';
    }
    
  2. 測試我們的程式碼

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

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

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

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

    Form Redirect With JS

  3. 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 avatar Habdul Hazeez avatar

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.

LinkedIn

相關文章 - JavaScript Redirect