Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: PHP Dodawanie dynamicznie pól formularza
Forum PHP.pl > Forum > PHP
kopecsrk
9.05.2013, 13:54:00
Witam, mój problem jest następujący.

Posiadam skrypt który tworzy mi odpowiednio dodatkowe pola formularza..

[PHP] pobierz, plaintext 
  1. $('#addpyt2').click(function() {
  2.                 $('#elements2 .element3:first').clone().appendTo($('#elements2'));
  3.                 return false;
  4.             });
  5.             $('#deleteodp').live('click', function() {
  6.                $(this).parent().remove();
  7.                 return false;
  8.             });
  9.             $('#dodajpytzam').click(function() {
  10.                 $('#elements2 .element2:first, #elements2 .element3:first').clone().appendTo($('#elements2'));
  11.                 return false;
  12.             });
  13.             $('#deletepyt3').live('click', function() {
  14.                $('#elements2 .element2:last, #elements2 .element3:last').remove();
  15.                 return false;
  16.         });
[PHP] pobierz, plaintext


Elementy które są dodawane :

[HTML] pobierz, plaintext 
  1. <div class="row">
  2.         <span  class="rekrutacjaadd">6. Dodaj pytanie zamkniete </span><br><br>
  3.         <table>
  4.             <thead>
  5.                 <tr>
  6.                     <td></td>
  7.                 </tr>
  8.             </thead>
  9.             <tbody id="elements2">
  10.             <div class="allelement">
  11.                 <tr class="element2">
  12.                     <td><textarea maxlength="322" name="comment2"></textarea><div id="deletepyt3"></div></td>
  13.                 </tr>
  14.                 <tr class="element3">
  15.                     <td><span>odpowiedz</span><textarea maxlength="322" name="comment3"></textarea><div style="float:right;"id="deleteodp"></div></td>
  16.                 </tr>
  17.             </div>
  18.             </tbody>
  19.             <td><div id="addpyt2"></div><span>dodaj</span></td>
  20.         </table>
  21.         <br>
  22.         <div id="dodajpytzam">dodaj pytanie<div id="dodajpytzam1"></div></div>
  23.     </div>
[HTML] pobierz, plaintext


Działa to tak :

Posiadam pola formularza : Pytanie i odpowiedz

Po kliknieciu w przycisk "addpyt" dodaje pole na odpowiedzi do danego pytania czyli:

PYTANIE: cos tam?
odp: 1
odp: 2
odp: /n

I pozniej jeżeli klikne w "dodaj pytanie" dodaje mi pod spodem lolejne pola : pytanie i odpowiedz, i dalej moge dodawać odpowiedzi, to jest na zazasie odpowiedzi w checkboxsach dla tego moge dodawac odpowiedzi ile chce.

I teraz moje pytanie jak zrobic żeby po dodawaniu nowego okna byla informacja ktorę odpowiedzi są do którego pytania czyli np:

pytanie 1: co tam? [id1]
odp: 1 [pyt id=1]
odp: 2 [pyt id=1]

i kolejne dodane pytanie:

pytanie 2: co tam 2? [id2]
odp: 1 [pyt id=2]
odp: 2 [pyt id=2]

Nie wiem czy dobrze to opisałem ale chodzi mi o coś takiego..żeby w konsoli po zbadaniu elementu żebym widział co do czego należy.
Arcioch
9.05.2013, 15:15:37
Musisz sobie przy dodawaniu przez jQuery generować odpowiednie name jako tablice smile.gif Czyli przed dodaniem zliczać elementy + 1 lub coś podobnego:) Czyli masz:

*pierwsze pytanie
- pytanie name=pytnie[0]
- odpowiedzi name=odp[0][]

*drugie pytanie
- pytanie name=pytnie[1]
- odpowiedzi name=odp[1][]

itd..

Nie możesz tylko klonować inputa bo wtedy podczas wysyłki łapie tylko ostatniego nama.

Jeżeli spakujesz pliki html + js to mogę Ci to poprawić bo mam jeszcze 40 minut w pracy smile.gif

Pozdrawiam
Arcio
kopecsrk
9.05.2013, 15:21:10 
[PHP] pobierz, plaintext 
  1.  $('#dodajpytzam').click(function() {
  2.                 $('#elements2 .element2:first, #elements2 .element3:first').clone().appendTo($('#elements2'));
  3.                 $('.element2').attr('name', 'comment2[' + (x++) + ']');
  4.                 $('.element2').attr('id', 'name[' + (y++) + ']');
  5.  
  6.                 return false;
  7.             });
[PHP] pobierz, plaintext


Zrobiłem tak jak opowiedziałeś, ale w zmienia mi wartosci wszystkich pól od 0 , 1, 2 , 3 nie zapisuje tylko zmienia całość
Arcioch
9.05.2013, 18:22:46
Troszkę przerobiłęm html ale działa prawidłowo smile.gif
Na końcu masz printa z wartościami smile.gif Odpowiednie indeksy to wartości pytań i tablica z odpowiedziami smile.gif

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  7.  
  8. <script type="text/javascript">
  9. $(function(){
  10.  
  11. 	var pytanie = '<div class="pytanie">' +
  12. 				'<span class="number">Pytanie <span></span></span>' +
  13. 				'<p class="pyt">Treść pytania: <input type="text" name="" /></p>' +
  14. 				'<p class="odp">Treść odpowiedz: <input type="text" name="" /></p>' +
  15. 			'</div>';
  16.  
  17. 	var odpowiedz = '<p class="odp">Treść odpowiedz: <input type="text" name="" /></p>';
  18.  
  19. 	$('.dodaj_pytanie').click(function(){
  20.  
  21. 		$('.pytania div:first').append(pytanie);
  22. 		generate_name_and_numbers();
  23. 		return false;
  24. 	});
  25.  
  26. 	$('.dodaj_odpowiedz').click(function(){
  27.  
  28. 		$('.pytanie:last').append(odpowiedz);
  29. 		generate_name_and_numbers();
  30. 		return false;
  31. 	});
  32.  
  33. 	function generate_name_and_numbers(){
  34. 		$('.pytanie').each(function(index){
  35.  
  36. 			$(this).find('.number span').html(index + 1);
  37. 			$(this).find('.pyt input').attr('name', 'pyt[' +  index + ']');
  38. 			$(this).find('.odp input').each(function(){
  39. 				$(this).attr('name', 'odp[' +  index + '][]');
  40. 			});
  41. 		});
  42. 	}
  43.  
  44.  
  45. });
  46. </script>
  47.  
  48. </head>
  49. <body>
  50. 	<form class="formularz" id="pytaniaform" method="POST" />
  51.  
  52. 	<div class="pytania">
  53. 		<div>
  54. 			<div class="pytanie">
  55. 				<span class="number">Pytanie <span>1:</span></span>
  56. 				<p class="pyt">Treść pytania: <input type="text" name="pyt[0]" /></p>
  57. 				<p class="odp">Treść odpowiedz: <input type="text" name="odp[0][]" /></p>
  58. 			</div>
  59. 		</div>	
  60. 		<button class="dodaj_odpowiedz" >Dodaj odpowiedz</button>
  61. 	</div>
  62. 	<button class="dodaj_pytanie" >Dodaj nowe pytanie</button>
  63. 	<input type="submit" value="WYSLIJ" />
  64. 	</form>
  65. </body>
  66. </html>
  67.  
  68. <?php
  69.  
  70.  if($_POST){
  71. 	print_r($_POST);
  72. }
  73.  
  74. ?>
[HTML] pobierz, plaintext


W razie problemów pisz śmiało smile.gif

Pozdrawiam
Arcio
kopecsrk
10.05.2013, 08:20:14
Witaj, przeanalizowałem twój kod, i wszystko działa, lecz chciałbym to by to się generowało w tabeli, a ty ustawiłeś varunki pyt i odp i one generują się osobno , jak mógłbym połączyć je w tabeli?

[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2.         $(function() {
  3.  
  4.             var pytanie = '<div class="pytanie">' +
  5.                     ' <table style="width:550px;box-shadow: 1px 1px 17px rgba(218, 196, 163, 0.6);">' +
  6.                     '<tr>' +
  7.                     '<td><span class="number">Pytanie <span></span></span></td>' +
  8.                     '</tr>' +
  9.                     '<tr>' +
  10.                     '<td><p class="pyt">Treść pytania: <input style="width:391px;margin-left:24px;" type="text" name="" /></p></td>' +
  11.                     '</tr>' +
  12.                     '<tr>' +
  13.                     '<td><p class="odp">Treść odpowiedz: <input style="width:235px;" type="text" name="" /></p></td>' +
  14.                     '</tr>' +
  15.                     '</table>' +
  16.                     '</div>';
  17.  
  18.             var odpowiedz = '<td><p class="odp">Treść odpowiedz: <input style="width:235px;" type="text" name="" /></p></td>';
  19.  
  20.             $('.dodaj_pytanie').click(function() {
  21.  
  22.                 $('.pytania div:first').append(pytanie);
  23.                 generate_name_and_numbers();
  24.                 return false;
  25.             });
  26.  
  27.             $('.dodaj_odpowiedz').click(function() {
  28.  
  29.                 $('.pytanie:last').append(odpowiedz);
  30.                 generate_name_and_numbers();
  31.                 return false;
  32.             });
  33.  
  34.             function generate_name_and_numbers() {
  35.                 $('.pytanie').each(function(index) {
  36.  
  37.                     $(this).find('.number span').html(index + 1);
  38.                     $(this).find('.pyt input').attr('name', 'pyt[' + index + ']');
  39.                     $(this).find('.odp input').each(function() {
  40.                         $(this).attr('name', 'odp[' + index + '][]');
  41.                     });
  42.                 });
  43.             }
  44.  
  45.  
  46.         });
  47.     </script>
[PHP] pobierz, plaintext


Pytanie generuje się w tabeli, ale odpowiedz generuje się pod tabelą, a chciałbym by generowalo się w tej samej tabeli. chciałbym coś takiego jak miałem:



po prawo, przyciski z "diva" (-) <-- który usuwa pytanie lub odpowiedzi przy każdym jest tworzony, i przycisk dodaj tak samo.
Arcioch
10.05.2013, 10:44:26
http://wklej.to/u56m1

Live: http://jsfiddle.net/nFtCy/

Mam nadzieję, że to o to chodziło smile.gif

Pozdrawiam
Arcio
kopecsrk
10.05.2013, 11:05:44
Dzięki wielkie smile.gif na prawdęsmile.gif! po lekkiej edycji kodu poukładałem tak jak chciałem by to było i śmiga:)) dziś kończę pracę i zobaczę w poniedziałek jak to wygląda ale na pierwszy rzut oka jest git;) dzięki za poświecenie czasu smile.gif!
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.