Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery][PHP] Jak odczytać wartości pól wysłanego formularza?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
witosza
22.07.2010, 12:39:15
Próbowałem metodą POST i GET
W obu przypadkach wysyłane są tylko nazwy zmiennych.
W przypadku GET'a URL wygląda następująco: index.php?plec=&telefon=

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. 	<meta charset="UTF-8" />
  5. 	<title>Ankieta</title>
  6.  
  7. 	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  8. 	<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
  9. 	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
  10.  
  11. 	<script type="text/javascript">
  12. 	$(function() {
  13.  
  14. 		$("#dialog").dialog("destroy");
  15.  
  16. 		var plec = $("#plec"), telefon = $("#telefon"),
  17. 			allFields = $([]).add(plec).add(telefon),
  18. 			tips = $(".validateTips");
  19.  
  20. 		function updateTips(t) {
  21. 			tips
  22. 				.text(t)
  23. 				.addClass('ui-state-highlight');
  24. 			setTimeout(function() {
  25. 				tips.removeClass('ui-state-highlight', 1500);
  26. 			}, 500);
  27. 		}
  28.  
  29. 		function checkLength(o,n,min,max) {
  30.  
  31. 			if ( o.val().length > max || o.val().length < min ) {
  32. 				o.addClass('ui-state-error');
  33. 				updateTips("Length of " + n + " must be between "+min+" and "+max+".");
  34. 				return false;
  35. 			} else {
  36. 				return true;
  37. 			}
  38.  
  39. 		}
  40.  
  41. 		function checkRegexp(o,regexp,n) {
  42.  
  43. 			if ( !( regexp.test( o.val() ) ) ) {
  44. 				o.addClass('ui-state-error');
  45. 				updateTips(n);
  46. 				return false;
  47. 			} else {
  48. 				return true;
  49. 			}
  50.  
  51. 		}
  52.  
  53. 		$("#dialog-form").dialog({
  54. 			autoOpen: false,
  55. 			height: 300,
  56. 			width: 350,
  57. 			modal: true,
  58. 			buttons: {
  59. 				'Prześlij ankietę': function() {
  60. 					var bValid = true;
  61. 					allFields.removeClass('ui-state-error');
  62.  
  63. 					bValid = bValid && checkLength(plec,"płeć",1,100);
  64.  
  65. 					if(telefon.val().length > 0){
  66. 						bValid = bValid && checkLength(telefon,"telefon",9,11);
  67. 						bValid = bValid && checkRegexp(telefon,/^([0-9])+$/,"Dozwolone tylko cyfry");
  68. 					}
  69.  
  70. 					if (bValid) {
  71.  
  72. 						$(this).dialog('close');
  73. 						$('form#test').submit();
  74. 					}
  75. 				},
  76. 				Anuluj: function() {
  77. 					$(this).dialog('close');
  78. 				}
  79. 			},
  80. 			close: function() {
  81. 				allFields.val('').removeClass('ui-state-error');
  82. 			}
  83. 		});
  84.  
  85.  
  86.  
  87. 		$('#ankieta')
  88. 			.button()
  89. 			.click(function() {
  90. 				$('#dialog-form').dialog('open');
  91. 			});
  92.  
  93. 	});
  94. 	</script>
  95. </head>
  96. <body>
  97.  
  98. <?
  99. if(isset($_GET['plec'])){
  100.  
  101. echo "płec: ".$_GET['plec'];
  102. echo "telefon: ".$_GET['telefon'];
  103.  
  104. }
  105. ?>
  106.  
  107. <div id="dialog-form" title="Ankieta">
  108. <p class="validateTips"></p>
  109. 	<form id="test" method="GET">
  110. 	<fieldset>
  111. 		<label for="plec">Płeć pacjenta</label>
  112. 		<select name="plec" id="plec" class="text ui-widget-content ui-corner-all">
  113. 		<option value=""></option>
  114. 		<option value="k">kobieta</option>
  115. 		<option value="m">mężczyzna</option>
  116. 		</select>
  117. 		<label for="telefon">Nr telefonu</label>
  118. 		<input type="text" name="telefon" id="telefon" value="" class="text ui-widget-content ui-corner-all" />
  119. 	</fieldset>
  120. 	</form>
  121. </div>
  122. <button id="ankieta">Ankieta</button>
  123. </body>
  124. </html>
[HTML] pobierz, plaintext
erix
22.07.2010, 12:44:02
http://api.jquery.com/serialize/ winksmiley.jpg
witosza
22.07.2010, 16:46:04
Cytat(erix @ 22.07.2010, 13:44:02 ) *
http://api.jquery.com/serialize/ winksmiley.jpg


Jak tego dokonać?
Próbowałem dodać przy deklaracji zmiennych 
[PHP] pobierz, plaintext 
  1. 	var plec = $("#plec").serialize(), telefon = $("#telefon").serialize(),
[PHP] pobierz, plaintext

i owszem udało się ale pojawił się błąd: o.val is not a function
gdy pominąłem funkcje walidujące, wartości z pól formularza zostały przesłane.

Gdy dokonuję serializacji przed metodą wysyłającą formularz
[PHP] pobierz, plaintext 
  1.                                      if (bValid) {
  2. 						plec.serialize();
  3. 						telefon.serialize();
  4.  
  5. 						$('form#test').submit();
  6. 					}
[PHP] pobierz, plaintext


wartości nie przechodzą sad.gif
erix
22.07.2010, 17:02:05
serialize działa na cały formularz, nie trzeba każdego pola z osobna obrabiać, co - zresztą - jest pokazane na przykładzie w dokumentacji.
witosza
22.07.2010, 22:21:52
Cytat(erix @ 22.07.2010, 18:02:05 ) *
serialize działa na cały formularz, nie trzeba każdego pola z osobna obrabiać, co - zresztą - jest pokazane na przykładzie w dokumentacji.


Niepotrzebna jest w tym przypadku metoda serialize()
Problem był banalny, wystarczyła zamiana kolejności dwóch linii kodu smile.gif

było:

[HTML] pobierz, plaintext 
  1. $(this).dialog('close');
  2. $('form#test').submit();
[HTML] pobierz, plaintext


pownno być:

[HTML] pobierz, plaintext 
  1. $('form#test').submit();
  2. $(this).dialog('close');
[HTML] pobierz, plaintext


Zamykałem okno formularza z danymi
a następnie przesyłałem pusty formularz.

Dzięki za pomoc, pozdrawiam.
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.