正文 

当前位置： 首页 > 问答 >

如何在 javascript 中收听表单提交事件？

     2023-02-22     61

关键词：

【中文标题】如何在 javascript 中收听表单提交事件？【英文标题】：How can I listen to the form submit event in javascript? 【发布时间】：2011-11-16 15:02:09 【问题描述】：

我想编写自己的表单验证 javascript 库，我一直在 google 上寻找如何检测是否点击了提交按钮，但我发现的只是你必须在 html 中使用 onClick on onSubmit="function()" 的代码。

我想制作这个 javascript，这样我就不必触摸任何 html 代码，例如添加 onSubmit 或 onClick javascript。

【问题讨论】：

为什么不document.forms['yourForm'].onsubmit = function()？还是addEventListener？ 您是否真的要检查是否单击了提交按钮，或者您是否要检查用户何时提交表单（他们可以通过单击按钮或按 Enter 从其中一个字段）？ 【参考方案1】：

为什么人们总是在不需要的时候使用 jQuery？ 为什么人们不能只使用简单的 JavaScript？

var ele = /*Your Form Element*/;
if(ele.addEventListener)
    ele.addEventListener("submit", callback, false);  //Modern browsers
else if(ele.attachEvent)
    ele.attachEvent('onsubmit', callback);            //Old IE

callback 是您要在提交表单时调用的函数。

关于EventTarget.addEventListener，请查看this documentation on MDN。

要取消原生submit 事件（防止表单被提交），请在回调函数中使用.preventDefault()，

document.querySelector("#myForm").addEventListener("submit", function(e)
    if(!isValid)
        e.preventDefault();    //stop form from submitting
    
);

使用库收听submit 事件

如果出于某种原因您决定需要一个库（您已经在使用一个库或者您不想处理跨浏览器问题），这里列出了监听提交事件的方法列表常用库：

    jQuery

    $(ele).submit(callback);

    其中ele 是表单元素引用，callback 是回调函数引用。 Reference

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

    AngularJS (1.x)

    <form ng-submit="callback()">

$scope.callback = function() /*...*/ ;

    非常简单，其中$scope 是您的controller 内的框架提供的范围。 Reference

    反应

    <form onSubmit=this.handleSubmit>

class YourComponent extends Component 
    // stuff

    handleSubmit(event) 
        // do whatever you need here

        // if you need to stop the submit event and 
        // perform/dispatch your own actions
        event.preventDefault();
    

    // more stuff

    只需将处理程序传递给onSubmit 属性。 Reference

    其他框架/库

    请参阅您的框架的文档。

验证

您始终可以在 JavaScript 中进行验证，但对于 HTML5，我们也有原生验证。

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d5">

您甚至不需要任何 JavaScript！只要不支持本机验证，您就可以回退到 JavaScript 验证器。

演示：http://jsfiddle.net/DerekL/L23wmo1L/

【讨论】：

那 5 行“可怕...丑陋”的代码取代了 4,000 行 jQuery 提供的所需功能，这也必须是“可怕...丑陋”的代码。 我对 jQuery 没有太多反对意见，只有那些将它用作一种魔法咒语的人，却没有意识到他们可以用几行代码替换整个东西。为什么不花时间了解浏览器的实际工作原理？真的没那么难。 @Ben - 仅仅因为您可以使用库做某事并不意味着您也应该这样做，也不应该通过回复“只使用库 x”来阻止其他人学习基础知识。当有人询问有关 javascript 的特定问题时，使用纯 javascript 回答问题是有礼貌的。无论如何，请从您选择的图书馆中提出一些建议，但回答问题应该是第一要务。 我个人认为，一个人首先应该知道基础。 本着同样的精神，我们真的应该尝试编写更多的汇编语言。半开玩笑（我更喜欢 jquery 解决方案，如果您真的想了解引擎盖下发生的事情，我认为它是一个无尽的兔子洞），但是是的，我很高兴我知道一些程序集语言，并且知道 TCP 连接是如何建立的，等等。我仍然不会仅仅为了教他们了解底层知识的奇迹而向任何人提供较低级别的解决方案。【参考方案2】：

这是在onSubmit 发生时调用自己的javascript 函数的最简单方法。

HTML

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

JavaScript

window.onload = function() 
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);


function submitted(event) 
    event.preventDefault();

【讨论】：

你为什么决定绑定'提交'函数？函数中没有使用“this”。 bind 确实没必要。【参考方案3】：

根据您的要求，您还可以在不使用 jQuery 等库的情况下执行以下操作：

将此添加到您的脑海中：

window.onload = function () 
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) 
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) 
            alert("Please check your fields!");
            return false;
        
        else 
            //you are good to go
            return true;

您的表单可能仍然类似于：

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

【讨论】：

始终使用addEventListener 而不是 onsubmit 或 onload 以允许其他开发人员添加自己的侦听器。【参考方案4】：

使用 jQuery：

$('form').submit(function () 
    // Validate here

    if (pass)
        return true;
    else
        return false;
);

【讨论】：

如何在 Javascript 中触发表单提交？

】如何在Javascript中触发表单提交？【英文标题】：HowdoItriggerFormSubmissioninJavascript?【发布时间】：2012-02-0600:25:20【问题描述】：我已经初始化了我的表单提交，如下所示：$(document).ready(function()$("#my_form").submit(function(e)......正如您... 查看详情

如何在AngularJS中以编程方式触发表单提交？

】如何在AngularJS中以编程方式触发表单提交？【英文标题】：HowtotriggerformsubmitprogrammaticallyinAngularJS?【发布时间】：2015-02-2517:16:21【问题描述】：根据Angular的文档，ngSubmit是提交表单的首选方式。所有挂起的操作都立即完成，并... 查看详情

提交表单后如何在就绪事件中传递函数

】提交表单后如何在就绪事件中传递函数【英文标题】：Howtopassfunctioninsidereadyeventaftersubmittingform【发布时间】：2018-12-0507:15:17【问题描述】：我试图弄清楚如何提交表单，或者不提交，这取决于输入是否有效。由于我有很多条... 查看详情

html/javascript onsubmit 事件未在表单提交上调用以验证表单

】html/javascriptonsubmit事件未在表单提交上调用以验证表单【英文标题】：html/javascriptonsubmiteventnotcalledonformsubmittovalidateform【发布时间】：2018-07-2305:11:30【问题描述】：我想用html和javascript对表单进行非常基本的验证。我希望在单... 查看详情

javascript表单提交中的ga事件-多种形式(代码片段)

查看详情

如何在 AngularJS 中收听 jQuery 事件

】如何在AngularJS中收听jQuery事件【英文标题】：HowcanIlistentojQueryeventsinAngularJS【发布时间】：2013-05-0619:01:17【问题描述】：我正在重写一个jQuery应用程序以使用AngularJS。我正在使用小步骤，一次更换一个区域。但是，我对如何在A... 查看详情

如果在浏览器中禁用 javascript，如何在表单提交时弹出 javascript 和操作？ [复制]

】如果在浏览器中禁用javascript，如何在表单提交时弹出javascript和操作？[复制]【英文标题】：howtohaveajavascriptpopuponformsubmissionandanactionifjavascriptisdisabledinthebrowser?[duplicate]【发布时间】：2021-07-0708:49:09【问题描述】：我有以下重定... 查看详情

如何在 ajax 调用中提交表单之前调用 javascript 验证函数

】如何在ajax调用中提交表单之前调用javascript验证函数【英文标题】：Howtocalljavascriptvalidatefunctionbeforeformsubmitonanajaxcall【发布时间】：2016-05-1703:51:35【问题描述】：这是我的validate()函数，返回true或false。我的问题是我只想在valida... 查看详情

在 JavaScript 中拦截表单提交并阻止正常提交

】在JavaScript中拦截表单提交并阻止正常提交【英文标题】：InterceptaformsubmitinJavaScriptandpreventnormalsubmission【发布时间】：2011-07-2001:47:19【问题描述】：似乎有很多关于如何使用javascript提交表单的信息，但我正在寻找一种解决方案... 查看详情

在javascript-ajax中提交表单时如何显示进度条

】在javascript-ajax中提交表单时如何显示进度条【英文标题】：Howtoshowtheprogressbarwhensubmittingtheforminjavascript-ajax【发布时间】：2021-06-1819:18:10【问题描述】：我已经做了进度条和一切。但是当我选择文件上传时出现问题，这意味着... 查看详情

Javascript - 表单选择元素在新窗口中打开 url 并提交表单

】Javascript-表单选择元素在新窗口中打开url并提交表单【英文标题】：Javascript-formselectelementopenurlinnewwindowandsubmitform【发布时间】：2010-10-0813:50:06【问题描述】：已更新-请阅读原始问题下方的更多详细信息我有一个带有各种url的... 查看详情

在 ASP.NET 中，如何通过一个表单提交在客户端（javascript）和服务器端处理数据？

】在ASP.NET中，如何通过一个表单提交在客户端（javascript）和服务器端处理数据？【英文标题】：InASP.NET,howtoprocessdataonbothclientside(javascript)andserversidewiththeoneformsubmission?【发布时间】：2010-11-2722:31:15【问题描述】：我有一个场景... 查看详情

javascript学习——完成注册页面表单校验

1、步骤分析第一步：确定事件(onsubmit)并为其绑定一个函数第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个id>)第三步：对用户输入的数据进行判断第四步：数据合法(让表单提交)第五步：数... 查看详情

如何禁止按回车键提交表单

出现自动提交的情况，有两种可能：一是编写了javascript代码，当用户点按Enter键时，通过js事件侦听机制触发表单的提交。二是利用了浏览器的默认行为（至少发现ie是这样的）。浏览器在解析网页的时候，有许多默认的行为，... 查看详情

如何禁止按回车键提交表单

出现自动提交的情况，有两种可能：一是编写了javascript代码，当用户点按Enter键时，通过js事件侦听机制触发表单的提交。二是利用了浏览器的默认行为（至少发现ie是这样的）。浏览器在解析网页的时候，有许多默认的行为，... 查看详情

Javascript：单击提交按钮时如何将隐藏的输入标签附加到表单中？

】Javascript：单击提交按钮时如何将隐藏的输入标签附加到表单中？【英文标题】：Javascript:Howtoappendhiddeninputtagintoaformwhensubmitbuttonisclicked?【发布时间】：2013-02-2309:42:07【问题描述】：我有隐藏输入标记的变量名称和值，我想在单... 查看详情

如何在没有单独的单击事件处理程序的情况下处理多个表单提交 [关闭]

】如何在没有单独的单击事件处理程序的情况下处理多个表单提交[关闭]【英文标题】：Howtohandlemultipleformsubmitswithoutindividualclickeventhandlers[closed]【发布时间】：2018-05-0611:39:41【问题描述】：我的mvc应用程序中有两个表单，所有表... 查看详情

js如何实现submit的点击事件判断是不是触发表单提交

...是否有值，如果没有我不想表单进行提交即不跳转页面，如何写这个事件？最简单有效的方法，即在form中加入回调函数，进行表单验证后再执行提交：在验证的JS函数中对表单的内容进行判断验证，然后以返回的值-true/false判断... 查看详情