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
ethann
post
Post #2





Grupa: Zarejestrowani
Postów: 56
Pomógł: 18
Dołączył: 7.04.2012

Ostrzeżenie: (0%)
-----

Na pewno dołączyłeś bibliotekę JQuery?
Podam Ci przykładowy kod użycia funkcji prepend, która pozwoli Ci uzyskać wymagany efekt.
Kod
<html>
<head>
<script type=text/javascript src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type=text/javascript>
function logowanie()
{
    if($('#nick').val() == '')
    {
        $('#login').prepend('<div id=\'login_error\'>Nie podano loginu.</div>');
    }
    else
    {
        $('#login').prepend('<div id=\'login_error\'>Podano login.</div>');
    }
}
</script>
</head>
<body>
<form action="java script:logowanie();">
    <div id='login'>
        <label for='nick'>Login</label>
        <input type='text' size='20' id='nick' name='nick' value=''>
        <input type='submit' class='button' value="Zaloguj" />
    </div>
</form>
</body>
</html>


ewentualnie możesz zrobić nowy div i do niego dopisywać treści.
Kod
<html>
<head>
<script type=text/javascript src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type=text/javascript>
function logowanie()
{
    if($('#nick').val() == '')
    {
        $('#error').text('Nie podano loginu.');
    }
    else
    {
        $('#error').text('Podano login.');
    }
}
</script>
</head>
<body>
<form action="java script:logowanie();">
    <div id='login'>
        <div id='error'></div>
        <label for='nick'>Login</label>
        <input type='text' size='20' id='nick' name='nick' value=''>
        <input type='submit' class='button' value="Zaloguj" />
    </div>
</form>
</body>
</html>
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: 31.12.2025 - 14:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn