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

Formularz - dodanie nowej pozycji

VPS Starter Arubacloud
+1 głos
201 wizyt
pytanie zadane 10 września 2021 w JavaScript przez TheDarkSide Użytkownik (930 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 Nałogowiec (25,130 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,060 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,060 p.)
To praktycznie to samo - tylko z jQuery.
0 głosów
odpowiedź 12 września 2021 przez pablop76 VIP (123,060 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 Ekspert (251,210 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ź 74 wizyt
pytanie zadane 30 kwietnia 2022 w JavaScript przez chrystian Gaduła (4,780 p.)
+1 głos
1 odpowiedź 469 wizyt
pytanie zadane 18 lutego 2022 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...