Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] modyfikacja formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Seraph
Witam, znalazłem skrypt, który po drobnych modyfikacjach byłby przydatny na mojej stronie, problem jednak w tym, że nie radzę sobie do końca z owymi modyfikacjami.
  1. <form action="" method="post" enctype="multipart/form-data">
  2. <p>Tytuł wydarzenia:<br/>
  3. <input type="text" name="title" value=""/><br/>
  4. Pliki: Autorzy:<br />
  5. <div id="pola">
  6. <input type="file" name="plik[]" /><input type="button" onClick="plus();" value="+" /><input type="button" onClick="minus();" disabled="true" value="-" /><br />
  7. </div>
  8. <input type="hidden" name="MAX_FILE_SIZE" value="100000">
  9. <input type="submit" value="Wyślij" />
  10. </p>
  11. </form>

  1. var ile = 1;
  2. function plus()
  3. {
  4. var pole = document.getElementById('pola');
  5. pole.removeChild(pole.getElementsByTagName('input')[ile]);
  6. pole.removeChild(pole.getElementsByTagName('input')[ile]);
  7. var a = document.createElement('input');
  8. a.type = "file";
  9. a.name = "plik[]";
  10. var b = document.createElement('input');
  11. b.type = "button";
  12. b.onclick = function(){return plus();}
  13. b.value = "+";
  14. var c = document.createElement('input');
  15. c.type = "button";
  16. c.onclick = function(){return minus();}
  17. c.value = "-";
  18. var d = document.createElement('br');
  19. pole.appendChild(a);
  20. pole.appendChild(b);
  21. pole.appendChild(c);
  22. pole.appendChild(d);
  23. ile += 1;
  24. }
  25. function minus()
  26. {
  27. var pole = document.getElementById('pola');
  28. pole.removeChild(pole.getElementsByTagName('br')[ile-2]);
  29. pole.removeChild(pole.getElementsByTagName('br')[ile-2]);
  30. pole.removeChild(pole.getElementsByTagName('input')[ile-1]);
  31. pole.removeChild(pole.getElementsByTagName('input')[ile-1]);
  32. pole.removeChild(pole.getElementsByTagName('input')[ile-1]);
  33. var b = document.createElement('input');
  34. b.type = "button";
  35. b.onclick = function(){return plus();}
  36. b.value = "+";
  37. var c = document.createElement('input');
  38. c.type = "button";
  39. c.onclick = function(){return minus();}
  40. c.value = "-";
  41. var c2 = document.createElement('input');
  42. c2.type = "button";
  43. c2.onclick = function(){return minus();}
  44. c2.value = "-";
  45. c2.disabled = "true";
  46. var d = document.createElement('br');
  47. pole.appendChild(b);
  48. if(ile==2) pole.appendChild(c2);
  49. else pole.appendChild(c);
  50. pole.appendChild(d);
  51. ile--;
  52. }


Wydaje mi się, że rozumiem w miarę ideę działania skryptu. Potrzebuję jednak dodać jeszcze pole autor do każdego pliku. Stworzyłem więc
  1. <input type="text" name="autor[]" />

a w skrypcie
  1. var e = document.createElement('input');
  2. e.type = "text";
  3. e.name = "autor[]";


Jednak wtedy całość zaczyna szaleć i działać jak chce - za jednym razem pojawia się nowe pole dla autora, po naciśnięciu + znika, itp. W czym tkwi mój błąd?
arecki
Twój błąd nigdzie. Ten skrypt jest jakiś dziwny. Ja bym zmienił go tak:
  1. <script type="text/javascript">
  2.  
  3. var ile = 1;
  4. function plus()
  5. {
  6. var e = document.createElement('input');
  7. e.type = "text";
  8. e.name = "autor[]";
  9. var a = document.createElement('input');
  10. a.type = "file";
  11. a.name = "plik[]";
  12. var b = document.createElement('input');
  13. b.type = "button";
  14. b.onclick = function(){return plus();}
  15. b.value = "+";
  16. var c = document.createElement('input');
  17. c.type = "button";
  18. c.onclick = function(){return minus();}
  19. c.value = "-";
  20. var d = document.createElement('br');
  21.  
  22. var pole = document.getElementById('pola');
  23. pole.appendChild(e);
  24. pole.appendChild(a);
  25. pole.appendChild(b);
  26. pole.appendChild(c);
  27. pole.appendChild(d);
  28. ile++;
  29. if(ile > 1) {
  30. pole.getElementsByTagName('input')[3].disabled = false;
  31. }
  32. }
  33.  
  34. function minus()
  35. {
  36. var pole = document.getElementById('pola');
  37. pole.removeChild(pole.getElementsByTagName('br')[pole.getElementsByTagName('br').length-1]);
  38. for(i=0; i<4; i++)
  39. pole.removeChild(pole.getElementsByTagName('input')[pole.getElementsByTagName('input').length-1]);
  40. ile--;
  41. if(ile == 1) {
  42. pole.getElementsByTagName('input')[3].disabled = true;
  43. }
  44. }
  45.  


No i oczywiście dodaj pole "autor[]" przed inputem "file" :
  1. <div id="pola">
  2. <input type="text" name="autor[]" /><input type="file" name="plik[]" /><input type="button" onClick="plus();" value="+" /><input type="button" onClick="minus();" disabled="true" value="-" /><br />
  3. </div>


Pozdrawiam.
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.