gpt4 book ai didi

HTML Bootstrap 向输入表单添加选项

转载 作者:行者123 更新时间:2023-11-27 23:52:55 34 4
gpt4 key购买 nike

我正在使用一个表单来使用用户的输入来保存一些信息。

在本例中,它是收据说明。但是,我希望为此设置无限数量的字段(正如您在图像中看到的那样,它有 3 个字段)。

我想在底部有一个选项,比如一个可以创建新输入字段的按钮。我在 bootstrap 文档中搜索过,但没有找到任何与之相关的内容,他们总是使用固定数量的输入字段......有什么建议吗?

这是我用来生成字段(目前有 10 个)的代码:

<div class="col-md-4">
<h2>Instructions</h2>

<div class="form-group">
<table style="width:75%">
<tr>
<th><label asp-for="Instructions[0].Designation" class="control-label"></label></th>
</tr>
@for (int i = 0; i < 10; i++)
{
<tr>
<td><input asp-for="Instructions[i].Designation" class="form-control" placeholder="Step @(i+1) " /></td>
</tr>
<span asp-validation-for="Instructions[i].Designation" class="text-danger"></span>

}
</table>
</div>

enter image description here

最佳答案

以下代码是一个功能齐全的示例,说明如何实现您的要求:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Instructions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
<div class="col-md-4">
<h2>Instructions</h2>

<div class="form-group">
<table id="instructionsTable" style="width:75%">
<tr>
<th><label asp-for="Instructions[0].Designation" class="control-label"></label></th>
</tr>
<tr>
<td><input asp-for="Instructions[i].Designation" class="form-control" placeholder="Step @(i+1)" /></td>
</tr>
<span asp-validation-for="Instructions[i].Designation" class="text-danger"></span>
</table>
</div>
<input id="addInputBtn" type="button" value="+" />

<script>
$(document).ready(function(){
$("#addInputBtn").click(function(){
var newInput = "<tr><td><input asp-for='Instructions[i].Designation' class='form-control' placeholder='' /></td></tr>";
$("#instructionsTable").append(newInput);
})
});
</script>
</body>
</html>

关于HTML Bootstrap 向输入表单添加选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56418016/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com