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 11 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现推拉门效果
Oct 19 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
javascript实现的简单的表单验证
2015/07/10 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
JavaScript中的this机制
2016/01/30 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
如何快速上手Vuex
2017/02/14 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
详解Python中最难理解的点-装饰器
2017/04/03 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
母婴店促销方案
2014/03/05 职场文书
门店业绩提升方案
2014/06/08 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
文明家庭事迹材料
2014/12/20 职场文书
营销计划书
2015/01/17 职场文书
人力资源部岗位职责
2015/02/11 职场文书
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android