Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Dynamiczne tworzenie kolejnych pól formularza
Forum PHP.pl > Forum > Przedszkole
Athlan
Cześć, generalnie chodzi mi o to, aby po naciśnięciu linku + dodawało się kolejne pole formularza, np:
  1. <input type="text" name="pole[]"><br />

po naciśnięciu plusa trzykrotnie dynamicznie stworzą się kolejne nowe pola jedno pod drugim:
  1. <input type="text" name="pole[]"><br />
  2. <input type="text" name="pole[]"><br />
  3. <input type="text" name="pole[]"><br />
  4. <input type="text" name="pole[]"><br />


macie namiary na jakieś gotowe skrypty lub (lepiej smile.gif ) jak napisać takie coś samemu (chodzi o generalną strukturę kodu i funkcje, których powinienem użyć, no i w jaki sposób mają się tworzyć nowe pola bo document.write() nie działa smile.gif )?

pozdrawiam smile.gif
babejsza
Pod ręką mam coś takiego, po przeróbkach jak znalazł smile.gif

  1. <script type="text/javascript">
  2.  
  3. i=0;
  4. function wstaw() {
  5. i++;
  6. var tekst = document.createTextNode('pole '+i+': ');
  7. var input = document.createElement('input' );
  8. input.setAttribute('type', 'text');
  9. input.setAttribute('name', 'p[]');
  10. input.setAttribute('size', '4');
  11. var br = document.createElement('br');
  12. var div = document.createElement('div');
  13. div.appendChild(tekst);
  14. div.appendChild(input);
  15. div.appendChild(br);
  16. document.getElementById('pola').appendChild(div);
  17. }
  18.  
  19.  
  20. function wstaw2() {
  21. i++;
  22. var tekst = document.createTextNode('pole '+i+': ');
  23. var input = document.createElement('textarea');
  24. input.setAttribute('name', 'p[]');
  25. input.setAttribute('rows', '3');
  26. input.setAttribute('cols', '100');
  27. var br = document.createElement('br');
  28. var div = document.createElement('div');
  29. div.appendChild(tekst);
  30. div.appendChild(input);
  31. div.appendChild(br);
  32. document.getElementById('pola').appendChild(div);
  33. }



w body:

  1. <form action="index.php" method="post">
  2. <p>
  3. <input type="button" value="input" onclick="wstaw()" />
  4. <input type="button" value="textarea" onclick="wstaw2()" />
  5. </p>
  6.  
  7. <p>
  8. <input type="submit" value="wyślij pola" />
  9. </p>
  10. </form>
Aure
Można też krócej:

Kod
function addField() {
formFieldsDiv = document.getElementById('formFields');
formFieldsDiv.innerHTML =  formFieldsDiv.innerHTML+'<input type="text" name="pole[]"><br />';
}

<div id="formFields">
<input type="text" name="pole[]"><br />
</div>
Athlan
dodajmy DIV'a o id pola i śmiga jak należy... dzięki smile.gif

EDIT:

@Aure: skorzystam z Twojego spodobu... thx smile.gif

EDIT2:

A można jakoś usunąć wcześniej dane pole?
web.admin.pl
Szefie... moglbys wyslac to co zrobiles? gotowy skrypt? bo wlasnie chccialbym to samo zrobic. i powzorował bym sie na tym smile.gif
pozdrowienia
web.admin.pl smile.gif
Gość
Ja to mam tak:
w head:
  1. function _show( strValue )
  2. {
  3. if ( strValue == "inny" )
  4. {
  5. document.getElementById( 'jakies_id' ).style.display = 'block';
  6. }
  7. else
  8. {
  9. document.getElementById('jakies_id').innerHTML = '';
  10. document.getElementById( 'jakies_id' ).style.display = 'none';
  11. }
  12. }

a w body:
  1. <option value="inny" onclick="_show( this.value );" style="font-weight: bold; "> Inny </option>
  2. <input type="text" id="jakies_id" size ="30" maxlenght="30" name="jakis_name" style="display: none;" value="Wpisz nazwisko wykladowcy" />

Teraz jak w select'cie wybierzesz na inny to pojawi sie nowy input. Oczywiscie mozesz to przerobic po swojemu.
Athlan
hmmm no tak... ale jak dodam nowe pole to się wartości wszytskich poprzednich kasują... jak to rozwiązać?

EDIT...

użyłem ten dłuższej wersji i wszystko gra smile.gif
web.admin.pl
tu jest link do mojego posta. mam tu podobny temat. jak mozecie to spojzcie moze mi pomozecie :*


http://forum.php.pl/index.php?showtopic=50852
Athlan
hmmm mam jeszcze pytanie do posta #2

jak mam multiple input type="file" i kilka pól wypelnionych to mi ne chce wyslac formularza po naciśnięcie submite (jeżeli chodzi o oczywiście badzIEwie smile.gif ). Pytanie: dlaczego i jak to naprawić?

pozdrawiam smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.