Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: ajax i formularz.
Forum PHP.pl > Forum > XML, AJAX
boosik01
Cześć piszę właśnie grę przeglądarkową ale utknąłem w jednym miejscu. A mianowicie nie mogę coś poradzić sobie z formularzem.
Strony otwierają się za pomocą ajaxu, czyli bez przeładowania. W takim wypadku adres nie zmienia się tylko stale jest link.pl>
Tylko chciałbym teraz zrobić formularz lecz nie mam pojęcia co umieścić w action.

Plik: links.js

  1. function ajax_link(class) {
  2.  
  3.  
  4. var loading = $("#top_zegar");
  5. var container = $("#ready");
  6.  
  7.  
  8.  
  9.  
  10. $(class).click(function(){
  11.  
  12.  
  13.  
  14. $.ajax({
  15. type: "GET",
  16. url: $(this).attr("href"),
  17. async: true,
  18. dataType: "html",
  19. cache: false,
  20. beforeSend: function() { showLoading(); },
  21. complete: function() { hideLoading(); container.css({opacity:"1"}); },
  22. success: function(msg) { container.html(msg); },
  23. error: function (XMLHttpRequest, textStatus, errorThrown) { container.html('<h1 class="ng">Błąd</h1>Podczas wczytywania strony, wystąpił błąd.'); }
  24. });
  25.  
  26. return false;
  27.  
  28.  
  29. });
  30.  
  31. function showLoading(){
  32. loading.css({visibility:"visible"}).css({display:"block"}).css({opacity:"1"});
  33. container.css({opacity:"0.3"});
  34.  
  35.  
  36. }
  37.  
  38. function hideLoading(){ loading.css({opacity:"0"}); };
  39.  
  40.  
  41. }


Formularz:

  1. <h1 class="ng">Rejestracja</h1>
  2.  
  3.  
  4. <form action="" method="post">
  5. Login: <br /><input type="text" name="login"><br /><br />
  6. Hasło: <br /><input type="text" name="login"><br /><br />
  7. Powtórz Hasło: <br /><input type="text" name="login"><br /><br />
  8. Email: <br /><input type="text" name="login"><br /><br /><br />
  9. <input type="submit" name="ok" value="Zarejestruj" style=" border:none; font-weight:bold;"/>
  10. </form>
  11.  
  12. <?php
  13.  
  14. if(isset($_POST['ok']))
  15. {
  16. echo 'aaaaa' ;
  17. }
  18. ?>
  19.  
  20.  
shikamaru88
Jeśli całą stronę masz opartą na ajaxie to nie ma sensu wysyłać tego formularza normalnie. Wyślij go również ajaxem.
boosik01
Tylko tyle że ja jestem zielony w ajaxie tongue.gif

Byłbym bym wdzięczny gdybyś mi to pokazał na przykładzie jak to zrobić.

Moim zamiarem było przechodzenie pomiędzy podstronami bez przeładowania.
Następnie w rejestracji chciałem zrobić normalnie za pomocą PHP + walidacja w JS.

Ale w ajaxie to ja totalna klapa...
nospor
Cytat
Tylko tyle że ja jestem zielony w ajaxie tongue.gif

1) Czym ci zawinił poprzednik, że bez powodu pokazujesz mu język?
2) To jak ty napisałeś tę strone na ajax skoro jesteś zielony?
boosik01
google.pl + koledzy + moja mała znikła wiedza.

No to sorki za ten język . smile.gif
shikamaru88
Spoko smile.gif

  1.  
  2. <form id="register-form" action="action.php">
  3. <input type="text" name="name1" />
  4. <input type="text" name="name2" />
  5. <span id="send-form">wyślij</span>
  6. </form>
  7.  


[JAVASCRIPT] pobierz, plaintext
  1. $('#send-form').click(function(){
  2. var data = $('#register-form').serialize(); //zbierasz wszystkie wartosci formularza
  3. var url = $('#register-form').attr('action'); //tu masz url gdzie ma byc wyslany formularz
  4. $.ajax({
  5. type: "POST",
  6. url: url,
  7. dataType: 'html',
  8. data: data,
  9. beforeSend: function() { showLoading(); },
  10. complete: function() { hideLoading(); container.css({opacity:"1"}); },
  11. success: function(msg) { container.html(msg); },
  12. error: function (XMLHttpRequest, textStatus, errorThrown) { container.html('<h1 class="ng">Błąd</h1>Podczas wysyłania, wystąpił błąd.'); }
  13. });
  14. });
[JAVASCRIPT] pobierz, plaintext


To jest samo wysłanie ajaxem musisz zrobić jeszcze walidację. Polecam http://flowplayer.org/tools/validator/index.html.
boosik01
A da radę zrobić by nie używać Ajaxa w formularzu, tzn zrobić formularz normalny PHP . ?
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.