HTML Submit 按鈕提交後彈窗消失問題：默認行為導致頁面跳轉

問題現象

頁面中有一個 <input type="submit"> 按鈕，點擊後彈出「提交成功」提示框。但提示框一閃而過，整個頁面隨即跳轉/刷新，導致彈窗無法正常顯示。

根本原因

type="submit" 的按鈕具有**默認表單提交行為**：點擊後瀏覽器會自動提交所屬 <form>，導致頁面跳轉或重載。彈窗代碼雖執行，但頁面立即卸載，彈窗隨之銷毀。

解決方案

方案一：改用普通按鈕 + JS 手動提交（推薦）

<input type="button" id="btnSubmit" value="提交" />

<script>
document.getElementById('btnSubmit').onclick = function() {
    // 1. 顯示成功提示（或先驗證）
    alert('提交成功！'); // 或自定義模態框
    // 2. 手動提交表單
    document.getElementById('myForm').submit();
    // 或 AJAX 提交：
    // fetch('/api/submit', {method:'POST', body:new FormData(form)})
    //   .then(r => alert('成功'));
};
</script>

完全掌控流程，避免默認行為干擾。

方案二：保留 submit 但阻止默認行為

<input type="submit" id="btnSubmit" value="提交" />

<script>
document.getElementById('btnSubmit').addEventListener('click', function(e) {
    e.preventDefault(); // 關鍵：阻止表單默認提交
    alert('提交成功！');
    this.form.submit(); // 如需真正提交，手動調用
});
</script>

方案三：在 onsubmit 返回 false

<form onsubmit="return handleSubmit()">
    <input type="submit" value="提交" />
</form>

<script>
function handleSubmit() {
    alert('提交成功！');
    // return false; // 陻止提交
    // 或 AJAX 後 return false
    return false;
}
</script>

最佳實踐建議

• 優先使用 type="button" + AJAX：體驗最佳，無頁面跳轉，可在回調中顯示提示並局部刷新。
• 若必須傳統提交，在事件處理器中調用 e.preventDefault() 明確阻止默認行為。
• 避免在 onclick 內直接寫 return false 且不阻止事件冒泡，易漏網。

總結

input type="submit" 自帶提交行為會導致頁面跳轉，使彈窗消失。改用普通按鈕配合 JS 控制提交時機，或顯式阻止默認行為，即可解決。