HTML引导添加选项到输入表单答案

【问题标题】：HTML bootstrap add option to input formHTML引导添加选项到输入表单
【发布时间】：2019-10-18 10:58:09
【问题描述】：

我使用表单能够使用用户的输入来保存一些信息。

在这种情况下，它是收据说明。但是，我希望有无限数量的字段（正如您在图像中看到的那样，它有 3 个字段）。

我想在底部有一个选项，比如一个可以创建新输入字段的按钮。我在引导文档中进行了搜索，但没有找到与此相关的任何内容，它们总是使用固定数量的输入字段... 有什么建议吗？

这是我用来生成字段的代码（目前为 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>

【问题讨论】：

如果我在哪里创建一个按钮，每次用户按下按钮时都会添加一个新的输入字段。对于任务，您可以使用 jQuery。
您想要实现的目标超出了 Bootstrap 的范围。也就是说，它没有任何方法可以为您创建标记。它旨在帮助您设计您拥有的任何标记。因此，您必须研究动态创建元素，为它们提供类并将它们附加到 DOM。您可能已经在导入 jQuery，这使得修改 DOM 变得很容易。如果没有，您可以使用 vanilla JavaScript。无论哪种方式，您都必须自己编写此任务的尝试并询问您可能遇到的任何问题。如果没有尝试，您的问题在Stack Overflow 上是题外话。

标签： html css asp.net visual-studio bootstrap-4

【解决方案1】：

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

<!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>

【讨论】：