1

Здравствуйте, мне нужно вставить форму В несколько разных мест на странице. Как при помощи jquery или js сделать это? append, after не подходят. По сути, форма одна, просто появляется в нескольких частях страницы

<form id="formset">
  <div class="form-group">
    <label for="exampleInputPassword1">Ф.И.О</label>
    <input  class="form-control" id="fio" placeholder="Ф.И.О">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="Email" aria-describedby="emailHelp" placeholder="Введите email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Телефон</label>
    <input type="phone" class="form-control" id="phone" placeholder="Телефон">
  </div>
  <button type="submit" class="btn btn-primary">Записаться</button>
</form>

2
  • одна и та же форма не может появляться/существовать (одновременно) в разных частях страницы. Ваше "по сути" понятно только Вам.
    – user176262
    23 ноя 2017 в 15:32
  • клонируйте и добавляйте в разные места
    – teran
    23 ноя 2017 в 17:30

1 ответ 1

3

Вообще учти, что этот пример груб... Потому что у тебя в форме есть элементы с одинаковым id. Это естественно не приемлемо, если они будут одновременно находиться на одной странице, если нет то не проблема, а даже удобно... Не забывай про id.

var formset = document.getElementById('formset');

var block = document.getElementById('block');
// берем форму клонируем 
var formset_1 = formset.cloneNode(true);
//и вставляем куда хотим
block.appendChild(formset_1);
//забыл, ему надо присвоить другой id
formset_1.id = 'formset_1';
#block {
  width: 300px;
  height: 300px;
  background: #272727;
}
<form id="formset">
  <div class="form-group">
    <label for="exampleInputPassword1">Ф.И.О</label>
    <input class="form-control" id="fio" placeholder="Ф.И.О">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="Email" aria-describedby="emailHelp" placeholder="Введите email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Телефон</label>
    <input type="phone" class="form-control" id="phone" placeholder="Телефон">
  </div>
  <button type="submit" class="btn btn-primary">Записаться</button>
</form>

<div id="block"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.