form表单中存在动态添加的dom元素,表单提交的时候页面被清空了

提问 已结 10 62
newyoung
newyoung 2019-5-16
悬赏:20飞吻
版本:layui 2.4.5 浏览器:Chrome,Firefox,IE11
我在应用中遇到一个问题,就是在表单中需要动态添加增加表格录入表单信息,但是表单一提交form就会被清空成空白
在没有动态添加行之前是正常的

添加行之后

再点击保存


以下是简单的源码,替换layui的引用路径就可以在自己本地看到页面了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>动态添加行</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
</head>
<body>
<form class="layui-form" id="saveForm" lay-filter="saveForm">
<div class="yy01C">

<div class="layui-form-item layui-item-row">
<div class="layui-inline">
<label class="layui-form-label"><i>*</i>姓名</label>
<div class="layui-input-block">
<input type="text" name="userName" placeholder="请输入姓名" id="userName" value="" lay-verify="required" lay-vertype="tips" autocomplete="off" class="layui-input">
</div>
</div>
</div>



<div class="layui-form-item layui-item-row">
<div class="layui-inline">
<label class="layui-form-label"><i>*</i>成绩表</label>
<div class="layui-input-block">
<table cellspacing="0" cellpadding="0" id="table_score" class="layui-table form-table">
<thead>
<tr>
<th width="60%">学科</th>
<th width="40%">成绩<a href="javascript:void(0)" id="addScore" class="addholder"><i>添加</i></a></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="table-input" name="scoreList[0].scoreName" lay-verify="required" lay-vertype="tips" autocomplete="off"></td>
<td><input type="text" class="table-input table-input-opcol" name="scoreList[0].scoreVal" lay-verify="required|rate" lay-vertype="tips" autocomplete="off"><input type="button" class="delholder layui-btn-xs" value="删除"></td>
</tr>
</tbody>
</table>

</div>
</div>
</div>

<div class="layui-form-item form-item-center">
<button class="layui-btn" lay-submit="" lay-filter="saveData">保存</button>
<input type="button" id="cancle" class="layui-btn layui-btn-primary" value="取消">
</div>
</div>
</form>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form','laydate'], function(){

var $ = layui.$;
var form = layui.form;

/**保存*/
form.on("submit(saveData)",function(data){

layer.msg(data.field);
return false;
});

$("#addScore").click(function () {
var tr = "<tr ><td><input type='text' class='table-input' name='' lay-verify='required' lay-verType='tips' autocomplete='off' /></td><td ><input type='text' name='' lay-verify='required|rate' lay-verType='tips' autocomplete='off' class='table-input table-input-opcol' /><input type='button' class='delholder layui-btn-xs' value='删除'></td></tr>";
$("#table_score").append(tr);
resetTableIndex();
form.render();

$(":button").click(function () {
$(this).parent().parent().remove();

resetTableIndex();
form.render();
});
});
//动态添加行
function resetTableIndex(){
$("#table_score tbody tr").each(function(index){
$(this).find("td").eq(0).find("input").attr("name",'scoreList['+index+'].scoreName');
$(this).find("td").eq(1).find("input[type='text']").attr("name",'scoreList['+index+'].scoreVal');
});
}
//取消
$("#cancle").click(function(){
layer.msg("取消了");
});
});
</script>
</body>
</html>
回帖
  • 红烧鱼i
    2019-5-16
    仔细检查代码,layui的form没有这个bug
    0 回复
  • newyoung
    2019-5-16
    @红烧鱼i 我可以给你发页面源码,你执行一次就知道有没有了,这个绝对有问题
    0 回复
  • 红烧鱼i
    2019-5-16
    @newyoung 你QQ多少[嘻嘻] [嘻嘻]
    0 回复
  • newyoung
    2019-5-16
    这是源码可以看看
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1554901098009" media="all">
    <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
    </head>
    <body>
    <form class="layui-form" id="saveForm" lay-filter="saveForm">
    <div class="yy01C">

    <div class="layui-form-item layui-item-row">
    <div class="layui-inline">
    <label class="layui-form-label"><i>*</i>姓名</label>
    <div class="layui-input-block">
    <input type="text" name="userName" placeholder="请输入姓名" id="userName" value="" lay-verify="required" lay-vertype="tips" autocomplete="off" class="layui-input">
    </div>
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label"><i>*</i>生日</label>
    <div class="layui-input-block">
    <input type="text" name="birth" lay-verify="required" lay-vertype="tips" value="" readonly="readonly" placeholder="请选择" autocomplete="off" class="layui-input" id="birth" lay-key="1">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label"><i>*</i>城市</label>
    <div class="layui-input-block">
    <select name="city" class="layui-select" lay-verify="required">
    <option value=""></option>
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
    <option value="4">杭州</option>
    </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips layui-this">请选择</dd><dd lay-value="0" class="">北京</dd><dd lay-value="1" class="">上海</dd><dd lay-value="2" class="">广州</dd><dd lay-value="3" class="">深圳</dd><dd lay-value="4" class="">杭州</dd></dl></div>
    </div>
    </div>
    </div>
    <div class="layui-form-item layui-item-row">
    <div class="layui-inline">
    <label class="layui-form-label"><i>*</i>成绩</label>
    <div class="layui-input-block">
    <input type="text" name="score" placeholder="请输入成绩" value="" lay-verify="required|Score" lay-vertype="tips" autocomplete="off" class="layui-input">
    </div>
    </div>
    </div>

    <div class="layui-form-item layui-item-row">
    <div class="layui-inline">
    <label class="layui-form-label"><i>*</i>成绩</label>
    <div class="layui-input-block">
    <table cellspacing="0" cellpadding="0" id="table_score" class="layui-table form-table">
    <thead>
    <tr>
    <th width="60%">科目名称</th>
    <th width="40%">分数<a href="javascript:void(0)" id="addScore" class="addholder"><i>添加</i></a></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><input type="text" class="table-input" name="scoreList[0].scoreName" lay-verify="required" lay-vertype="tips" autocomplete="off"></td>
    <td><input type="text" class="table-input table-input-opcol" name="scoreList[0].scoreVal" lay-verify="required|rate" lay-vertype="tips" autocomplete="off"><input type="button" class="delholder layui-btn-xs" value="删除"></td>
    </tr>
    </tbody>
    </table>

    </div>
    </div>
    </div>
    <div class="layui-form-item layui-item-row">
    <div class="layui-inline">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-block">
    <textarea name="memo" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
    </div>
    </div>
    <div class="layui-form-item form-item-center">
    <!-- <input type="hidden" name="teacher.teacherName" value="马老师" />
    <input type="hidden" name="teacher.teacherSex" value="男" />
    <input type="hidden" name="teacher.teacherAge" value="30" />-->
    <button class="layui-btn" lay-submit="" lay-filter="saveData">保存</button>
    <input type="button" id="cancle" class="layui-btn layui-btn-primary" value="取消">
    </div>
    </div>
    </form>
    <script src="//res.layui.com/layui/dist/layui.js?t=1554901098009"></script>
    <script type="text/javascript">
    layui.use(['form','laydate'], function(){
    //弹出窗口成功后渲染表单
    var $ = layui.$;
    var form = layui.form;
    var laydate=layui.laydate;

    //执行一个laydate实例
    laydate.render({
    elem: '#birth', //指定元素
    trigger: 'click'
    });

    //兴趣多选框
    form.on('checkbox(interest)', function(data){//interest是lay-filter的值
    var value=data.value;
    var interest=$("#interest").val();
    if(interest){
    var index=interest.indexOf(value);
    var splitIndex=interest.indexOf(",");
    if(index!=-1){//已存在
    if(data.elem.checked==false){//选项取消
    if(index==0){//在首位
    if(splitIndex==-1){//只选中了一个值
    interest=interest.replace(value,"");
    }else{//选中了多个值
    interest=interest.replace(value+",","");
    }
    $("#interest").val(interest);
    }else{//在其他位置
    interest=interest.replace(","+value,"");
    $("#interest").val(interest);
    }
    }
    }else{//不存在
    if(data.elem.checked){
    interest=interest+","+value;
    $("#interest").val(interest);
    }
    }
    }else{
    if(data.elem.checked){
    $("#interest").val(value);
    }
    }
    });
    //默认选中checkbox
    var interest=$("#interest").val();
    if(interest){
    var arrays=interest.split(",");
    for(var i=0;i<arrays.length;i++){
    $("input[lay-filter='interest']").each(function(){
    if ($(this).val() == arrays[i]) {
    this.checked=true;
    }
    });
    }
    }
    form.render('checkbox')

    form.verify({
    IsAge: function(input) {
    var regex = /^(?:[1-9][0-9]?|1[0-9][0-9]|200)$/;
    if(!input.match(regex)) {
    return "请输入正确的年龄";
    }
    },
    Score: function(input) {
    var regex =/^(100|([1-9][0-9]{0,1}|[0-9])(\.\d?\d?)?)$/;
    if(!input.match(regex)) {
    return "请输入正确的成绩(0~100)";
    }
    }
    });

    /**保存*/
    form.on("submit(saveData)",function(data){ //saveData 为lay-filter的值

    layer.msg(data.field);
    return false;
    });

    $("#addScore").click(function () {
    var tr = "<tr ><td><input type='text' class='table-input' name='' lay-verify='required' lay-verType='tips' autocomplete='off' /></td><td ><input type='text' name='' lay-verify='required|rate' lay-verType='tips' autocomplete='off' class='table-input table-input-opcol' /><input type='button' class='delholder layui-btn-xs' value='删除'></td></tr>";
    $("#table_score").append(tr);
    resetTableIndex();
    form.render();
    var height=$(document.body).height()+10;
    $(window.parent.document).find("#myiframe").attr("height",height);

    $(":button").click(function () {
    $(this).parent().parent().remove();
    var height1=$(document.body).height()+10;
    $(window.parent.document).find("#myiframe").attr("height",height1);
    resetTableIndex();
    form.render();
    });
    });
    //重新根据表格下标设置文本框名称
    function resetTableIndex(){
    $("#table_score tbody tr").each(function(index){
    $(this).find("td").eq(0).find("input").attr("name",'scoreList['+index+'].scoreName');
    $(this).find("td").eq(1).find("input[type='text']").attr("name",'scoreList['+index+'].scoreVal');
    });
    }



    //取消
    $("#cancle").click(function(){
    layer.msg("取消了");

    });
    });
    </script>
    </body>
    </html>
    0 回复
  • 红烧鱼i
    2019-5-16
    @newyoung 稍等一下,我打开看一下
    0 回复
  • 红烧鱼i
    2019-5-16
    看不出来,代码跑不通
    0 回复
  • newyoung
    2019-5-16
    @红烧鱼i 你QQ多少,我发你文件
    0 回复
  • 红烧鱼i
    2019-5-16
    @newyoung 你发你QQ ,我加你
    0 回复
  • newyoung
    2019-5-16
    @红烧鱼i 984468925
    0 回复
  • newyoung
    2019-5-16
    $(":button").click(function () {    
    $(this).parent().parent().remove();
    var height1=$(document.body).height()+10;
    $(window.parent.document).find("#myiframe").attr("height",height1);
    resetTableIndex();
    form.render();
    });
    感谢@红烧鱼i,问题出在这里,删除行的选择器不够准确导致整个form被删除
    0 回复