Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Dodawanie elementów formularza, Dynamiczne...
mike
post
Post #1





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----

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

Ten post edytował mike_mech 21.02.2005, 09:48:30
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 8)
Paul
post
Post #2





Grupa: Zarejestrowani
Postów: 636
Pomógł: 0
Dołączył: 22.10.2003
Skąd: Katowice

Ostrzeżenie: (0%)
-----

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>
Go to the top of the page
+Quote Post
xmarko
post
Post #3





Grupa: Zarejestrowani
Postów: 59
Pomógł: 0
Dołączył: 26.02.2004

Ostrzeżenie: (0%)
-----

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.


--------------------
marko
Go to the top of the page
+Quote Post
Paul
post
Post #4





Grupa: Zarejestrowani
Postów: 636
Pomógł: 0
Dołączył: 22.10.2003
Skąd: Katowice

Ostrzeżenie: (0%)
-----

Odpal to to sie dowiesz jak sie nazywaja
[PHP] pobierz, plaintext 
  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>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
p_korcz
post
Post #5





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 9.06.2008

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Kredka29
post
Post #6





Grupa: Zarejestrowani
Postów: 78
Pomógł: 1
Dołączył: 6.12.2008
Skąd: Polska

Ostrzeżenie: (0%)
-----

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


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", ...?

Ten post edytował Kredka29 7.12.2008, 13:24:45


--------------------
Mam Windows 7 RC
Go to the top of the page
+Quote Post
erix
post
Post #7





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
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


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Kredka29
post
Post #8





Grupa: Zarejestrowani
Postów: 78
Pomógł: 1
Dołączył: 6.12.2008
Skąd: Polska

Ostrzeżenie: (0%)
-----

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 ) *
http://forum.php.pl/index.php?showtopic=107951

Wyszukiwarka nie gryzie. tongue.gif

A nie możesz powiedzieć konkretnie??
Wogle nie znam się na JS, a takie coś potrzebuję...


--------------------
Mam Windows 7 RC
Go to the top of the page
+Quote Post
erix
post
Post #9





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
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.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 05:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn