HTML начальной загрузки добавить опцию в форму ввода - PullRequest
Новая
       3

HTML начальной загрузки добавить опцию в форму ввода

0 голосов
/ 02 июня 2019

Я использую форму, чтобы иметь возможность использовать ввод пользователя для сохранения некоторой информации.

В данном случае это инструкция к квитанции. Однако я хотел бы иметь неограниченное количество полей для этого (как вы можете видеть на изображении, оно имеет 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>

enter image description here

1 Ответ

0 голосов
/ 02 июня 2019

Следующий код является полнофункциональным примером того, как вы можете достичь того, о чем вы просите: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...