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中each循环的简单回滚操作
May 05 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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获取网络上文件
2006/10/09 PHP
谈谈PHP语法(5)
2006/10/09 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
PHP反射API示例分享
2016/10/08 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python装饰器知识点补充
2018/05/28 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
服务承诺口号
2014/05/22 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
软环境建设心得体会
2014/09/09 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
后进生评语大全
2015/01/04 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书