Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ AJAX _ Przesyłanie formularza za pomocą ajax Jquery

Napisany przez: michuwsh 24.07.2018, 07:27:48

Witam,

Oto mój kod plik index.html : 

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


oraz plik form.php

[PHP] pobierz, plaintext 
  1. <?php
  2. $imie = $_POST['firstname']; 
  3. $nazwisko = $_POST['lastname']; 
  4.  
  5. http://www.php.net/echo "Formularz został wysłany $imie $nazwisko";
  6. ?>
[PHP] pobierz, plaintext


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.

Napisany przez: trueblue 24.07.2018, 07:51:06

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

Napisany przez: michuwsh 24.07.2018, 09:08:02

Powyższy link nie działa ;(

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

Przesyłam poprawny kod :

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <http://december.com/html/4/element/html.html>
  3. <http://december.com/html/4/element/head.html>
  4. <http://december.com/html/4/element/meta.html charset="UTF-8">
  5. <http://december.com/html/4/element/title.html>Page Title</http://december.com/html/4/element/title.html>
  6. <http://december.com/html/4/element/script.html
  7.   src="https://code.jquery.com/jquery-3.3.1.min.js"
  8.   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  9.   crossorigin="anonymous">
  10. </http://december.com/html/4/element/script.html>
  11. <http://december.com/html/4/element/script.html>
  12. $(document).ready(function() {
  13.  
  14.     $('button').click(function(event) {
  15.  
  16.         var formData = {
  17.             'firstname'              : $('input[name=firstname]').val(),
  18.             'lastname'             : $('input[name=lastname]').val()
  19.         };
  20.  
  21.         // process the form
  22.         $.ajax({
  23.             type        : 'POST', 
  24.             url         : 'form.php', 
  25. 			data        : formData
  26.  
  27.         })
  28.  
  29.             .done(function(data) {
  30.  
  31. 				$('#test').html(data);
  32.  
  33.             });
  34.  
  35.         event.preventDefault();
  36.     });
  37.  
  38. });
  39.  
  40. </http://december.com/html/4/element/script.html>
  41. </http://december.com/html/4/element/head.html>
  42. <http://december.com/html/4/element/body.html>
  43.  
  44. <http://december.com/html/4/element/form.html name="myForm" method="post">
  45.   First name:<http://december.com/html/4/element/br.html>
  46.   <http://december.com/html/4/element/input.html type="text" id="firstname" name="firstname" value=""><http://december.com/html/4/element/br.html>
  47.   Last name:<http://december.com/html/4/element/br.html>
  48.   <http://december.com/html/4/element/input.html type="text" id="lastname" name="lastname" value=""><http://december.com/html/4/element/br.html><http://december.com/html/4/element/br.html>
  49.   <http://december.com/html/4/element/button.html>Wyślij</http://december.com/html/4/element/button.html>
  50. </http://december.com/html/4/element/form.html>
  51. <http://december.com/html/4/element/div.html id="test"></http://december.com/html/4/element/div.html>
  52.  
  53.  
  54. </http://december.com/html/4/element/body.html>
  55. </http://december.com/html/4/element/html.html>
[HTML] pobierz, plaintext

Napisany przez: trueblue 24.07.2018, 09:27:47

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)