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绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jquery插件实现搜索历史
Apr 24 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
python读取注册表中值的方法
2013/04/08 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
pandas数据处理进阶详解
2019/10/11 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python文件编写好后如何实践
2020/07/07 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
DOM和JQuery对象有什么区别
2016/11/11 面试题
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
学校运动会开幕词
2016/03/03 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB