Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript][AJAX]Dynamiczne dodawanie pól
Forum PHP.pl > Forum > Przedszkole
patryk9200
18.07.2009, 20:09:05
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
erix
18.07.2009, 20:25:52
Robisz z pól tablicę (nazwa[]), a w PHP odbierasz tak, jak zwykłą tablicę. ;]

Elementy dodajesz dynamicznie, via JS.
kefirek
18.07.2009, 20: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


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
patryk9200
18.07.2009, 20:41:37
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;(
kefirek
18.07.2009, 20:44:56
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
patryk9200
18.07.2009, 21:20:18
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
kefirek
18.07.2009, 21:47:41
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
erix
18.07.2009, 23:22:17
Już chociaż mogłeś pętlą zrobić, a nie na sztywno zmienne... tongue.gif
patryk9200
19.07.2009, 19:23:32
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...
grzegosh
19.07.2009, 21:13:31
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.
erix
19.07.2009, 22:58:56
http://pl.lmgtfy.com/?q=javascript+select
patryk9200
19.07.2009, 23:09:53
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;/
erix
19.07.2009, 23:16:24
Przecież na drugim miejscu jest wszystko, co trzeba.

Sensownego, bo gotowca nie ma? tongue.gif Jest, tylko trzeba nieco przewinąć stronę. tongue.gif
patryk9200
20.07.2009, 07:59:31
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
kefirek
20.07.2009, 10:04:46 
[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
Agape
21.07.2009, 11:10:59
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.
erix
21.07.2009, 13:15:56
Kod
stary_input = obj1.removeNode;
rodzic.insertAfter(...)


removeNode usuwa tylko z drzewa, nie wymazuje obiektu.
Agape
21.07.2009, 20:34:10
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ół?
erix
21.07.2009, 21:15:56
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.
Agape
21.07.2009, 22:52:35
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.
erix
22.07.2009, 11:09:23
Cytat
że mam kolumne input'ów które niczym się nie róźnią.

Może i się nie różnią, ale masz tyle selektorów w jQuery... Chociażby eq(). (c;
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.