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+pjax简单示例汇总
Apr 21 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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中全局变量global的使用演示代码
2011/05/18 PHP
PHP实现微信发红包程序
2015/08/24 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
python3实现读取chrome浏览器cookie
2016/06/19 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
深入学习python多线程与GIL
2019/08/26 Python
QML实现钟表效果
2020/06/02 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
开业主持词
2014/03/21 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
初中教师个人总结
2015/02/10 职场文书
团员年度个人总结
2015/02/26 职场文书
房贷收入证明范本
2015/06/12 职场文书
房贷工资证明范本
2015/06/12 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书