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

Formularz - dodanie nowej pozycji

Fiszki IT
Fiszki IT
+1 głos
95 wizyt
pytanie zadane 6 dni temu w JavaScript przez TheDarkSide Początkujący (330 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 6 dni temu przez wizarddos Stary wyjadacz (13,140 p.)
Masz jakiś swój kod? Jak tak to wklej go tu

3 odpowiedzi

0 głosów
odpowiedź 6 dni temu przez qax Obywatel (1,630 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 6 dni temu przez qax Obywatel (1,630 p.)
To praktycznie to samo - tylko z jQuery.
0 głosów
odpowiedź 5 dni temu przez pablop76 VIP (117,480 p.)
edycja 5 dni temu przez pablop76

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

0 głosów
odpowiedź 5 dni temu przez VBService VIP (120,940 p.)
edycja 5 dni temu 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

+2 głosów
0 odpowiedzi 31 wizyt
pytanie zadane 16 czerwca 2020 w JavaScript przez michal_php Stary wyjadacz (13,520 p.)
0 głosów
1 odpowiedź 56 wizyt
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

84,706 zapytań

133,512 odpowiedzi

295,905 komentarzy

55,988 pasjonatów

Motyw:

Akcja Pajacyk

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

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

...