Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Przesyłanie formularza za pomocą ajax Jquery
michuwsh
post 24.07.2018, 07:27:48
Post #1





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 1.03.2016

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


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.
Go to the top of the page
+Quote Post
trueblue
post 24.07.2018, 07:51:06
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


https://www.google.com/search?q=jquery%20send%20form%20ajax

Ten post edytował trueblue 24.07.2018, 07:54:20


--------------------
Go to the top of the page
+Quote Post
michuwsh
post 24.07.2018, 09:08:02
Post #3





Grupa: Zarejestrowani
Postów: 51
Pomógł: 0
Dołączył: 1.03.2016

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


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>
Go to the top of the page
+Quote Post
trueblue
post 24.07.2018, 09:27:47
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


Obsługa zdarzenia powinna dotyczyć raczej zdarzenia submit na formularzu, a nie click na przycisku.


--------------------
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 17:38