Wysyłanie formularza za pomocą jQuery + AJAX (HTML + jQuery/Ajax + PHP )

pytanie zadane 23 grudnia 2019 w JavaScript przez rupert Nowicjusz (150 p.)

Walczę z formularzem kontaktowym i jego przesłaniem za pomocą Ajax. Po uzupełnieniu wszystkich pól formularz wysyła się lecz strona przeładowuje adresę index.html/? - wyrzuca spowrotem stronę główną.
Przy wypełnieniu wszystkich pól oprócz treści wiadomości, formularz wysyła się za pośrednictwem ajax i wszystko działa tak jak powinno. Kombinuję na lewo i prawo i nie mogę dojść czego to wina...

Kod js:

    <script>
        $(document).ready(function() {

            $("#sendMessageButton").click(function() {
                var name = $("#name").val();
                var email = $("#email").val();
                var phone = $("#phone").val();
                var message = $("#message").val();

                $.ajax({
                    type: "POST",
                    url: "contact_me.php",
                    data: {
                        name: name,
                        phone: phone,
                        email: email,
                        message: message
                    },
                    cache: false,
                    success: function(data) {
                        alert("form was submitted");
                        return false;
                    },                 

                })
            })
        })
    </script>

Kod php:

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$tele = $_POST['phone'];
$wiado = $_POST['message'];
 
$dokogo = "docelowy_adres_email";
 
$naglowki = "Reply-to: ".$dokogo." <".$dokogo.">".PHP_EOL;
$naglowki .= "From: ".$dokogo." <".$dokogo.">".PHP_EOL;
$naglowki .= "MIME-Version: 1.0".PHP_EOL;
$naglowki .= "Content-type: text/html; charset=utf-8".PHP_EOL; 
 
$tytul = "Formularz Kontaktowy";
 
$wiadomosc = "
<html> 
<body>
    <i>Imie i nazwisko:</i> <b>" . $name . "</b><br>
    <i>Email:</i> <b>" . $email . "</b><br>
    <i>Telefon:</i> <b>" . $tele . "</b><br>
    <i>Termin:</i> <b>" . $termin . "</b><br>
    <i>Wiadomość:</i> <b>" . $wiado . "</b>
</body>
</html>";
 
echo mail($dokogo, $tytul, $wiadomosc, $naglowki);
return true;
?>

1 odpowiedź

odpowiedź 23 grudnia 2019 przez antypop Mądrala (5,730 p.)
wybrane 23 grudnia 2019 przez rupert

Najlepsza

Spróbuj :

$("#sendMessageButton").click(function(e) {
            e.preventDefault();
            var name = $("#name").val();
            var email = $("#email").val();
            var phone = $("#phone").val();
            var message = $("#message").val();

zablokuje to natywny event na przyciku submit (bo przypuszczam że formularz masz zamknięty w <form>).

Pozdrawiam

komentarz 23 grudnia 2019 przez rupert Nowicjusz (150 p.)

Dokładnie tego mi brakowało :)
Dzięki wielkie!

komentarz 23 grudnia 2019 przez dawid6512 Gaduła (4,550 p.)

mozesz tez zamiast

<input type="submit">
lub
<button></button>

użyc

<input type="button">
lub
<button type="button"></button>

Podobne pytania

Wysyłanie formularza za pomocą jQuery + AJAX (HTML + jQuery/Ajax + PHP )

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci