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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
python MySQLdb使用教程详解
2018/03/20 Python
python常用排序算法的实现代码
2019/11/08 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Python while true实现爬虫定时任务
2020/06/08 Python
店长岗位的工作内容
2013/11/12 职场文书
护理学毕业生求职信
2013/11/14 职场文书
质量工程师岗位职责
2013/11/16 职场文书
开会迟到检讨书
2014/01/08 职场文书
中学生自我评价范文
2014/02/08 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
幼儿园小班教学反思
2016/03/03 职场文书