2 回答

TA貢獻1875條經驗 獲得超5個贊
i僅遞增一次,在您分配新的id和之前name。此外,使用insertAdjacentElement按鈕在它之前插入每個新輸入,而不是after, 來插入新輸入:
function duplicate() {
i++;
let clone = original[0].cloneNode(true);
clone.id = "input" + i;
clone.name = "input" + i;
document.querySelector('button').insertAdjacentElement('beforebegin', clone);
}
document.addEventListener("DOMContentLoaded", function() {
const adduser = document.querySelector("#add-user");
const original = document.querySelectorAll('#input');
let i = 0;
function duplicate() {
i++;
let clone = original[0].cloneNode(true);
clone.id = "input" + i;
clone.name = "input" + i;
document.querySelector('button').insertAdjacentElement('beforebegin', clone);
}
adduser.onclick = duplicate
});
<form action="second.php" method="post">
<div class="form-group">
<label for="username">Name of the user:</label>
<input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">
<button type="button" class="btn btn-default" id="add-user">+ Add a user</button>
</div>
<div class="buttons">
<!-- <input type="button" name="next" value="submit"> -->
<input type="submit" name="submit" id="submit" class="button" value="Submit" />
</div>
</form>

TA貢獻1797條經驗 獲得超6個贊
三件事:
在使用它之后增加 i,而不是每次你需要它時它都會增加多次而不是每次重復增加 1
使用 setAttribute
追加到父元素,而不是在原始輸入之后實現降序
document.addEventListener("DOMContentLoaded",function() {
const adduser = document.querySelector("#add-user");
const original = document.getElementById('input');
let i = 1;
function duplicate() {
let clone = original.cloneNode(true);
clone.setAttribute("id", "input"+i);
clone.setAttribute("name", "input"+i);
i++
original.parentNode.appendChild(clone);
}
adduser.onclick = function() {
duplicate();
};
});
<form action="second.php" method="post">
<div class="form-group">
<label for="username">Name of the user:</label>
<input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">
<button type="button" class="btn btn-default" id="add-user">+ Add a user</button>
</div>
<div class="buttons">
<input type="submit" name="submit" id="submit" class="button" value="Submit"/>
</div>
</form>
添加回答
舉報