如何在JavaScript中收听表格提交事件？

Question

我想编写自己的表单验证JavaScript库，并且我一直在寻找Google如何检测是否单击提交按钮，但我发现的只是您必须在其中使用onclick On onsubmit =“ function（）” < /代码>在HTML中。

我想制作此JavaScript，这样我就不必触摸任何HTML代码，例如添加OnSubmit或OnClick JavaScript。

Answer 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
}

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

关于 eventTarget.AddeventListener ，查看。

要取消本机提交事件（防止表格被提交），请使用 .preventdefault（） 在您的回调功能中，

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

---

收听提交带有库的事件，

如果由于某种原因决定了一个库（您已经在使用一个库，或者您不想处理跨浏览器问题）在普通库中收听提交事件的方法：

1. jQuery

     $（ele）.submit（呼叫）;
    

   其中 ele 是表单元素参考， callback 是回调函数参考。 参考

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

2. angularjs（1.x）

    ＆lt; form ng-submit =“ callback（）”＆gt;
   
   $ scope.callback = function（）{/*....*/};
    

   非常简单，其中 $ scope 是“ noreferrer”>控制器。 参考

3. eack

    ＆lt; form onSubmit = {this.handlesubmit}＆gt;
   
   类YourComponent扩展了组件{
       // 东西
   
       handlesubmit（event）{
           //在这里做任何您需要的事情
   
           //如果您需要停止提交事件，并且 
           //执行/派遣您自己的动作
           event.preventDefault（）;
       }
   
       //更多东西
   }
    

   只需将处理程序传递到 onsubmit prop。 参考

4. 其他框架/libraries

   请参阅您的框架文档。

---

验证

您可以随时在JavaScript中进行验证，但是使用HTML5，我们也具有本机验证。

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

您甚至不需要任何JavaScript！每当不支持本机验证时，您都可以退缩到JavaScript验证器。

演示：

Answer 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();
}

Answer 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>

Answer 4

如果您在同一页面中有多个表格＆amp;您想处理提交事件听众而不使用ID

jQuery

$('form').submit(function (event) {
    targetObj = event.target;
    // do your logic
});

---

纯JavaScript Trick

onload在下面的下载。

for(var i=0; i<document.forms.length; i++){
    var form = document.forms[i];
    form.addEventListener("submit", myListener,false);
}

信用： - 多表单提交活动听众使用JavaScript信用来访问 Jan Pfeifer在Stackoverflow社区上的答案

我希望这对某人有帮助

Answer 5

与jQuery：

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

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