JSP 表單重置按鈕清空資料 jQuery 實作技巧

jQuery 表單清空核心程式碼

$(':input', '#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

關鍵注意事項

1. 按鈕不能放在 <form> 內： 否則點擊會觸發預設提交行為，導致頁面重新載入，清空效果閃失
2. 直接寫在 onclick 屬性： 如 <input type="button" onclick="$(':input','#myform').not(':button,:submit,:reset,:hidden').val('').removeAttr('checked').removeAttr('selected');" value="重置" />

程式碼邏輯解析

替代方案：原生 JavaScript

document.getElementById('myform').reset();

但原生 reset() 只能恢復至頁面載入時的初始值，無法清空使用者輸入後又透過程式動態設定的值。

最佳實踐建議

• 重置按鈕使用 type="button" 而非 type="reset"
• 按鈕置於 </form> 之外
• 搭配確認對話框防止誤觸：onclick="if(confirm('確定清空?')) { ... }"
• 複雜表單考慮封裝為可重用函式