Formularz - dodanie nowej pozycji

Question

A więc mam formularz w którym jest miejsce na wpisanie imienia nazwiska itd. i chciałabym dodać przycisk który utworzy nową pozycję np. ' Dodaj kolejną osobę' i znowu pojawią się te same pola i opcje co wczesniej czyli przykładowo miejsce na wpisanie imienia i nazwiska kolejnej osoby. Jakaś podpowiedź jakby to ugryźć ?

Comments

Masz jakiś swój kod? Jak tak to wklej go tu

Answer 1

Zakładając, że masz jakiś przycisk o id #button i pola formalarza umieszone w divie o id #formdiv:

<button id="button">Kopiuj</button>
<div id="formdiv">
<form>
<p>Kontrolki formularza...</p>
</form>
</div>

var button = document.getElementById('button');
button.addEventListener('click', function() {
  formDiv = document.getElementById('formdiv');
  newFormDiv = formDiv.cloneNode(true);
	formDiv.parentElement.appendChild(newFormDiv);
}, false);

 

Comments

Zobacz tutaj
https://stackoverflow.com/questions/40526179/add-more-input-fields-when-user-press-button-in-jquery

---

To praktycznie to samo - tylko z jQuery.

Answer 2

Utwórz modal z formularzem i pokazuj go po kliknięciu przycisku "dodaj kolejna osobę"

Answer 3

Proponuję dodanie nowych "pozycji" w formularzu przez pobranie ich z template-a (oczywiście template-a możesz "rozbudować" według własnego uznania).

 

Przykład

<form id="form-personal-data">
  <div class="row">
    Imię <input type="text" name="name">
    Nazwisko <input type="text" name="surname">
  </div>   
</form>

<template id="tmpl-personal-data">
  <div class="row">
    Imię <input type="text" name="name">
    Nazwisko <input type="text" name="surname">
  </div>
</template>

<button id="add-new-person">Nowa pozycja</button>

form, input, button {
  font: 300 1em monospace;
  margin: 0.5em;
}

const form_personal_data = document.querySelector('#form-personal-data'),
      tmpl_personal_data = document.querySelector('#tmpl-personal-data'),
      button_add_new_person = document.querySelector('#add-new-person');

button_add_new_person.addEventListener('click', () => {
  const new_personal_data = tmpl_personal_data.content.cloneNode(true);
  form_personal_data.appendChild(new_personal_data);
});