首頁 > web前端 > js教程 > 如何在不修改 HTML 的情況下檢測 JavaScript 中的表單提交?

如何在不修改 HTML 的情況下檢測 JavaScript 中的表單提交?

Mary-Kate Olsen
發布: 2024-10-28 08:52:30
原創
657 人瀏覽過

How Can I Detect Form Submissions in JavaScript Without Modifying HTML?

在不修改HTML 的情況下偵測表單提交

要在JavaScript 中偵測表單提交而不訴諸HTML 事件屬性(如onSubmit 或onClick),您可以使用表單元素的addEventListener 或AttachEvent 方法。

使用EventTarget.addEventListener

對於支援addEventListener 方法的現代瀏覽器,語法如下:

<code class="javascript">var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false); 
}</code>
登入後複製

使用EventTarget.ach

對於不支援addEventListener 的較早版本的Internet Explorer,請改用AttachEvent:

<code class="javascript">else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);        
}</code>
登入後複製
在兩者中情況下,回呼是您要在提交表單時執行的函數。

防止預設提交

如果需要阻止表單原生提交,請使用e回呼函數中的.preventDefault():

<code class="javascript">document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    
    }
});</code>
登入後複製

庫整合

如果首選使用庫,這裡有一些用於監聽提交事件的流行選項:

  • jQuery:

    <code class="javascript">$(ele).submit(callback);</code>
    登入後複製
  • 其他函式庫:參考文件您選擇的函式庫以了解特定的實作細節。

以上是如何在不修改 HTML 的情況下檢測 JavaScript 中的表單提交?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板