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实现动态删除LI的方法
May 30 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
拖拉表格的JS函数
2008/11/20 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
vue中如何使用ztree
2018/02/06 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
python插入数据到列表的方法
2015/04/30 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
对python函数签名的方法详解
2019/01/22 Python
使用python模拟高斯分布例子
2019/12/09 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
给医院的感谢信
2015/01/21 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015年党总支工作总结
2015/05/25 职场文书
新员工入职感言范文!
2019/07/04 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers