• 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
102 wizyt
pytanie zadane 10 września w JavaScript przez TheDarkSide Początkujący (340 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 przez wizarddos Stary wyjadacz (13,480 p.)
Masz jakiś swój kod? Jak tak to wklej go tu

3 odpowiedzi

0 głosów
odpowiedź 10 września przez qax Gaduła (3,910 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 przez qax Gaduła (3,910 p.)
To praktycznie to samo - tylko z jQuery.
0 głosów
odpowiedź 12 września przez pablop76 VIP (117,800 p.)
edycja 12 września 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 przez VBService VIP (126,380 p.)
edycja 12 września 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 32 wizyt
pytanie zadane 16 czerwca 2020 w JavaScript przez michal_php Stary wyjadacz (13,570 p.)
0 głosów
1 odpowiedź 56 wizyt
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

85,082 zapytań

133,883 odpowiedzi

296,814 komentarzy

56,216 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.

...