• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Formularz - dodanie nowej pozycji

+1 głos
143 wizyt
pytanie zadane 10 września 2021 w JavaScript przez TheDarkSide Użytkownik (610 p.)
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źć ?
komentarz 10 września 2021 przez wizarddos Pasjonat (17,720 p.)
Masz jakiś swój kod? Jak tak to wklej go tu

3 odpowiedzi

0 głosów
odpowiedź 10 września 2021 przez qax Dyskutant (8,040 p.)

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);

 

1
komentarz 11 września 2021 przez qax Dyskutant (8,040 p.)
To praktycznie to samo - tylko z jQuery.
0 głosów
odpowiedź 12 września 2021 przez pablop76 VIP (119,480 p.)
edycja 12 września 2021 przez pablop76

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

0 głosów
odpowiedź 12 września 2021 przez VBService Mędrzec (162,950 p.)
edycja 12 września 2021 przez VBService

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);
});

 

Podobne pytania

0 głosów
1 odpowiedź 38 wizyt
pytanie zadane 30 kwietnia w JavaScript przez chrystian Gaduła (3,970 p.)
+1 głos
1 odpowiedź 83 wizyt

87,955 zapytań

136,534 odpowiedzi

304,445 komentarzy

58,319 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...