单击onclick按钮时如何添加新表单或div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单击onclick按钮时如何添加新表单或div相关的知识，希望对你有一定的参考价值。
我有一个表单，要求用户输入房间号和价格，如下图所示。
如果用户需要，他们可以单击按钮以显示新表格，然后可以添加新的房间号和价格。看起来像这样，但是我对它们进行了硬编码。
您如何制作JS函数来做到这一点？
[此外，我想通过用户单击提交按钮将这些值设置到我的Firebase实时数据库中，但是如果用户单击“添加更多房间”按钮，新创建的表单会引用不同的表单ID吗？
更新：包括我的代码。
<div>
<form class="specify-numbers-price">
<label for="ask-room-numbers-price">Please specify the room number and its price: </label>
<br>
<label for="room-numbers">Room numbers: </label>
<input type="number" id="room-numbers" name="room-numbers" min="0" max="1000" >
<label for="room-price"> Price (in $): </label>
<input type="number" id="room-price" name="room-price" min="0">
<br>
<button type="submit" id="add-more-rooms" >Add more rooms</button>
</form>
</div>
答案
这已经是之前讨论过的内容，只需使用内部html并通过id或class来获取div元素...我将向您展示一个简单的示例，您必须使用javascript进行此操作。
/**
* A little example
*/
function addRow(newDivId) {
let mydiv = document.getElementById("divId"); //This is a global div that contains others dynamic divs.
mydiv.innerHTML = `<div id='{newDivId}'>This is a new div with a diferent id</p>`;
}
function removeRow(idToRemove) {
document.getElementById(idToRemove).remove();
}另一答案
[该要求似乎在每次单击其按钮时都在复制现有表单。
如果这是要求，这将向父div添加一个新表单：
const div = document.getElementById('form-wrapper');
function duplicateForm() {
let forms = div.getElementsByClassName('specify-numbers-price');
let firstForm = forms[0];
let formClone = firstForm.cloneNode(true);
div.appendChild(formClone);
}<div id="form-wrapper">
<form class="specify-numbers-price">
<label for="ask-room-numbers-price">Please specify the
room number and its price: </label>
<br>
<label for="room-numbers">Room numbers: </label>
<input type="number" id="room-numbers" name="room-numbers"
min="0" max="1000">
<label for="room-price"> Price (in $): </label>
<input type="number" id="room-price" name="room-price"
min="0">
<br>
<button type="button" id="add-more-rooms"
onclick="duplicateForm();">Add more rooms</button>
</form>
</div>以上是关于单击onclick按钮时如何添加新表单或div的主要内容，如果未能解决你的问题，请参考以下文章