Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [PHP][JavaScript][AJAX]Dynamiczne dodawanie pól
patryk9200
post
Post #1





Grupa: Zarejestrowani
Postów: 319
Pomógł: 4
Dołączył: 7.02.2009
Skąd: pless

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

Cześć,
Potrzebuję zrobić panel dodawania zastępstw na stronę szkolną, ale nigdy nie wiadomo ile tych zastępstw będzie.
I w związku z tym chciałbym stworzyć stronę na której domyślnie wyświetlała by się możliwość dodania np. pięciu zastępstw a pod tym przycisk dodaj nastepne z możliwością wpisania ile ich będzie. Jak stworzyć takie coś bez ponownego załadowania strony tzn. tak jak przycisnę przycisk to pojawią mi się dodatkowe pola np.
zakogo1 czas1 zkim1

zakogo2 czas2 zkim2
zakogo3 czas3 zkim3
i tak dalej żeby je utworzyło.
I jeszcze jedno jak później takie coś w PHP odebrać ?
Z góry dzięki za pomoc winksmiley.jpg
Go to the top of the page
+Quote Post
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Robisz z pól tablicę (nazwa[]), a w PHP odbierasz tak, jak zwykłą tablicę. ;]

Elementy dodajesz dynamicznie, via JS.


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

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
kefirek
post
Post #3





Grupa: Zarejestrowani
Postów: 781
Pomógł: 256
Dołączył: 29.06.2008

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

Hmm biggrin.gif mam dobry dzień to ci zrobiłem biggrin.gif ale jak odebrać w php pogłówkuj juz sam biggrin.gif ( Poczytaj o tablicy $_POST )
[HTML] pobierz, plaintext 
  1. <head>
  2.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  3.  
  4.  
  5. <style type="text/css">
  6. label {	
  7. display: block;}label a{	
  8. color: #CC0000;
  9. text-decoration: none;	margin-left: 5px;
  10. }
  11. label a:hover{
  12. text-decoration: underline;
  13. }
  14. </style>
  15.  
  16.  
  17. <script>
  18. $(document).ready(
  19. function()
  20. {
  21. $("#dodaj").click(function()
  22. {		
  23. new_text = ('Za kogo ');
  24. var new_label = $("<label>");
  25. var new_input = $("<input>");
  26. new_input.attr("type", "text");			
  27. new_text1 = (' czas ');
  28. var new_label1 = $("<label>");
  29. var new_input1 = $("<input>");
  30. new_input1.attr("type", "text");		
  31. new_text2 = (' z kim ');
  32. var new_label2 = $("<label>");
  33. var new_input2 = $("<input>");
  34. new_input2.attr("type", "text");
  35. var new_link = $("<a>");
  36. new_link.attr("href", "#");
  37. new_link.html("usuń");
  38. new_link.click(function()
  39. {
  40. $(this).parent("label").remove();
  41. return false;
  42. });               
  43. new_label.append(new_text);
  44. new_label.append(new_input);
  45. new_label.append(new_text1);
  46. new_label.append(new_input1);
  47. new_label.append(new_text2);
  48. new_label.append(new_input2);
  49. new_label.append(new_link);
  50. $("form[name=formularz]").append(new_label);
  51. return false;
  52. });
  53. });
  54. </script>
  55.  
  56.  
  57. </head>
  58. <body>
  59. </head>
  60. <body>
  61. <a href="#" id="dodaj">Dodaj</a>
  62. <form name="formularz" action="">
  63.  
  64. </form>
  65.  
  66. </body>
[HTML] pobierz, plaintext


Przykład działania na http://www.fusion.boo.pl/form.htm


I jak chcesz odebrać to w php to musisz zrobić tak jak erix napisał dodać do tych impetów za pomocą attr atrybut name i utworzyć tablice biggrin.gif nie zrobiłem tego celowo byś sam coś zrobił biggrin.gif

Ten post edytował kefirek 18.07.2009, 20:41:55
Go to the top of the page
+Quote Post
patryk9200
post
Post #4





Grupa: Zarejestrowani
Postów: 319
Pomógł: 4
Dołączył: 7.02.2009
Skąd: pless

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

Cytat(kefirek @ 18.07.2009, 21:33:04 ) *
Hmm biggrin.gif mam dobry dzień to ci zrobiłem biggrin.gif ale jak odebrać w php pogłówkuj juz sam biggrin.gif ( Poczytaj o tablicy $_POST )
[HTML] pobierz, plaintext 
  1. <head>
  2.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  3.  
  4.  
  5. <style type="text/css">
  6. label {	
  7. display: block;}label a{	
  8. color: #CC0000;
  9. text-decoration: none;	margin-left: 5px;
  10. }
  11. label a:hover{
  12. text-decoration: underline;
  13. }
  14. </style>
  15.  
  16.  
  17. <script>
  18. $(document).ready(
  19. function()
  20. {
  21. $("#dodaj").click(function()
  22. {		
  23. new_text = ('Za kogo ');
  24. var new_label = $("<label>");
  25. var new_input = $("<input>");
  26. new_input.attr("type", "text");			
  27. new_text1 = (' czas ');
  28. var new_label1 = $("<label>");
  29. var new_input1 = $("<input>");
  30. new_input1.attr("type", "text");		
  31. new_text2 = (' z kim ');
  32. var new_label2 = $("<label>");
  33. var new_input2 = $("<input>");
  34. new_input2.attr("type", "text");
  35. var new_link = $("<a>");
  36. new_link.attr("href", "#");
  37. new_link.html("usuń");
  38. new_link.click(function()
  39. {
  40. $(this).parent("label").remove();
  41. return false;
  42. });               
  43. new_label.append(new_text);
  44. new_label.append(new_input);
  45. new_label.append(new_text1);
  46. new_label.append(new_input1);
  47. new_label.append(new_text2);
  48. new_label.append(new_input2);
  49. new_label.append(new_link);
  50. $("form[name=formularz]").append(new_label);
  51. return false;
  52. });
  53. });
  54. </script>
  55.  
  56.  
  57. </head>
  58. <body>
  59. </head>
  60. <body>
  61. <a href="#" id="dodaj">Dodaj</a>
  62. <form name="formularz" action="">
  63.  
  64. </form>
  65.  
  66. </body>
[HTML] pobierz, plaintext


Przykład działania na http://www.fusion.boo.pl/form.htm

Hmmm.... Pomysł niczego sobie naprawdę wielki, ale jest jedno ale... hehe czemu jak "coś" wpiszę w pierwszym polu i prubuję myszką przejść do drugiego to mnie cofa i zaznacza pierszy?? kiedy użyję taba to jest ok ;D:D A tak to naprawdę świetna klasa winksmiley.jpg dodam że w Internet Explorer wszystko gra cacy a w Firefox 3.5 już nie;(

Ten post edytował patryk9200 18.07.2009, 20:43:22
Go to the top of the page
+Quote Post
kefirek
post
Post #5





Grupa: Zarejestrowani
Postów: 781
Pomógł: 256
Dołączył: 29.06.2008

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

Cytat
Hmmm.... Pomysł niczego sobie naprawdę wielki, ale jest jedno ale... hehe czemu jak "coś" wpiszę w pierwszym polu i prubuję myszką przejść do drugiego to mnie cofa i zaznacza pierszy?? kiedy użyję taba to jest ok ;D:D A tak to naprawdę świetna klasa winksmiley.jpg dodam że w Internet Explorer wszystko gra cacy a w Firefox 3.5 już nie;(


To dziwne ale ja czegoś takiego nie mam mogę normalnie w każde pole coś wpisać biggrin.gif

Ten post edytował kefirek 18.07.2009, 20:45:04
Go to the top of the page
+Quote Post
patryk9200
post
Post #6





Grupa: Zarejestrowani
Postów: 319
Pomógł: 4
Dołączył: 7.02.2009
Skąd: pless

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

Cytat(kefirek @ 18.07.2009, 21:44:56 ) *
To dziwne ale ja czegoś takiego nie mam mogę normalnie w każde pole coś wpisać biggrin.gif


heh dziwne;/ może to przez to, że mam jakieś 50 kart otwarte hehe i czasami potem świruje FF winksmiley.jpg


a więc czy tak będzie dobrze?
new_input2.attr("name", "zkim");
czli wyjdzie coś takiego:
[HTML] pobierz, plaintext 
  1. <script src=\"http://code.jquery.com/jquery-latest.js\">
  2.  
  3.  
  4.  
  5. label {    
  6. display: block;}label a{    
  7. color: #CC0000;
  8. text-decoration: none;    margin-left: 5px;
  9. }
  10. label a:hover{
  11. text-decoration: underline;
  12. }
  13.  
  14.  
  15.  
  16. <script>
  17. $(document).ready(
  18. function()
  19. {
  20. $(\"#Dodaj zastepstwo\").click(function()
  21. {        
  22. new_text = ('Za kogo ');
  23. var new_label = $(\"\");
  24. var new_input = $(\"\");
  25. new_input.attr(\"type\", \"text\"); 
  26. new_input.attr(\"name\", \"zakogo\");           
  27. new_text1 = (' czas ');
  28. var new_label1 = $(\"\");
  29. var new_input1 = $(\"\");
  30. new_input1.attr(\"type\", \"text\"); 
  31. new_input1.attr(\"name\", \"czas\");       
  32. new_text2 = (' z kim ');
  33. var new_label2 = $(\"\");
  34. var new_input2 = $(\"\");
  35. new_input2.attr(\"type\", \"text\");
  36. new_input2.attr(\"name\", \"zkim\");
  37.  
  38. //%%%%%%%%%55a option tak?%%%%%%%5
  39. new_text4 = (' klasa ');
  40.  var new_label2 = $(\"\");
  41.  var new_input2 = $(\"\");
  42. //? \  \  \  \ a gdzie dać zawartość tego pola? \  \  \  \  \ ?
  43.  new_input4.attr(\"name\", \"klasa\");
  44. var new_link = $(\"\");
  45. new_link.attr(\"href\", \"#\");
  46. new_link.html(\"Usuń\");
  47. new_link.click(function()
  48. {
  49. $(this).parent(\"label\").remove();
  50. return false;
  51. });               
  52. new_label.append(new_text);
  53. new_label.append(new_input);
  54. new_label.append(new_text1);
  55. new_label.append(new_input1);
  56. new_label.append(new_text2);
  57. new_label.append(new_input2);
  58. new_label.append(new_link);
  59. $(\"form[name=formularz]\").append(new_label);
  60. return false;
  61. });
  62. });
  63.  
  64.  
  65.  
  66.  
  67.  
  68.  
  69.  
  70. Dodaj
  71.  
  72.  
  73.  
  74.  
  75.  
  76.  
  77. ?>
[HTML] pobierz, plaintext


Ten post edytował patryk9200 18.07.2009, 21:21:33
Go to the top of the page
+Quote Post
kefirek
post
Post #7





Grupa: Zarejestrowani
Postów: 781
Pomógł: 256
Dołączył: 29.06.2008

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

Przykład
http://www.fusion.boo.pl/from3.htm biggrin.gif biggrin.gif
I kod pliku test.php
[PHP] pobierz, plaintext 
  1. <?php
  2. echo 'wpisales<br>';
  3. print_r($_POST);
  4. ?>
[PHP] pobierz, plaintext


Ten post edytował kefirek 18.07.2009, 21:47:51
Go to the top of the page
+Quote Post
erix
post
Post #8





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Już chociaż mogłeś pętlą zrobić, a nie na sztywno zmienne... 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
patryk9200
post
Post #9





Grupa: Zarejestrowani
Postów: 319
Pomógł: 4
Dołączył: 7.02.2009
Skąd: pless

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

jak dodać opcje do pola select??
bo prubowałem masy rozwiązań, między innymi też takie:
[ktml]
new_text3 = (' klasa ');
var new_select = $("<select>");
var Text=new Array("1H","1B","1C");
var Value=new Array("1H","1B","1C");
new_select.text = new Array("1H","1B","1C");
new_select.value = Value;
new_select.attr("name", "klasa[]");
[/html]
ale nie działa...
Go to the top of the page
+Quote Post
grzegosh
post
Post #10





Grupa: Zarejestrowani
Postów: 51
Pomógł: 3
Dołączył: 26.06.2008

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

Dodam tylko, że i u mnie na Firefoxie, jak kliknę sobie na 2 czy 3 input, albo jak wybieram z pola select, cofa mi kursor do 1 inputa. Z tab chodzi normalnie, a myszką nie.
Go to the top of the page
+Quote Post
erix
post
Post #11





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
http://pl.lmgtfy.com/?q=javascript+select


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

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
patryk9200
post
Post #12





Grupa: Zarejestrowani
Postów: 319
Pomógł: 4
Dołączył: 7.02.2009
Skąd: pless

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

Cytat(erix @ 19.07.2009, 23:58:56 ) *
http://pl.lmgtfy.com/?q=javascript+select


heh...nie jestem głupi, dawno użyłem google, ale nic senownego nie znalazłem, użyłem również tego zapytania;/
Go to the top of the page
+Quote Post
erix
post
Post #13





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Przecież na drugim miejscu jest wszystko, co trzeba.

Sensownego, bo gotowca nie ma? tongue.gif Jest, tylko trzeba nieco przewinąć stronę. 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
patryk9200
post
Post #14





Grupa: Zarejestrowani
Postów: 319
Pomógł: 4
Dołączył: 7.02.2009
Skąd: pless

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

nie wiem czy masz jakieś inne google tongue.gif:P czy co ale nic sensownego tam nie ma biggrin.gif winksmiley.jpg a da się może to zrobić jakoś tak:
[HTML] pobierz, plaintext 
  1. function AddForm ()
  2. {
  3.   <select name="klasa[]">
  4.     <option value="1H">1H</option>
  5.     <option value="2D">2D</option>
  6.     <option value="3E">3E</option>
  7.   </select>
  8. }
[HTML] pobierz, plaintext

? da się tak? dolo to by mi większe możliwości edycji i jest na pewno wygodniejsze winksmiley.jpg
Go to the top of the page
+Quote Post
kefirek
post
Post #15





Grupa: Zarejestrowani
Postów: 781
Pomógł: 256
Dołączył: 29.06.2008

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

[HTML] pobierz, plaintext 
  1. var new_select = $("<select>");
  2. var new_option = $("<option></option>");
  3. new_option.html("pierwsza");
  4. new_option.attr("value", "lista");
  5. var new_selectet = new_select.append(new_option);
[HTML] pobierz, plaintext


Przykład na http://www.fusion.boo.pl/from3.htm

Ten post edytował kefirek 20.07.2009, 10:05:11
Go to the top of the page
+Quote Post
Agape
post
Post #16





Grupa: Zarejestrowani
Postów: 384
Pomógł: 13
Dołączył: 16.06.2006

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

A tak z pogranicza tematu.

Jak można np 4 input przesunąć w góre bądź w dół. Potrzebuje zrobić taką funkcjonalność, tyle że każdy input wygląda tak samo :/.
Chodzi mi o zamianę miejsc.

Ten post edytował Agape 21.07.2009, 11:15:40


--------------------
printmax.com.pl
Go to the top of the page
+Quote Post
erix
post
Post #17





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Kod
stary_input = obj1.removeNode;
rodzic.insertAfter(...)


removeNode usuwa tylko z drzewa, nie wymazuje obiektu.


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

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
Agape
post
Post #18





Grupa: Zarejestrowani
Postów: 384
Pomógł: 13
Dołączył: 16.06.2006

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

Sory, ale nie mogę dojść z tym w jQuery:

[PHP] pobierz, plaintext 
  1. <?php
  2. $(".del").click(function(){
  3.         var costam = $(this).parent("label");
  4.         costam.remove();
  5.         costam.inseftAfter(costam);
  6.         return false;
  7.     })
  8. ?>
[PHP] pobierz, plaintext


Oczywiście usuwa, ale nie wstawia (cokolwiek bym nie podstawił w insertAfter). Możliwe, że użyłem złej funkcji. Nie mogłem wygooglować odpowiednika removeNode w jQuery ;/

EDIT: Doszedłem, że nie trzeba usuwać elementu, jq robi to automatycznie, tylko jak przenieść go. Takie coś:

[PHP] pobierz, plaintext 
  1. <?php
  2. $(".del").click(function(){
  3.         var costam = $(this).parent("label");
  4.         costam.insertBefore("#jakis");
  5.         return false;
  6.     })
  7. ?>
[PHP] pobierz, plaintext

działa bez problemu, ale jak przenieść go w góre czy w dół?

Ten post edytował Agape 21.07.2009, 20:52:09


--------------------
printmax.com.pl
Go to the top of the page
+Quote Post
erix
post
Post #19





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Eee, w jQuery, to jeszcze łatwiej. ;]

Cytat
Możliwe, że użyłem złej funkcji.

Nie złej, tylko nie ma wszystkich parametrów.

Kod
return false;

Przekazuj zdarzenie i używaj preventDefault, return false nic nie mówi.

Cytat
działa bez problemu, ale jak przenieść go w góre czy w dół?

Musisz znaleźć najpierw jakiś element, wg którego będziesz mógł się poruszać, tzn. punkt zaczepienia, co do którego powiesz nad/pod nim. Jeśli nad - wstawiasz ten obiekt jako parametr do insertBefore, jeśli pod - insertAfter.


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

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
Agape
post
Post #20





Grupa: Zarejestrowani
Postów: 384
Pomógł: 13
Dołączył: 16.06.2006

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

Cytat(erix @ 21.07.2009, 22:15:56 ) *
Musisz znaleźć najpierw jakiś element, wg którego będziesz mógł się poruszać, tzn. punkt zaczepienia, co do którego powiesz nad/pod nim. Jeśli nad - wstawiasz ten obiekt jako parametr do insertBefore, jeśli pod - insertAfter.


Wiem, wiem. Właśnie tu jest problem, gdy wezmę np. insertAfter("#cos") oczywiście działa. Ale w tym właśnie problem, że mam kolumne input'ów które niczym się nie róźnią.

[PHP] pobierz, plaintext 
  1. <?php
  2. echo  '<label><input class="'.$parametr.'" size="30" type="text" value="'.$wartosc.'"> <br></label>';
  3. ?>
[PHP] pobierz, plaintext


Próbowałem:
[PHP] pobierz, plaintext 
  1. <?php
  2. var costam = $(this).parent("label");
  3.         costam.insertBefore(costam.prev);
  4. ?>
[PHP] pobierz, plaintext

Ale wizualnie, to nic się nie dzieje.


--------------------
printmax.com.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

2 Stron V   1 2 >
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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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