Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Przesyłanie formularza za pomocą ajax Jquery
Forum PHP.pl > Forum > XML, AJAX > AJAX
michuwsh
Witam,

Oto mój kod plik index.html :
  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>Page Title</title>
  4. src="https://code.jquery.com/jquery-3.3.1.min.js"
  5. integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  6. crossorigin="anonymous">
  7. $(document).ready(function(){
  8. $("button").click(function(){
  9. $.ajax({
  10. type: "POST",
  11. url: "form.php",
  12. data: "firstname=" + $('#firstname').val() + "&lastname=" + $('#lastname').val(),
  13. success: function(data){
  14. $('#test').html(data);
  15.  
  16. }
  17. });
  18. });
  19. });
  20. </head>
  21.  
  22. <form name="myForm" method="post">
  23. First name:<br>
  24. <input type="text" id="firstname" name="firstname" value=""><br>
  25. Last name:<br>
  26. <input type="text" id="lastname" name="lastname" value=""><br><br>
  27. <button>Wyślij</button>
  28. </form>
  29. <div id="test"></div>
  30.  
  31.  
  32. </body>
  33. </html>


oraz plik form.php

  1. <?php
  2. $imie = $_POST['firstname'];
  3. $nazwisko = $_POST['lastname'];
  4.  
  5. echo "Formularz został wysłany $imie $nazwisko";
  6. ?>


I wszystko dział gdyby nie jeden mały mankament. Gdy klikam w button formularz jest wysyłany ajaxem do php i otrzymuje odpowiedź ale zaraz po tym następuje przeładowanie strony i nie jest widoczna już moja odpowiedź jak się z tym uporać ?

Dzięki z góry za pomoc.
michuwsh
Powyższy link nie działa ;(

Dzięki za pomoc udało się rozwiązać problem.

Przesyłam poprawny kod :

  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>Page Title</title>
  4. src="https://code.jquery.com/jquery-3.3.1.min.js"
  5. integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  6. crossorigin="anonymous">
  7. $(document).ready(function() {
  8.  
  9. $('button').click(function(event) {
  10.  
  11. var formData = {
  12. 'firstname' : $('input[name=firstname]').val(),
  13. 'lastname' : $('input[name=lastname]').val()
  14. };
  15.  
  16. // process the form
  17. $.ajax({
  18. type : 'POST',
  19. url : 'form.php',
  20. data : formData
  21.  
  22. })
  23.  
  24. .done(function(data) {
  25.  
  26. $('#test').html(data);
  27.  
  28. });
  29.  
  30. event.preventDefault();
  31. });
  32.  
  33. });
  34.  
  35. </head>
  36.  
  37. <form name="myForm" method="post">
  38. First name:<br>
  39. <input type="text" id="firstname" name="firstname" value=""><br>
  40. Last name:<br>
  41. <input type="text" id="lastname" name="lastname" value=""><br><br>
  42. <button>Wyślij</button>
  43. </form>
  44. <div id="test"></div>
  45.  
  46.  
  47. </body>
  48. </html>
trueblue
Obsługa zdarzenia powinna dotyczyć raczej zdarzenia submit na formularzu, a nie click na przycisku.
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-2020 Invision Power Services, Inc.