如何用js动态给from页面增加input
<body>
<div align="center">
<div>
<h2>图片批量上传：仅限jpg格式</h2>
<%
String json = "";
if (request.getParameter("fileStr") != null) {
json = request.getParameter("fileStr");
json = json.replace("\"", "'");
}
%>
<%=json%>
</div>
<button id="b1" onclick="add()">增加+</button>
<br>
<form id="pic_load_form"
action="cn.chinatowercom.res.inventory.load.picupload.flow"
;
method="post" enctype="multipart/form-data">
<input type="file" id="file" name="resfile" class="nui-htmlfile"
width="300px" required="true" limitType="*.jpg"
requiredErrorText="请选择上传的文件！"> <br> <input
type="hidden" name="fileStr" value="<%=json%>" />
</form>
<br>
<div align="center">
<a class="nui-button" iconCls="icon-upload" onclick="submit()">
开始上传</a><br> <br> <br>
</div>
</div>
<script type="text/javascript">
nui.parse();
function submit() {
var form = new nui.Form("#pic_load_form");
form.validate();//验证表格所有单元格
var count = 9;
for (var x = 0; x < 9; x++)
if (form.isValid() == false) {
count--;
}
if (false) {
alert("至少要上传一张图片");
return;
}
alert("即将上传" + count + "张图片");
nui.loading("正在上传文件，请稍候。。。");
document.getElementById("pic_load_form").submit();
//window.close();
}
function add() {
var form = document.getElementById("pic_load_form");
var node = form.rows[1];
var cNode = node.cloneNode(true);
form.appendChild(cNode);
document.getElementById("b1").disabled = newTr.rowIndex == 9;
}
</script>
</body>
自己写的add方法不行，就是实现点击button按钮实现from里的第一个input动态增加，最多增加九个，折腾了好久不行，拜托大牛帮帮忙！非常感谢！
最新回答
绝处逢生
2023-04-04 02:10:42
这样：
<body>
<form id='form'> --定义form
</form>
<script>
var input = document.createElement('input'); //创建input节点
input.setAttribute('type', 'text'); //定义类型是文本输入
document.getElementById('form').appendChild(input ); //添加到form中显示
</script>
</body>
扩展资料：
注意事项
一、form属性可以使input标签不再form表单内时也属于form表单中的一部分
<form action="xxx" id="forms">
<input type="submit" value="提交">
</form>
<input type="text" form="forms" name="names">
<!-- IE中不支持这个属性 -->
二、JavaScript提交表单时，可以在input标签内添加required属性，在内容为空的时候阻止表单提交。
使用required属性时添加oninvalid属性可以自定义提示文字
<form action="xxx" method="post">
<input type="text" name="fname" required oninvalid="setCustomValidity('不能为空')">
<input type="submit" value="提交">
</form>
<!-- IE9及更早版本不支持 -->
暴力萌萌
2022-03-22 13:47:30
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
</style>
<script type="text/javascript">
function add ()
{
var form = document.getElementById ("pic_load_form");
var node = form.children[0];
var str = node.outerHTML;
form.innerHTML += str + "<br / >";
if (form.resfile.length == 9)
{
b1.disabled = 'disabled';
}
}
</script>
</head>
<body>
<div align="center">
<div>
<h2>图片批量上传：仅限jpg格式</h2>
</div>
<button id="b1" onclick="add()">增加+</button>
<br>
<form id="pic_load_form" action="cn.chinatowercom.res.inventory.load.picupload.flow" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="resfile" class="nui-htmlfile" width="300px" required="true" limitType="*.jpg" requiredErrorText="请选择上传的文件！">
<br> <input type="hidden" name="fileStr" value="<%=json%>" />
</form>
<br>
<div align="center">
<a class="nui-button" iconCls="icon-upload" onclick="submit()"> 开始上传</a><br> <br> <br>
</div>
</div>
</body>
</html>
甜心
2023-08-10 00:48:31
1、动态创建input节点
2、往form中添加Input节点
示例：
<body>
<form id='form'> --定义form
</form>
<script>
var input = document.createElement('input'); //创建input节点
input.setAttribute('type', 'text'); //定义类型是文本输入
document.getElementById('form').appendChild(input ); //添加到form中显示
</script>
</body>
热门标签
