如何阻止表單按鈕刷新頁面？

使用表單按鈕防止頁面刷新

使用按鈕創建表單時，通常會遇到單擊按鈕觸發不需要的頁面刷新的問題。這可能會出現問題，尤其是當頁麵包含刷新時重置的動態載入資料時。

問題描述

在提供的程式碼片段中：

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

點擊按鈕會呼叫getData()函數，但也會自動刷新頁面。發生這種情況是因為表單中按鈕的預設類型是“提交”，它會啟動表單提交並重新載入頁面。

解決方案

防止頁面刷新，修改按鈕的type 屬性為“button”，如下所示：

<button name="data" type="button" onclick="getData()">Click</button>

透過設定type ="button"，按鈕不再發起表單提交。相反，它的行為就像一個常規按鈕，僅觸發指定的 onclick 事件，而不影響頁面。

說明

type 屬性定義按鈕的類型。可能的值為：

• 提交： 提交表單。這是預設值。
• 重設：將表單重設為初始狀態。
• 按鈕：充當自訂按鈕，無需提交或提交重置表單。

透過設定 type="button"，您可以有效地將按鈕轉換為非提交按鈕，僅觸發所需的 JavaScript 函數，而不會導致頁面刷新。

以上是如何阻止表單按鈕刷新頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！