JS实现表单延伸以及数据预存功能
2021-01-23 本文已影响0人
HueyYao
JS实现表单延伸以及数据预存功能
需求：在后台添加分类是涉及到的二级分类添加时非常繁琐，可以通过js来实现一次上传多条分类信息的功能。
使用form表单提交 在input后添加增加按钮 获取input的信息 生成新的input标签
在生成新标签时会出现一个问题 按照正常写法 会重置表单 把当前写好的input内容重置掉，所以还需要添加表单预存功能 在添加前获取当前表单的数据 然后再添加后再重新写入表单。就完美实现了此功能
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无限延生input案例</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<form name="saveForm" id="saveForm" method="post" action="" onsubmit="return checkForm(this)">
<tr>
<th valign="top">分类名称 ： </th>
<td id="classNameList">
<input type="text" name="name0" id="name0" class="site-table-input" value=""/>
<button id="addInputByName" style="background: #c30;color: white;padding: 1px 2px 1px 5px;border-radius: 4px;cursor: pointer;" onclick="addInput()">增加+</button>
<input type="hidden" name="inputNum" id="inputNum" value="1">
</td>
</tr>
<script type="text/javascript">
var inputNum = 1;
function addInput(){
var vs = new Array(); //预存值对象
//获取 xx DIV 中的所有 INPUT 标签元素
var inputs = document.getElementById("classNameList").getElementsByTagName("input");
//遍历存储其 value
for (var i = 0; i < inputs.length; i++) {
vs[i] = inputs[i].value;
}
console.log(vs);
var form = document.getElementById("classNameList");
var str = "<input type='text' name='name"+inputNum+"' id="+"name"+inputNum+""+" class='site-table-input'>";
inputNum++;
form.innerHTML += "<p>"+str +"</p>";
//获取执行添加后的元素集合
inputs = document.getElementById("classNameList").getElementsByTagName("input");
//为其赋原先的值
for (var i = 0; i < vs.length; i++) {
inputs[i].value = vs[i];
}
document.getElementById('inputNum').value=inputNum;
}
</script>
</table>
</form>
</body>
</html>
