我同事在实现submit()提交表单时,想要页面弹出警示框。

但是折腾了几小时后发现,submit()始终不执行。

她的代码如下:

$(document).ready(function(){
  $("button").click(function(){
    $("form").submit(function(e){
      alert("Submitted");
    });
  });
});

在点击‘button’时,给form表单绑定了一个submit事件,并没有触发表单域的submit事件,自然也就无法执行绑定到submit事件的函数。

在w3c上对submit()方法的定义和用法有着明确的说明:

1.当提交表单时,会发生submit事件。

2.该事件只适用于表单元素。

3.submit()方法触发submit事件,或规定当发生submit事件时运行的函数。

我们需要先触发submit事件,之后再运行绑定到submit事件的函数。

正确写法如下:

$(document).ready(function(){

  $("button").click(function(){
    $("form").submit();
  });

  $("form").submit(function(e){
    alert("Submitted");
  });
});

在点击‘button’时,form表单执行submit方法,从而触发submit事件,执行绑定到submit事件的函数体。

个人拙见,欢迎指正,谢谢。

submit()提交表单时,显示警示框的更多相关文章

  1. 使用struts2的内置标签,采用submit()提交表单时,浏览器报404

    如图 url是没有问题的,结果我将提交方式改为get时,发现有2个参数的name值是一样的,如下图, 解决方法:将name的值修改就OK了.

  2. php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别

    if(isset($_POST['submit'])) 它的意思是不是判断是否配置了$_POST['submit'] 这个变量呢?如果有这个变量 在执行其它代码 应该这样用if(isset($_POS ...

  3. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  4. Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  5. Django:提交表单时遇到403错误:CSRF verification failed

    Django:提交表单时遇到403错误:CSRF verification failed 问题: 提交表单时遇到403错误:CSRF verification failed 解决方案: 在表单界面ht ...

  6. php提交表单时如何保留多个空格及换行的文本样式

    需求是:用户提交表单时屏蔽敏感词的功能.其中敏感词来自服务器端同一路径下的ciku.txt,敏感词通过"|"连接,例如"g|c|a",提交表单时替换敏感词,更重 ...

  7. POST方式提交表单时,后台接受实体如果继承了父类,将无法映射表单对应数据

    引言 刚才在做一个post提交表单时,我在表单里放了几个隐藏域用来存放数据,表单name属性和后台实体属性签名保持一致.只是后台Action参数包含继承关系,所以无法获取到表单对应的值.刚开始一直纳闷 ...

  8. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    $(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...

  9. POST提交表单时EnType设置问题

    POST提交表单时EnType设置问题 首先知道enctype这个属性管理的是表单的MIME编码.共有三个值可选: 1.application/x-www-form-urlencoded 2.mult ...

随机推荐

  1. 【BZOJ2132】圈地计划(最小割)

    [BZOJ2132]圈地计划(最小割) 题面 BZOJ 题解 对我而言,不可做!!! 所以我膜烂了ZSY大佬 他的博客写了怎么做... 这,,...太强啦!! 完全想不到黑白染色之后反着连边 然后强行 ...

  2. [BZOJ3506] [Cqoi2014] 排序机械臂 (splay)

    Description 同OJ1552 Input Output Sample Input Sample Output HINT Source Solution Q:哎不是同一道题吗为什么分两篇博客来 ...

  3. Ubuntu 16.04 安装Mysql 5.7 踩坑小记

    title:Ubuntu 16.04 安装Mysql 5.7 踩坑小记 date: 2018.02.03 安装mysql sudo apt-get install mysql-server mysql ...

  4. MongoDB 搭建文件存储的方案

    用云的话,节省你开发成本,快速上线,数据比较安全.缺点是一旦用了他们的,形成习惯以后,数据想迁移就会比较麻烦,你会越来越依赖,而且规模上去以后价格并不低.早年自己做的话,你需要实现分布式文件系统,这个 ...

  5. 团体程序设计天梯赛 L1-034.点赞

    描述 微博上有个"点赞"功能,你可以为你喜欢的博文点个赞表示支持.每篇博文都有一些刻画其特性的标签,而你点赞的博文的类型,也间接刻画了你的特性.本题就要求你写个程序,通过统计一个人 ...

  6. js 数组 remove

    在写js代码时候,有时需要移除数组的元素,在js数组中没有remove 方法, 不过有splice 方法同样可以用于移除数组元素:(http://www.w3school.com.cn/jsref/j ...

  7. Xss问题解决方案

    xss跨站脚本攻击问题最主要是呈现在html页面的脚本被执行导致的结果,可分为两个方便作屏蔽 后台屏蔽 在前端上传的各个参数后,对其进行转义后再保存至数据库,属于暴力式转义,一般不建议.下面是写的例子 ...

  8. Kotlin封装RxJava与Retrofit

    代码地址:https://github.com/DarkPointK/RxTrofit.git 前言 Retrofit是Square公司开发的一个类型安全的Java和Android 的REST客户端库 ...

  9. Redis相关命令

    一.命令示例 1. KEYS/RENAME/DEL/EXISTS/MOVE/RENAMENX: #在Shell命令行下启动Redis客户端工具. /> redis-cli #清空当前选择的数据库 ...

  10. Tomcat下wtpwebapps文件夹 和 webapps文件夹区别

    这两者其实没有区别.都是项目部署路径 webapps : tomcat默认部署路径 wtpwebapps : eclipse默认部署路径 只不过Tomcat6将wtpwebapps作为了默认路径,如果 ...