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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 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不用正则采集速度探究总结
2008/03/24 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
详解php的socket通信
2015/08/11 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python executemany的使用及注意事项
2017/03/13 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
django模板结构优化的方法
2019/02/28 Python
python print出共轭复数的方法详解
2019/06/25 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Django数据库迁移常见使用方法
2020/11/12 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
毕业生就业自荐信
2013/12/04 职场文书
水电站项目建议书
2014/05/12 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android