Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AJAX]Obsługa formularzy
Forum PHP.pl > Forum > Przedszkole
Meferot
27.12.2010, 15:48:39
Niech mi ktoś pomoże i wytłumaczy jak w jQuery obsługuje się formularze bo już od wczoraj się meczę i jestem na skraju załamania nerwowego. Przejrzałem już dziesiątki stron w różnych języka, manuala i nadal nie działa.
Czy do tego potrzebna jest jakaś dodatkowa biblioteka?
Bardzo bym prosił o jakiś prosty przykład takiego formularza i skryptu bo ja tego nie ogarniam ;/

@edit:
Zapomniałem sprecyzować, że chodzi mi tylko o przesłanie danych z formularza do skryptu php ;d
ShadowD
27.12.2010, 16:02:30
$.post(), $(), .val() i tyle, weź się w garść to nie takie trudne nikt Ci tu gotowca nie da, a przychodzisz dosłownie z niczym...
PtasiorZz
27.12.2010, 16:12:54
Koledze chodzi chyba o przesyłanie danych za pomocą ajax.
Jquery.ajax - funkcja za pomocą której w jquery tworzy się obiekt ajax.
W ostatnim przykładzie masz pokazane jak wysłać dane do skryptu winksmiley.jpg
Meferot
27.12.2010, 16:21:09
O tym co mi napisałeś już widziałem, próbowałem już na mnóstwo sposobów, ale nadal nie działa.
No cóż idę próbować dalej.

Co w tym jest źle?
[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3.   <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  4. 	<script>
  5. 	$(document).ready(function () {
  6. 		$.ajax({
  7. 			url: "zapisz.php",
  8. 			global: false,
  9. 			type: "POST",
  10. 			data: ({id : this.getAttribute('id')}),
  11. 			dataType: "html",
  12. 			async:false,
  13. 			success: function(msg){
  14. 				alert(msg);
  15. 			}
  16. 		}
  17. 	).responseText;
  18. 	});        
  19. 	</script>
  20.     </head>
  21.     <body>
  22.         <form action="#" method="post">
  23.             <input type="text" name="name" id="name"/><br />
  24.             <input type="submit" name="submit" id="btnsubmit" value="Wyślij" />
  25.         </form>
  26.     </body>
  27. </html>
[PHP] pobierz, plaintext

ShadowD
27.12.2010, 16:28:19
Chwila, chwila a co ja podałem? Właśnie ajax tylko za pomocą funkcji post() która ma o połowę uproszczoną składnię porównując ajax(), na prawdę zobacz na specyfikację...

[HTML] pobierz, plaintext 
  1. $.post('ajax/plik_gdzie_mają_być_wysłane_dane.html', { name: "John", time: "2pm" } , function(data) {
  2.   alert(data); //wyświetli to co echuje nam plik "ajax/plik_gdzie_mają_być_wysłane_dane.html"
  3. });
[HTML] pobierz, plaintext


O ile prościej i skuteczniej do osiągnięcia tego celu?

Ps. Jeśli to Ci nie wystarcza .post() ma jeszcze kilka argumentów, specyfikacja - http://api.jquery.com/jQuery.post/
Ps2. bądź uprzejmy i pomóż mi przekroczyć barierę 80 pomógł. haha.gif
Meferot
27.12.2010, 16:38:04
Chyba będę mógł Ci pomóc, tylko powiedz mi jak w miejsce Johna wstawić 'cos' ;p
[PHP] pobierz, plaintext 
  1. 	<script>
  2. 	$(document).ready(function () {
  3. 		var cos = $("input#name").val();
  4. 		$.post('zapisz.php', { email: "John", time: "2pm" } , function(data) {
  5. 		  alert(data); 
  6. 		});
  7. 	});        
  8. 	</script>
[PHP] pobierz, plaintext
ShadowD
27.12.2010, 17:25:19
$('#imie').val() w miejsce imienia, "imie" to id forma w którym imię się znajduje. Bez podstaw Js ani JQ raczej będzie Ci ciężko dalej samemu działać, może przerób jakiś tutorial?
lobopol
27.12.2010, 17:32:33
To i ja dam przykład smile.gif:
formularz dajmy na to:
Kod
<form action="index.php" method="post" id="form">
<input type="text" name="a"/>
<input type="text" name="b"/>
<input type="text" name="c"/>
<input type="text" name="d"/>
<input type="text" name="e"/>
<input type="button" id="submit" value="wyślij"/>
</form>


kod jquery odpowiadający za wysłanie formularza:

Kod
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function(){
$.post('plik_przetwarzający_forme.php', $('#form').serialize()  , function(data) {
     if(data==1){
        alert('forma przesłana poprawnie');
     }else{
             alert('błąd');
     }
      });
})

</script>

pseudokod odbioru
[PHP] pobierz, plaintext 
  1. if(!empty($_POST)){
  2. //spawdzanie poprawności przesłanych danych
  3. if(wszystko ok)
  4. echo 1;
  5. }else{
  6. echo 2;
  7. }
[PHP] pobierz, plaintext

A teraz omówienie:
1. kod to po prostu formularz w html, jeżeli mamy przesyłać tylko i wyłącznie ajaxem najlepiej nie dawać submita, jeżeli chcemy awaryjnie przesyłać bez ajaxa formularz robimy w tej postaci:

Kod
<form action="index.php" method="post" id="form">
<input type="text" name="a"/>
<input type="text" name="b"/>
<input type="text" name="c"/>
<input type="text" name="d"/>
<input type="text" name="e"/>
<input type="submit"  value="wyślij"/>
</form>

kod jquery:
Kod
$('#form').submit(function() {
  $.post('plik_przetwarzający_forme.php', $('#form').serialize()  , function(data) {
      alert(data); //w zmiennej data odpowiedź z pliku
      });
  return false;
});


2. Kod jquery tu tylko szkielet, ale działający funkcje serialize trzeba użyć aby zabezpieczyć się przed błędnymi danymi (np. bez niego ktoś może po prostu zepsuć dane które wysyłamy wystarczy, że w którymś polu dopisze np. &tralala= i już mamy złe dane wysyłane), dodatkowo ułatwia nam wysyłanie wielkich formularzy (nieważne czy ma 50 inputów czy 100 wystarczy ta linijka kodu).

ShadowD
27.12.2010, 17:51:47
I za 30 min znów będziesz pisał autorowi tematu bądź innej zagubionej uszy cały kod? To może pomóż i mi i napisz mi portal społecznościowy jak fb... Ludzie dajcie sobie spokój z wstawianiem gotowców, na prawdę to tylko pogorszy sprawę...

Przepraszam więcej nie będę, ale moja pomoc była już za duża, a co mówić Pana na up...
lobopol
27.12.2010, 17:56:40
Gotowcem bym tego nie nazwał (poprawiłem tylko już wstawiony kod). Jeżeli za dużo informacji dałem to przepraszam i postaram się następnym razem bardziej ograniczyć.
Meferot
27.12.2010, 19:09:51
Nadal lipa ;/

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3.   <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  4. 	<script>
  5. 	$(document).ready(function () {
  6. 		$.post('zapisz.php', { email: $('input#name').val(), time: "2pm" } , function(data) {
  7. 		  alert(data); 
  8. 		});
  9. 	});        
  10. 	</script>
  11.     </head>
  12.     <body>
  13.         <form action="#" method="post">
  14.             <input type="text" name="name" id="name" value="aaa"/><br />
  15.             <input type="submit" name="submit" id="btnsubmit" value="Wyślij" />
  16.         </form>
  17.         <p id="mymsg"></p>
  18.     </body>
  19. </html>
[PHP] pobierz, plaintext


w Input dodalem value="aaa", i to mi sie wyswietla, ale to co wpisze juz nie, bez value nie pokazuje mi niczego =[
lobopol
27.12.2010, 19:16:18
Podałem ci niemal kompletny skrypt, ale jeżeli chcesz w ten sposób robić to puść alerta dla wartości tego inputa
Meferot
27.12.2010, 19:33:48
Powiedz wprost o co chodzi bo probóje na rózne sposoby i nadal nie wychodzi, zrobilem alert dla tego inputa ale nadal nie pokazuje tego co ja wpisze!
Przyszedłem na to forum, zeby poznac odpowiedz na moj problem, a nie zeby uczyc mnie myslenia, bo takie cos to ja mam na polibudzie.


Edit:
Jest taki wał, że widze to co wpisalem jak dam wstecz ;o
ShadowD
27.12.2010, 19:35:14
val() powinno działać, może dacz linka do swojej strony? Spróbuj .attr('value'), choć jak mówisz że po sztywnym podaniu value działa a tak nie chce to może jakoś źle odpalasz tą funkcję? Grr a patrząc na pierwszy post nawet na 100%...

Mówiłem, że bez podstaw nic nie zdziałasz - wysyłasz żądanie post przy ładowaniu się strony, a powinieneś przy kliknięciu przycisku wyślij. Najmniejszą linią oporu opakuj post() w funkcję o nazwie send(), a w <a> daj href java script:send(), tyle jak nie to metoda click. Nikt Ci tu gotowca nie da licz się z tym...
lobopol
27.12.2010, 19:35:15
Jeszcze raz to co dałem jest rozwiązaniem jedyne co trzeba dorobić to skrypt odbierający formularz...
Meferot
27.12.2010, 19:41:13
Cytat(lobopol @ 27.12.2010, 19:35:15 ) *
Jeszcze raz to co dałem jest rozwiązaniem jedyne co trzeba dorobić to skrypt odbierający formularz...


Nic sie nie dzieje gdy klikne w buttona
lobopol
27.12.2010, 20:19:45
Kod
$("#submit").click(function(){
var send = $("#form").serialize();
$.post('bla.php', send  , function(data) {
     alert(data);
      });
});
Meferot
3.01.2011, 16:55:06
rozkminilem to przed chwila biggrin.gif
teraz jeszcze tylko z tym serialize zrobie

Teraz mam taki problem ze jQuery nie wysyła nic do zapisz.php
[PHP] pobierz, plaintext 
  1. SubmittingForm=function() {
  2. 	$.post('./register-box/zapisz.php', { email: $('#registerEmail').val() }, function(data) {
  3.      if(data==1){
  4.         alert('forma przesłana poprawnie');
  5.      }else(data==2){
  6.             alert('error');
  7. 		return false;
  8.      }
  9.       });
  10. }
  11. $(document).ready(function() {
  12. 	$("#registerForm").validate({
  13. 		submitHandler:function(form) {
  14. 			SubmittingForm();
  15. 		},
  16. 		rules: { 
  17. 			registerEmail: {                
  18. 				required: true,
  19. 				email: true,
  20. 				remote: {url: "./register-box/email.php", type: "post"}
  21. 			},
  22. 			registerRules: {
  23. 				required: true,
  24. 			}
  25. 		},
  26. 		messages: {
  27. 			registerEmail: {
  28. 				required: "WprowadĽ e-mail.",
  29. 				email: "WprowadĽź poprawny adres e-mail.",
  30. 				remote: "Adres jest już w użyciu."
  31. 			},
  32. 			registerRules: "<br />W celu założenia konta konieczna jest akceptacja regulaminu."
  33. 		}
  34. 	});
  35. });
[PHP] pobierz, plaintext



Bump winksmiley.jpg
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.