在 JavaScript 中使用 Onclick 重定向頁面
本教程將教你如何在使用者單擊 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 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