Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [AJAX][JavaScript] Wysłanie formularza bez przeładowania strony
-kubek3898-
post
Post #1





Goście
Na początku od razu mówię, użyłem szukajki, niestety nie znalazłem to czego szukam (IMG:style_emoticons/default/wink.gif)

Mam następujący kod:

[HTML] pobierz, plaintext 
  1. <body id='body_screen' class='login_screen'>
  2. <form action='login.php' method='post'>
  3. <div id='login' class=''>
  4. <div id='login_error'>Dane użyte podczas logowania nie były poprawne</div>
  5. 	<div id='login_controls'>
  6. 		<label for='username'>Użytkownik</label>
  7. 		<input type='text' size='20' id='username' name='username' value='' class='textinput'>
  8.  
  9. 		<label for='password'>Hasło</label>
  10. 		<input type='password' size='20' id='password' name='password' value='' class='textinput'>	</div>
  11. 	<div id='login_submit'>
  12. 		<input type='submit' class='button' value="Zaloguj" />
  13. 	</div>
  14.     </div>
  15. </form>		
  16. </div>
  17. </body>
[HTML] pobierz, plaintext


I teraz jak za pomocą AJAX'a zrobić tak, że po kliknięciu "Zaloguj" strona nie przeładowuje się tylko zostaje wypisany stosowny komunikat:

[HTML] pobierz, plaintext 
  1. <div id='login_error'>Dane użyte podczas logowania nie były poprawne</div>
[HTML] pobierz, plaintext


lub 

[HTML] pobierz, plaintext 
  1. <div id='login_ok'>Zalogowano!</div>
[HTML] pobierz, plaintext



"Raczkuję" jak widać w temacie JS oraz AJAX, więc proszę o pomoc.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
-kubek3898-
post
Post #2





Goście
Studiuję teraz książkę "JavaScript i jQuery - Nieoficjalny podręcznik", więc mam nadzieję, że znajdę rozwiązanie.


W necie może i jest tego masa, ale każda próba modyfikacji przeze mnie skończyła się fiaskiem.

Witam ponownie,

poczytałem trochę o Ajaxie oraz samym JS i wyszło takie cuś:

[HTML] pobierz, plaintext 
  1. <body id='ipboard_body' class='login_screen'>
  2. <div id="infoMassage"></div>
  3. <div id="logFrom">
  4. <form action='java script:logowanie();'>
  5. <div id='login' class=''>
  6. 	<div id='login_controls'>
  7. 		<label for='nick'>Login</label>
  8. 		<input type='text' size='20' id='nick' name='nick' value='' class='textinput'>
  9.  
  10. 		<label for='pass'>Hasło</label>
  11. 		<input type='password' size='20' id='pass' name='pass' value='' class='textinput'>	</div>
  12. 	<div id='login_submit'>
  13. 		<input type='submit' class='button' value="Zaloguj" />
  14. 	</div>
  15.     </div>
  16. </form>	
  17. </div>
  18. </div>
  19. </body>
[HTML] pobierz, plaintext


oraz sam kod JS:

[PHP] pobierz, plaintext 
  1. function logowanie()
  2. {
  3. 	var nick = document.getElementById("nick").value;
  4. 	var infoMassage = document.getElementById("login");
  5. 	var pass = document.getElementById("pass").value;
  6.  
  7. 	if(nick == '')
  8. 	{
  9. 		//infoMassage.innerHTML = '<div id=\'login_error\'>Nie podano loginu.</div>';
  10. 		$('#login').append('<div id=\'login_error\'>Nie podano loginu.</div>');
  11. 		//$('login').append('<p>Test</p>');
  12. 	}
  13. 	else if(pass == '')
  14. 	{
  15. 		infoMassage.innerHTML = '<div id=\'login_error\'>Nie podano hasła.</div>';
  16. 	}
  17. 	else
  18. 	{
  19. 		var myLogAjax = new Ajax.Request('../check.php',
  20. 		{
  21. 			method: 'post',
  22. 			parameters: "nick="+nick+
  23. 						"&pass="+pass,
  24. 			onComplete: showResponseLog,
  25. 			onFailure: showAlertLog
  26. 		}
  27. 		);
  28. 	}
  29. }
  30. function showResponseLog(text)
  31. {
  32. 	var infoMassage = document.getElementById("infoMassage");
  33. 	var logFrom = document.getElementById("logFrom");
  34.  
  35. 	if(text.responseText=='1')
  36. 	{
  37. 		infoMassage.innerHTML  = 'Błąd: <b>Takie konto nie istnieje, bądz jest nie aktywne</b>';
  38. 	}
  39. 	else
  40. 	{        
  41. 		logFrom.innerHTML  = 'Zostałeś zalogowany jako: '+text.responseText+'. Dziękujemy';
  42. 	}
  43. }
  44. function showAlertLog(MyRequest) 
  45. {
  46. 	var infoMassage = document.getElementById("infoMassage");
  47. 	infoMassage.innerHTML  = 'Błąd: <b>Błąd podczas logowania</b>';
  48. }
[PHP] pobierz, plaintext


Wszystko spoko, tylko że aż wstyd się przyznać do jednej rzeczy. A mianowicie:

[PHP] pobierz, plaintext 
  1. 	var nick = document.getElementById("nick").value;
  2. 	var infoMassage = document.getElementById("login");
  3. 	var pass = document.getElementById("pass").value;
  4.  
  5. 	if(nick == '')
  6. 	{
  7. 		//infoMassage.innerHTML = '<div id=\'login_error\'>Nie podano loginu.</div>';
  8. 		$('#login').append('<div id=\'login_error\'>Nie podano loginu.</div>');
  9. 		//$('login').append('<p>Test</p>');
  10. 	}
  11. 	else if(pass == '')
  12. 	{
  13. 		infoMassage.innerHTML = '<div id=\'login_error\'>Nie podano hasła.</div>';
  14. 	}
[PHP] pobierz, plaintext


Na początku miałem dobrze jakoś zrobiłem tak, że wyświetlał się komunikat bez znikania formularza logowania. Jednak... albo nie zapisałem pliku, albo coś, lecz teraz po kliknięciu: Zaloguj usuwa się formularz, a wyświetla komunikat. Modyfikowałem 12434234234234 razy, raz to stosując funkcję append(), raz to prepend() nic nie dało. Proszę o pomoc! Jak zrobić, by po kliknięciu zaloguj robiło się:

[HTML] pobierz, plaintext 
  1. <body id='ipboard_body' class='login_screen'>
  2. <div id="infoMassage"></div>
  3. <div id="logFrom">
  4. <form action='java script:logowanie();'>
  5. <div id='login' class=''>
  6. <div id=\'login_error\'>Nie podano loginu.</div>
  7. 	<div id='login_controls'>
  8. 		<label for='nick'>Login</label>
  9. 		<input type='text' size='20' id='nick' name='nick' value='' class='textinput'>
  10.  
  11. 		<label for='pass'>Hasło</label>
  12. 		<input type='password' size='20' id='pass' name='pass' value='' class='textinput'>	</div>
  13. 	<div id='login_submit'>
  14. 		<input type='submit' class='button' value="Zaloguj" />
  15. 	</div>
  16.     </div>
  17. </form>	
  18. </div>
  19. </div>
  20. </body>
[HTML] pobierz, plaintext


a nie:

[HTML] pobierz, plaintext 
  1. <body id='ipboard_body' class='login_screen'>
  2. <div id="infoMassage"></div>
  3. <div id="logFrom">
  4. <form action='java script:logowanie();'>
  5. <div id='login' class=''>
  6. <div id=\'login_error\'>Nie podano loginu.</div>
  7. </form>	
  8. </div>
  9. </div>
  10. </body>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- kubek3898   [AJAX][JavaScript] Wysłanie formularza bez przeładowania strony   28.01.2013, 17:25:18
- - nospor   CytatNa początku od razu mówię, użyłem szukajki, n...   28.01.2013, 17:40:58
- - kubek3898   Studiuję teraz książkę "JavaScript i jQuery -...   30.01.2013, 17:56:48
- - ethann   Kod<form action='java script:logowanie...   30.01.2013, 18:16:45
- - kubek3898   Jak zmienię, ze spacją to mi adres strony wywala n...   30.01.2013, 18:24:53
- - ethann   Na pewno dołączyłeś bibliotekę JQuery? Podam Ci pr...   30.01.2013, 18:32:31
- - kubek3898   Tak na pewno jest dołączona. I nadal nic. Zrobił...   30.01.2013, 18:41:52
- - ethann   Przetestuj którykolwiek z przykladów podanych prze...   30.01.2013, 18:48:52
- - kubek3898   Dobra przeniosłem skrypt na innny hosting i o dziw...   2.02.2013, 17:29:10

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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