[英]Dynamically generate form input fileds increment and decrement on click of button using pure javascript only
ES6 /Pure javascript / No Framework or jquery / Document.createElement() / Node.appendChild() enter image description here ES6 /Pure javascript /无框架或 jquery / Document.createElement() / Node.appendChild()在此输入图片描述
Making an HTML form where users have to add Members details.trying to make a button that generates a new set op input fields with increasements in the className/id or placeholder, like: The first generated input should have a className/id or placeholder of input1 and the next with a className/id or placeholder of input2 and so on.制作一个 HTML 表单,用户必须在其中添加成员详细信息。尝试制作一个按钮来生成一个新的 set op 输入字段,并增加 className/id 或占位符,例如:第一个生成的输入应该有一个 className/id 或占位符input1 和下一个带有 className/id 或 input2 占位符的下一个等等。
I have create a script but it dynamically add input field but does not increment the count on adding member .increment must start form 1 to 10 only.我创建了一个脚本,但它动态添加了输入字段,但不会增加添加成员的计数。增量必须仅从 1 到 10 开始。
On Click of add button the input field must add and the count must increment on every click of add member with limit of max 10 members only .单击添加按钮时,输入字段必须添加,并且每次单击添加成员时计数必须增加,最多只能有 10 个成员。
And on click of delete button the input field must delete the member input field decrement the count.并且点击删除按钮输入字段必须删除成员输入字段减少计数。
<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>
EDIT: Fixed logic errors编辑:修复逻辑错误
Is this what you're looking for?这是你要找的吗?
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.