Динамическое создание формы в модальном окне

Question

Есть таблица, в каждой строке есть сheckbox с value.

Задача: При клике на кнопку открывать модальное окно и создать динамически поля формы для каждого отмеченного сheckbox

Например: если отмечены n checkbox, то при клике на кнопку открываем модальное окно и в нем cоздаём форму состоящую из n строк с 3 input(cкрытое value значение отмеченного checkbox, имя, фамилия)

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> <input type="checkbox"  value="1"></td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td> <input type="checkbox"  value="2"></td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td> <input type="checkbox"  value="3"></td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

      <button type="button" id="create" class="btn btn-primary">Создать форму </button>



 $('body').on('click', '#create', function () {
               var checked = [];
               $('input:checkbox:checked').each(function() {
               checked.push($(this).val());
});
               console.log(checked)
    });

https://jsfiddle.net/znu6soy7/

Answer 1

Написал вот такое решение. Определенно думаю может быть решение по короче, но зато работает.

$('#create').on('click', function() {
  var checked = [];
  
  $('input:checkbox:checked').each(function() {
    checked.push($(this).val());
  });
  
  if (document.contains(document.getElementById("form")))
    document.getElementById("form").remove();
  let form = document.createElement("form"),
      name,
      lname,
      chckboxvalue,
      string,
      textNode,
      parentNode;
  form.setAttribute("id", "form");
  for (let i = 0; i < checked.length; i++) {
    string = document.createElement("div");
    string.classList.add("whois");
    parentNode = document.querySelector(`input[value='${parseInt(checked[i])}']`).parentNode.parentNode;
    textNode = document.createTextNode(parentNode.children[1].innerText);
    name = document.createElement("input");
    name.setAttribute("name", "name");
    name.setAttribute("hidden", "");
    name.setAttribute("value", parentNode.children[1].innerText);
    lname = document.createElement("input");
    lname.setAttribute("name", "lname");
    lname.setAttribute("hidden", "");
    lname.setAttribute("value", parentNode.children[2].innerText);
    chckboxvalue = document.createElement("input");
    chckboxvalue.setAttribute("name", "chckbox");
    chckboxvalue.setAttribute("hidden", "");
    chckboxvalue.setAttribute("value", parentNode.children[0].children[0].value);
    string.appendChild(textNode);
    form.appendChild(string);
    form.appendChild(name);
    form.appendChild(lname);
    form.appendChild(chckboxvalue);  
  }
  
  let submit = document.createElement("input");
        submit.setAttribute("type", "submit");
      submit.setAttribute("value", "Отправить");
      submit.className = "btn btn-success";
  form.appendChild(submit);
  document.body.appendChild(form);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> <input type="checkbox"  value="1"></td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td> <input type="checkbox"  value="2"></td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td> <input type="checkbox"  value="3"></td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

      <button type="button" id="create" class="btn btn-primary">Создать форму </button>

БЛОГ НА HUSL

Динамическое создание формы в модальном окне

Ответы (1 шт):