jquery submit()不能提交表单的解决方法


Posted in jQuery onApril 24, 2017

 今天写表单提交的时候需要增加一个确认提示,所以没有使用submit按钮提交,改用jq的submit(),然后问题了

<form class="form-horizontal m-t" method="post" action="@Url.Action("Edit")" id="form">
    <div class="row">
      <div class="col-sm-12">
        <div class="ibox float-e-margins">
          <div class="ibox-title">
            <h5>添加</h5>
          </div>
          <div class="ibox-content">
            <div class="form-group">
              <label class="col-sm-3 control-label">开始时间:</label>
              <div class="col-sm-8">
                <span>
                  @(Model.annualRate_beginDate?.ToString("yyyy-MM-dd"))
                </span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">结束时间:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" name="annualRate_endDate" id="annualRate_endDate" onclick="laydate({ istime: false, format: 'YYYY-MM-DD' })" value="@Model.annualRate_endDate.ToString("yyyy-MM-dd")" required>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">年利息%:</label>
              <div class="col-sm-8">
                <input type="number" step="0.01" class="form-control" id="annualRate_rate" name="annualRate_rate" value="@Model.annualRate_rate.ToString("#0.00")" required>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-lg btn-primary" id="submit_btn" type="button">
                  提交
                </button>

                <a class="btn btn-lg btn-white" href="@Url.Action(" rel="external nofollow" Index")">
                  取消
                </a>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </form>
<script type="text/javascript">
  $(function () {
    $("#submit").click(function () {
      var start = '@(Model.annualRate_beginDate?.ToString("yyyy-MM-dd"))';
      var end = $("#annualRate_endDate").val();
      var val = $("#annualRate_rate").val();
      layer.confirm('请确认所填写的信息是否正确?<br/>开始时间:' + start + '<br/>结束时间:' + end + '<br/>年利率:' + val, { icon: 3, title: '提示' }, function (index) {
        $("#form").submit();
        layer.close(index);
      });
    });
  })
</script>

点击提交按钮出现确认提示,但是确认后就没反应了

但是将button的type改为submit却又能提交

于是上jQuery API查找原因,看到以下这段文字顿时明白了:

Additional Notes:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

大概意思是表单和其子元素不宜用一个表单的属性的属性作为name或id的名称,如submit, length, 和 method等,否则会产生冲突,名称冲突可能就会导致这种情况。

原来是因为按钮id设为了submit

接下来只要将id改了就没问题了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 #jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
jQuery+pjax简单示例汇总
Apr 21 #jQuery
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
You might like
PHP删除数组中的特定元素的代码
2012/06/28 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
php单链表实现代码分享
2016/07/04 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
python写的ARP攻击代码实例
2014/06/04 Python
Python中的闭包实例详解
2014/08/29 Python
Python实现去除代码前行号的方法
2015/03/10 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
python删除过期log文件操作实例解析
2018/01/31 Python
Python socket实现简单聊天室
2018/04/01 Python
python单例模式实例解析
2018/08/28 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
如何获得EntityManager
2014/02/09 面试题
园长自我鉴定
2013/10/06 职场文书
应用电子专业学生的自我评价
2013/10/16 职场文书
建筑专业自我鉴定
2013/10/22 职场文书
《太阳》教学反思
2014/02/21 职场文书
元旦获奖感言
2014/03/08 职场文书
护校行动方案
2014/05/31 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
爱国主义主题班会
2015/08/14 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
opencv 分类白天与夜景视频的方法
2021/06/05 Python