![](/img/trans.png)
[英]Click button in form 1: change value of hidden input in form 2 (pure javascript)
[英]Dynamically generate form input fileds increment and decrement on click of button using pure javascript only
ES6 /Pure javascript /无框架或 jquery / Document.createElement() / Node.appendChild()在此输入图片描述
制作一个 HTML 表单,用户必须在其中添加成员详细信息。尝试制作一个按钮来生成一个新的 set op 输入字段,并增加 className/id 或占位符,例如:第一个生成的输入应该有一个 className/id 或占位符input1 和下一个带有 className/id 或 input2 占位符的下一个等等。
我创建了一个脚本,但它动态添加了输入字段,但不会增加添加成员的计数。增量必须仅从 1 到 10 开始。
单击添加按钮时,输入字段必须添加,并且每次单击添加成员时计数必须增加,最多只能有 10 个成员。
并且点击删除按钮输入字段必须删除成员输入字段减少计数。
<div class="container ">
<form action="">
<input class="name" type="text" placeholder="Name">
<input class="email" type="email" placeholder="Email" value="abc@test.com">
<input class="phone" type="text" placeholder="Phone" value="8888888888">
<div class="field">
<div class="control">
<button class="button addMember">
Add Member
</button>
</div>
<div class="control">
<button class="button delMember">
Delete Member
</button>
</div>
<div class="control">
<button class="button resetForm">
Reset
</button>
</div>
</div>
</form>
</div>
<section class="addinputs">
</section>
</div>
<script>
document.querySelector(".addMember").addEventListener('click', getAdd);
function getAdd(event) {
event.preventDefault();
var count=1;
document.querySelector('.addinputs').innerHTML+=`
<div class="addedMember">
<input class="name ${count}" type="text" placeholder="Name ${count}">
<input class="email ${count}" type="email" placeholder="Email ${count}">
<input class="phone ${count}" type="text" placeholder="Phone ${count}">
</div>
`;
count++;
}
</script>
编辑:修复逻辑错误
这是你要找的吗?
document.querySelector(".addMember").addEventListener('click', getAdd);
document.querySelector(".delMember").addEventListener('click', getDel);
//Count as a global variable, not local
var count=0;
function getAdd(event) {
event.preventDefault();
//Set a limit on count
if(count <= 10) {
document.querySelector('.addinputs').innerHTML+=`
<div class="addedMember">
<input class="name ${count}" type="text" placeholder="Name ${count}">
<input class="email ${count}" type="email" placeholder="Email ${count}">
<input class="phone ${count}" type="text" placeholder="Phone ${count}">
</div>
`;
count++;
}
}
function getDel(event) {
event.preventDefault();
//Dont let count go below 0
if(count > 0) {
//Retrieve array of all added members
var added = document.getElementsByClassName("addedMember");
//Retrieve the last of all added members
var lastadded = added[added.length - 1];
//Remove the last added member from the DOM
lastadded.parentNode.removeChild(lastadded);
count--;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.