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 Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现图片切换效果
Oct 19 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP页面间传递参数实例代码
2008/06/05 PHP
php cookis创建实现代码
2009/03/16 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
js获取单选框或复选框值及操作
2012/12/18 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Python实现简单多线程任务队列
2016/02/27 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
pandas重新生成索引的方法
2018/11/06 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
《四季》教学反思
2014/04/08 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
植树节新闻稿
2015/07/17 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
python实现简单的井字棋
2021/05/26 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android