弹出层表单重复提交,加lay-filter不起作用

未结贴
13 818
paul_howard
paul_howard 2017-07-11
悬赏:20飞吻
需求说明:如图 ,点击页面的拒绝,会有一个弹窗 ,弹窗获取方式为ajax,通过GET请求获取,请求成功才展示出来。在弹窗的页面选择拒绝原因,点击提交,请求成功页面关闭,同时修改审核状态为 “拒绝”,需求结果如图:

结果:表单重复提交,如图: ,最终页面: ,而且点击拒绝次数越多重复提交的次数也递增

其他说明:页面本身使用了layui.form组件,也使用lay-filter监听提交

整个方法如下:
function auditFailure(id,guid){
$.ajax({
url: "${pageContext.request.contextPath}/apollo/user/getAuditFailurePage.do",
type: 'GET',
dataType: 'html',
cache: false,
data: {"id": id,"guid":guid},
success: function (html, statusText) {
var open = layer.open({
/* title: false, */
title: "请选择拒绝原因",
type: 1,
skin: 'layui-layer-demo1', //样式类名
closeBtn: 1, //不显示关闭按钮
area: ['540px', '380px'],
shade:0.6,
move:false,
shadeClose: true, //是否点击遮罩关闭
content: html
});
layui.use('form', function () {
var form = layui.form();
form.render();
// 提交表单
form.on('submit(auditFailureBtn)', function (data) {
$.ajax({
url: "${pageContext.request.contextPath}/apollo/user/auditHostApply.do",
data : $("#failureForm_"+id).serialize(),
type : "POST",
dataType: 'json',
success : function(data) {
if(data.returnState.isSucceed=="1"){
var $th = $("#audit_"+id).empty();
$th.text("拒绝");
layer.msg(" "+data.returnState.msg,{icon: 6,shade:0.5,time:1000});
}else{
layer.msg(" "+data.returnState.msg,{icon: 5,shade:0.5,time:1000});
}
},
error : function(data) {
layer.msg(" "+data.returnState.msg,{icon: 5,shade:0.5,time:4000});
}
});
return false;
});
return false;
});
},
error: function (e) {
layer.alert("系统出错,请联系管理员");
return false;
}
});
return false;
};

弹窗层页面代码:
<form class="layui-form" style="margin-top:30px" id="failureForm_${requestScope.id }">
<input type="hidden" name="id" value="${requestScope.id }">
<input type="hidden" name="guid" value="${requestScope.guid }">
<div class="layui-form-item" >
<div class="layui-input-block">
<input type="radio" name="auditStatus" value="100" title="头像不合格,面部不清晰">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="radio" name="auditStatus" value="200" title="头像和视频不匹配,不是同一个人" >
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="radio" name="auditStatus" value="300" title="视频中用户说的数字和系统提供的数字不一致" >
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="radio" name="auditStatus" value="400" title="以上3种情况都不符合" >
</div>
</div>
<br><br>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="auditFailureBtn">提交</button>
                
                
                
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>

各位前端大神,不吝赐教,本人其实是个java程序猿,接触前端实属无赖
回帖
  • 墨涵
    2017-08-15
    @paul_howard
    你的表单有这几个吗?

    1 回复
  • 工作
    2017-07-11
    <button class="layui-btn" lay-submit="" lay-filter="auditFailureBtn">提交</button> 换成<input type="button"> 试试
    0 回复
  • 工作
    2017-07-11
    或者form 标签改成DIV试试
    0 回复
  • 墨涵
    2017-07-11
    0 回复
  • 自己设计的不行,按逻辑来
    点击拒绝后在调用的方法中先取消拒绝的点击事件即再次点击拒绝没效果,不然你ajax请求数据时间长,点几次执行几次。
    中间提交的过程我就不说了,成功后修改父页面的拒绝并关闭弹层
    在弹层的end:function中再把那个拒绝设为可点击

    0 回复
  • paul_howard
    2017-07-11
    @工作 form换成div不起作用,button换成<input type="button" class="layui-btn" onclick="XXX()">,使用自定义方法,可以解决重复提交问题。也就是原方法的form.on('submit(auditFailureBtn)', function (data) { },不要了,这样关闭弹窗貌似只能使用layer.closeAll()了
    0 回复
  • paul_howard
    2017-07-11
    @墨涵 老铁,你的方法会让整个页面变成这样:

    地址栏变成:http://localhost:8080/customerService/app/user/findHost.do?id=12&guid=262&auditStatus=300 , 这个请求路径是查询的,参数不对
    0 回复
  • paul_howard
    2017-07-11
    @單克拉的眼淚 你的意思是 : 表单重复提交是因为没有取消其他拒绝按钮绑定的事件吗
    0 回复
  • 工作
    2017-07-13
    @paul_howard 就是你本身提交了一次,然后按钮又提交了一次这样 就会重复的,然后你的页面样式自己重新调下就行了
    0 回复
  • 工作
    2017-07-13
    @paul_howard 然后关闭弹出层的你可以看看 layui的文档里面有详细的介绍的,[馋嘴] ,还有你也可以用layui弹出层自动的按钮 ,也可以的 方式很多
    0 回复
  • paul_howard
    2017-07-13
    @工作 感谢大神的帮助,我把button换成input解决表单重复提交的问题了,感谢又提供了新思路
    0 回复
  • 工作
    2017-07-13
    0 回复
  • qiurui
    27天前
    @墨涵 按照你的方法确实可行
    0 回复
近期热议
layui 2.1.5 发布,局部细节优化 59
预告一下,下一个版本 table 模块会大幅增强 44
table 里面的删除按钮怎么操作 24
开放 layui 官方交流二群 23
数据表格 自定义响应体 无反应 22
form事件提交以后,后台返回的json怎么获取? 22
layui图标显示问题 21
数据表格的使用问题!!急求大佬帮忙解决 21
经多人举报,某 layui 千人群存在管理员恶意误导行为 20
java后台快速开发框架automain发布,前端部分支持且仅支持layui 19
layui

微信扫码关注 layui 公众号