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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现本地存储
Dec 22 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中var_export与var_dump的区别分析
2010/08/21 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PDO::errorCode讲解
2019/01/28 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
layui 设置table 行的高度方法
2018/08/17 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
巴黎一票通:The Paris Pass
2018/02/10 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
怎样声明接口
2014/09/19 面试题
妇科医生自荐信
2013/11/05 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle