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

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Przesyłanie formularza za pomocą ajax Jquery

michuwsh

24.07.2018, 07:27:48

Witam,

Oto mój kod plik index.html :

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
		$.ajax({
		type: "POST",
		url: "form.php",
		data: "firstname=" + $('#firstname').val() + "&lastname=" + $('#lastname').val(),
		success: function(data){
			 $('#test').html(data);
 
		}
		});
    });
});
</script>
</head>
<body>
 
<form name="myForm" method="post">
  First name:<br>
  <input type="text" id="firstname" name="firstname" value=""><br>
  Last name:<br>
  <input type="text" id="lastname" name="lastname" value=""><br><br>
  <button>Wyślij</button>
</form>
<div id="test"></div>
 
 
</body>
</html>
[HTML] pobierz, plaintext

oraz plik form.php

[PHP] pobierz, plaintext 
<?php
$imie = $_POST['firstname']; 
$nazwisko = $_POST['lastname']; 
 
echo "Formularz został wysłany $imie $nazwisko";
?>
[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.

trueblue

24.07.2018, 07:51:06

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

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 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>
<script>
$(document).ready(function() {
 
    $('button').click(function(event) {
 
        var formData = {
            'firstname'              : $('input[name=firstname]').val(),
            'lastname'             : $('input[name=lastname]').val()
        };
 
        // process the form
        $.ajax({
            type        : 'POST', 
            url         : 'form.php', 
			data        : formData
 
        })
 
            .done(function(data) {
 
				$('#test').html(data);
 
            });
 
        event.preventDefault();
    });
 
});
 
</script>
</head>
<body>
 
<form name="myForm" method="post">
  First name:<br>
  <input type="text" id="firstname" name="firstname" value=""><br>
  Last name:<br>
  <input type="text" id="lastname" name="lastname" value=""><br><br>
  <button>Wyślij</button>
</form>
<div id="test"></div>
 
 
</body>
</html>
[HTML] pobierz, plaintext

trueblue

24.07.2018, 09:27:47

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.