首页 > web前端 > js教程 > 如何在不修改 HTML 的情况下检测 JavaScript 中的表单提交?

如何在不修改 HTML 的情况下检测 JavaScript 中的表单提交?

Mary-Kate Olsen
发布: 2024-10-28 08:52:30
原创
692 人浏览过

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.attachEvent

对于不支持 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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板