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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery实现视频展示效果
May 30 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php $_SERVER当前完整url的写法
2009/11/12 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
RC4文件加密的python实现方法
2015/06/30 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
使用python爬取B站千万级数据
2018/06/08 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
电子商务应届生自我鉴定
2014/01/13 职场文书
小学毕业感言150字
2014/02/05 职场文书
小学生操行评语大全
2014/04/22 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
高二化学教学反思
2016/02/22 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python