Как передать значения, введенные во входные данные, содержащиеся в модальной (форма) Bootstrap, в таблицу HTML? - PullRequest
Новая
       23

Как передать значения, введенные во входные данные, содержащиеся в модальной (форма) Bootstrap, в таблицу HTML?

1 голос
/ 05 марта 2020

Так что у меня сейчас есть модальный режим, который предлагает пользователю выбрать изображение (ввод файла), ввести его имя (ввод текста) и свою фамилию (ввод текста). После этого они нажимают кнопку «Добавить в таблицу» в модальном режиме, что предполагает добавление указанных выше входных данных в соответствующие ячейки данных в таблице HTML. Я не уверен, как я бы передать эти входные значения в ячейки данных таблиц? Есть ли конкретное ключевое слово c, которое мне нужно использовать?

Таблица (HTML): 

  <tr>
          <th scope="row">1</th>
          <td> ... image input here ... </td>
          <td> ... name input here ... </td>
          <td> ... surname input here ... </td>
        </tr>

Модальный (Bootstrap): 

  <div class="modal-body">
          <form class="" action="index.html" method="post">
            <form>
              <div class="form-group">
                <label for="insertImage">Insert Image</label>
                <input type="file" class="form-control-file" id="Insert Image" accept="image/x-png,image/gif,image/jpeg" aria-describedby="inputHelp">
              </div>
              <div class="form-group">
                <label for="addName">Name</label>
                <input type="text" class="form-control" id="addName">
              </div>
              <div class="form-group">
                <label for="addSurname">Surname</label>
                <input type="text" class="form-control" id="addSurname">
              </div>
            </form>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Add to Table</button>
        </div>

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 05 марта 2020

- это быстрое начало для вас, чтобы начать работу с jquery на основе кода @Maniraj Murugan (спасибо, я был ленив, чтобы создать новый пример). Просто замените код JS на что-то вроде этого: 

$("#addtotable").on('click', function() {
    if($("#addName").val() !== '' && $("#addSurname").val() !== ''){
        let row = '<tr> <td>' + $("#addName").val() + '</td> <td>' + ("#addSurname").val() + '</td> </tr>'
        $('tbody').append(row)
    }
});

https://codepen.io/greenn_anbu/pen/qBdPxNe

надеюсь, что это помогло

...