Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dodawanie elementów formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
mike
Jestem w takiej sytuacji: nie znam JS a potrzebuję uzyskać następujący efekt.
Mam formularz:
Kod
+----------------------------------------+
|                FORMULARZ               |
|                                        |
|  [button_1/link_1]                     |
|                                        |
|  +------------+                        |
|  | input/text |  [button_2/link_2]     |
|  +------------+                        |
|                                        |
|             +------------+             |
|             |input/submit|             |
|             +------------+             |
+----------------------------------------+

I teraz kliknięcie dowolną ilość razy w [button_1/link_1], powoduje :
Kod
+----------------------------------------+
|                FORMULARZ               |
|                                        |
|  [button_1/link_1]                     |
|                                        |
|  +------------+                        |
|  | input/text |  [button_2/link_2]     |
|  +------------+                        |
|                                        |
|  +------------+                        |
|  | input/text |  [button_3/link_3]     |
|  +------------+                        |
|                                        |
|                 .                      |
|                 .                      |
|                 .                      |
|                                        |
|  +------------+                        |
|  | input/text |  [button_N/link_N]     |
|  +------------+                        |
|                                        |
|             +------------+             |
|             |input/submit|             |
|             +------------+             |
+----------------------------------------+

i.t.d
Teraz kliknięcie w króryś [button_N/link_N] ( N - numerek input/text ) powoduje usunięcie go z listy.

Proszę o pomoc.

P.S. Sporo się naklepałem żeby ten rysunek zrobić tongue.gif , więc nie mówcie proszę że się nie da tego osiągnąć tongue.gif
Paul
Kod
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
.inpt{margin-right: 2px;}
.dv{margin:2px;}
</style>
<script type="text/javascript">
ilosc_inputow = 1;
function dodaj(obj) {

    inpt = document.createElement('input');
    inpt.type = 'text';
    inpt.name = 'input' + ++ilosc_inputow;
    inpt.className = 'inpt';
    inpt.value = ilosc_inputow; // numerki w inputach
    
    btn = document.createElement('input');
    btn.type = 'button';
    btn.value = 'Usuń';
    
    dv = document.createElement('div');
    dv.className = 'dv';
    dv.id = 'div' + ilosc_inputow;
    
    eval("btn.onclick = function () { usun('" + dv.id + "', this); }");
    
    dv.appendChild(inpt);
    dv.appendChild(btn);
    obj.form.appendChild(dv);
    
    document.getElementById('ilosc_inputow').value = ilosc_inputow;
}
function usun(dv, obj) {
    objs = obj.form.getElementsByTagName('div');
   for(i = 0; i < objs.length; i++) {
      if(objs[ i ].id == dv) {
         obj.form.removeChild(objs[ i ]);
      }  
   }
}
</script>
</head>
<body>
<form>
<input type="hidden" id="ilosc_inputow" name="ilosc_inputow">
<input type="button" value="Dodaj" onclick="dodaj(this);"><br><br>
<div class="dv" id="div1"><input type="text" id="input1" class="inpt" value="1"><input type="button" value="Usuń" onclick="usun('div1', this);"></div>
</form>
</body>
</html>
xmarko
Fajnie działa,
ale jak nazywaja się kolejne wywyołane pola?
Sprawdzam źródlo powstałej strony po pdodaniu pół, ale nic się nie zmienia.
Paul
Odpal to to sie dowiesz jak sie nazywaja
  1. <html>
  2. <head>
  3. <meta http-equiv=\"Content-type\" content=\"text/html; charset=iso-8859-2\">
  4. <style type=\"text/css\">
  5. .inpt{margin-right: 2px;}
  6. .dv{margin:2px;}
  7. </style>
  8. <script type=\"text/javascript\">
  9. ilosc_inputow = 1;
  10. function dodaj(obj) {
  11.  
  12. inpt = document.createElement('input');
  13. inpt.type = 'text';
  14. inpt.name = 'input' + ++ilosc_inputow;
  15. inpt.className = 'inpt';
  16. inpt.value = ilosc_inputow; // numerki w inputach
  17.  
  18. btn = document.createElement('input');
  19. btn.type = 'button';
  20. btn.value = 'Usuń';
  21.  
  22. dv = document.createElement('div');
  23. dv.className = 'dv';
  24. dv.id = 'div' + ilosc_inputow;
  25.  
  26. eval(\"btn.onclick = function () { usun('\" + dv.id + \"', this); }\");
  27.  
  28. dv.appendChild(inpt);
  29. dv.appendChild(btn);
  30. obj.form.appendChild(dv);
  31.  
  32. document.getElementById('ilosc_inputow').value = ilosc_inputow;
  33. }
  34. function usun(dv, obj) {
  35. objs = obj.form.getElementsByTagName('div');
  36. for(i = 0; i < objs.length; i++) {
  37.  if(objs[ i ].id == dv) {
  38. obj.form.removeChild(objs[ i ]);
  39.  }
  40. }
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. <pre>
  46. <?php
  47. var_dump($_GET);
  48. ?>
  49. </pre>
  50. <form action=\"?\" id=\"fm\">
  51. <input type=\"hidden\" id=\"ilosc_inputow\" name=\"ilosc_inputow\">
  52. <input type=\"button\" value=\"Dodaj\" onclick=\"dodaj(this);\"><br><br>
  53. <div class=\"dv\" id=\"div1\"><input type=\"text\" id=\"input1\" name=\"input1\" class=\"inpt\" 
  54.  
  55. value=\"1\"><input type=\"button\" value=\"Usuń\" onclick=\"usun('div1', this);\"></div>
  56. </form>
  57. <form action=\"\">
  58. <input type=\"button\" value=\"Wyslij\" onclick=\"document.getElementById('fm').submit();\">
  59. </form>
  60. </body>
  61. </html>
p_korcz
Właśnie o takie coś mi chodziło. Mam tylko pytanie. Czy można tak zrobić, aby umieścić to bez elementu <form>
W swoim pliku mam już form, i jeżeli dodam ten skrypt, to utworzone inputy uciekają mi na sam dół strony.
Kredka29
Witam, a czy mógłby mi ktoś powiedzieć, jak zmodyfikować kod, aby dodawał po kliknięcie w "Dodaj", listę rozwijaną z jakimiś elementami? questionmark.gif

Edit:
Mam kod:
  1. <head>
  2. <script type="text/javascript">
  3. <!--
  4. function dodaj_element(kontener){
  5. var znacznik = document.createElement('select');
  6. znacznik.setAttribute('name', 'pole2');
  7. znacznik.className = 'dodajliste';
  8. var kontener = document.getElementById(kontener);
  9. kontener.appendChild(znacznik);
  10. }
  11. //-->
  12. </script>
  13. </head>
  14. <body>
  15.  
  16. <form action="gen2.php" method="post">
  17. <div id="pliki">
  18. <select name="pole2" class="dodajliste">
  19. </select>
  20. </div>
  21. <div>
  22. <input type="button" value="Dodaj listę" onclick="dodaj_element('pliki');" />
  23. <input type="submit" value="Wyślij" />
  24. </div>
  25. </form>
  26.  
  27. </body>
  28. </html>


I teraz pytania:
Co zrobić aby listy były dodawane z określonymi elementami?
Co zrobić aby każda dodana lista miała swoją nazwę np. "list1", "list2", ...?
erix
Cytat
Co zrobić aby każda dodana lista miała swoją nazwę np. "list1", "list2", ...?

Przyjrzyj się:
Kod
znacznik.setAttribute('name', 'pole2');
winksmiley.jpg

Cytat
Co zrobić aby listy były dodawane z określonymi elementami?

http://forum.php.pl/index.php?showtopic=107951

Wyszukiwarka nie gryzie. tongue.gif
Kredka29
Cytat(erix @ 7.12.2008, 13:47:47 ) *
Przyjrzyj się:
Kod
znacznik.setAttribute('name', 'pole2');
winksmiley.jpg

Chmmm, o ile się nie mylę, to teraz każdej dodanej liście nadaje name="pole2".
A ja chciałbym, aby do każdej listy był inny "name"

Cytat(erix @ 7.12.2008, 13:47:47 ) *

A nie możesz powiedzieć konkretnie??
Wogle nie znam się na JS, a takie coś potrzebuję...
erix
Cytat
Chmmm, o ile się nie mylę, to teraz każdej dodanej liście nadaje name="pole2".
A ja chciałbym, aby do każdej listy był inny "name"

Zgadza się. Poczytaj, jak się łączy łańcuchy tekstowe w funkcjach, to dojdziesz do tego.

Cytat
Wogle nie znam się na JS, a takie coś potrzebuję...

Jak chcesz przejechać choćby 10m samochodem, jak nie wiesz, jak włączyć bieg? Sory, ale musisz mieć chociaż minimalne podstawy, aby coś takiego napisać. Jeśli Ci się nie chcę, złóż ofertę w odpowiednim dziale.
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.