javascript - 如何使用 javascript 动态复制或添加更多 html 表单字段?
问题描述
我目前卡住了,我需要帮助,使用 javascript 在 html 页面中添加额外的表单输入和标签。我正在尝试从用户那里获取一些细分,然后单击它会创建所需的其他表单字段。如果他们提供 3,那么它会创建另外 2 个具有相同变量/选择的表单字段。我正在尝试使用 Javascript 中的 for 循环来执行此操作,但没有成功。
我的 HTML
<h2>New Project</h2> <p>Please enter the information below:</p> <label for="project-name">Project Name </label> <input type="text" id = "project-name" class="form-input"> <label for="segments">Number of Segments </label> <input type="number" id = "segments" min="3" class="form-input"> <input type = "button" value = "Add Segments" onclick = "addSegment"><br> <!--Segment Info Start--> <label for="segment">Segment Type</label> <select id="segment" name="segment" class="form-input"> <option value="ramp">Ramp</option> <option value="dwell">Dwell</option> <option value="step">Step</option> </select> <label for="temp">Temperature</label> <input type="number" id = "temp" class="form-input" min="30"> <label for="time">Time</label> <input type="number" id = "time" class="form-input" min="1"> <!--Segment Info End--> <input type="reset" value="Reset"> <input type="submit" value="Start"> </form>
我的 Javascript
function addSegment(){
var segments = document.getElementById("segments").value;
var seg = segments-1;
var i;
for (i = 0, i<seg, i++){
}
}
谢谢
解决方案
您可以动态创建 html 元素并将它们附加到表单中。您可以将它们附加到表单中某些子元素之前/之后的表单末尾
这是您可以将它们附加到表单末尾的方法
function addSegment(){
var segments = document.getElementById("segments").value;
var seg = segments-1;
var i;
for (i = 0, i<seg, i++){
const label = document.createElement('label');
label.for=`someName${i}`;
const input = document.createElement('input');
input.type="text" // or any other
input.name = `someName${i}`;
// and all other attributtes you need to set
document.getElementById("myForm").appendChild(label)
document.getElementById("myForm").appendChild(input)
}
}
推荐阅读
- javascript - 使用箭头键滚动在 Gatsby 中不起作用
- django - 如何有选择地迁移 Django 模型?
- c# - ASP.NET Core Blazor 服务器中的实体框架上下文生命周期
- bison - 解析包含以双斜杠结尾的斜杠分隔字段的数据格式时的移位/减少错误
- angular - 角度原理图模板上的 foreach
- oracle - 自表比较
- python - 使用 USB 摄像头进行视频捕获
- reactjs - 如何使用 nextjs 将状态传递给 getInitialProps fetch func
- prometheus - 重塑 Promethus 的 Nomad 指标
- swiftui - SwiftUI run function when app has been terminated and then opened