英文:
HTML (Only) FORM Based on user input
问题
如何让用户在HTML表单中添加自定义数据。我们与一些业务合作伙伴有多个地址：
示例：
- 你有多少个地址：5
- 然后表单将为5个不同的地址填充足够的输入框。
<form action="/action_page">
<label for="fname">组织名称：</label><br>
<input type="text" id="fname" name="fname" value="ABC公司"><br>
<label for="lname">姓氏：</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</form>
注意：上面的示例只包括两个输入框的部分，你需要根据需要重复创建足够多的输入框来满足用户输入多个地址的要求。
英文:
how do i let the user add its own custom data in html form. some businesses we deal with have multiple addresses:
Example:
- How mane locations do you have: 5
- the form will then populate enough input boxes for 5 different addresses.
form action="/action_page">
<label for="fname">Orgnization Name:</label><br>
<input type="text" id="fname" name="fname" value="ABC Company"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
答案1
得分: 0
你可以运行一个循环来创建输入元素。
<body>
<form action="" method="">
<input type="number" id="noOfAddresses" style="margin-bottom: 10px;"> 地址数量。
<button type="button" id="addBtn">添加</button>
<div id="addressInputs" style="display: flex; flex-direction: column; width: 170px; gap: 10px;"></div>
</form>
<script>
let addBtn = document.getElementById("addBtn");
let addressInputs = document.getElementById("addressInputs");
addBtn.addEventListener("click", () => {
let noOfAddresses = parseInt(document.getElementById("noOfAddresses").value);
for (let i = 0; i < noOfAddresses; i++) {
const input = document.createElement("input");
addressInputs.appendChild(input);
}
})
</script>
</body>
英文:
You can run a loop that creates the Input element.
<body>
<form action="" method="">
<input type="number" id="noOfAddresses" style="margin-bottom: 10px;"> No. of Addresses.
<button type="button" id="addBtn">Add</button>
<div id="addressInputs" style="display: flex; flex-direction: column; width : 170px; gap : 10px;"></div>
</form>
<script>
let addBtn = document.getElementById("addBtn");
let addressInputs = document.getElementById("addressInputs");
addBtn.addEventListener("click", ()=>{
let noOfAddresses = parseInt(document.getElementById("noOfAddresses").value);
for (let i = 0; i < noOfAddresses; i++){
const input = document.createElement("input");
addressInputs.appendChild(input);
}
})
</script>
</body>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论