前情回顾

随意删除添加后保存到服务端的input,再次编辑时(先调用服务端保存的值)添加新的input输入框name值可能会生成重复,提交保存时,name值重复的input元素会覆盖已有元素。

昨天借鉴jquery无刷新添加和删除input输入框 增加减少input框 的思路实现了jQuery无刷新随意添加和删除input输入框,但是在使用layui结合ajax提交时,发现随意添加/删除后会生成重复name值的input输入框(比如name=”edu_bg[5]” / name=”edu_bg[6]” / name=”edu_bg[5]” 三个输入框)进行编辑提交,提交后只保存了后两个值,因为layui表单中name不支持数组的形式,相同的name也只会提交最后一个,layui社区也有朋友分享出解决方法:表单input不支持数组方式询问+解决办法,可以借鉴下。

思路整理

综合了一大堆搜索及意见,也不想改动框架的代码,决定采用以下方式:

1、获取已经存在的子元素input的长度及name值,将获取的name值推入一个数组arr1中;
2、定义初始值key=0,定义插入函数insertInput(),key++循环;
3、当edu_bg[key]不在数组arr1中时,创建元素并append()推入父元素内完成,否则,重新执行insertInput()函数。

代码实现

HTML代码

主要是定义几个已有的包含input的子元素(模拟从服务端获取的已有元素),然后定义一个包含点击事件的按钮元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="layui-form-item yf-input-del">
<label class="layui-form-label">教育背景</label>
<div class="layui-input-block" id="edu_bg">
#//测试随机创建几个连续和不连续的子元素,真实场景下直接循环出你已有的子元素即可
<div class="layui-input-inline">
//input文本框
<input type="text" name="edu_bg[5]" value="" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
//删除按钮
<i class="layui-icon deleteEduBg">ဆ</i>
</div>
<div class="layui-input-inline">
<input type="text" name="edu_bg[6]" value="" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
<i class="layui-icon deleteEduBg">ဆ</i>
</div>
<div class="layui-input-inline">
<input type="text" name="edu_bg[9]" value="" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
<i class="layui-icon deleteEduBg">ဆ</i>
</div>
</div>
</div>
<div class="layui-form-item" id="edu_bg_add">
<label class="layui-form-label"></label>
<div class="layui-input-inline">
<a href="javascript:;" class="layui-btn site-demo-active" onclick="insertInput()">
<i class="layui-icon"></i> 新增1条教育背景
</a>
</div>
</div>

JavaScript代码

定义一个插入函数insertInput()和一个点击删除函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//引入layui.js
<script src="/layui/dist/layui.all.js"></script>
<script>
var $ = layui.jquery; //引用layui内置的jQuery,也可以自己调用
var key1=$("#edu_bg").children(".layui-input-inline").length;
var FieldCount1=0;
function insertInput() {
//检索已有的input包含的name值
var arr1=[];
FieldCount1++;
$("#edu_bg input[type='text']").each(function(){
arr1.push($(this).attr('name'));
});
//console.log(arr1);
//所有name加入数组arr1
var div1 = $("<div></div>").addClass("layui-input-inline");
//console.log(edu_bg[FieldCount1]);
var newCount1="edu_bg["+FieldCount1+"]";
//判断新生成的name值是否在已存在的数组中
if($.inArray(newCount1, arr1) === -1){
FieldCount1=FieldCount1;
var input1 = "<input type='text' name='edu_bg["+FieldCount1 +"]' value='' autocomplete='off' placeholder='请输入' lay-verify='required' class='layui-input'>"
var icon1 = "<i class='layui-icon deleteEduBg' onclick='deleteElement(this)'>ဆ</i>";
div1.append(input1, icon1);
$("#edu_bg").append(div1); // 追加新元素
key1++;
}else{
FieldCount1++;
insertInput();
}
}
$("body").on("click",".deleteEduBg", function(e){ //user click on remove text
if( key1 > 1 ) {
$(this).parent('div').remove(); //移除对应的父级div元素
key1--; //decrement textbox
}else{
alert("请至少填写1条教育背景信息!");
return false;
}
})
</script>

补充CSS样式

这部分没必要,自己来就行,只是为了自己测试时样式顺眼一丢丢。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link rel="stylesheet" href="/layui/dist/css/layui.css">
<style type="text/css">
/* 新增删除图标的样式 */
.yf-input-del .layui-input-inline .layui-input {
padding-right: 20px;
margin-bottom: 10px;
}
.yf-input-del .layui-input-inline i.layui-icon {
position: absolute;
right: 2px;
top: 8px;
color: #999999;
}
</style>

写在最后

整个实现的过程是自己摸索和反复测试的过程,代码中也还有不少需要优化的地方,也可能会在以后的使用中继续优化整改,抛砖引玉,仅供大家参考。

layui官网文档 http://www.layui.com/doc/

jQuery API中文文档 http://www.css88.com/jqapi-1.9/