• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Cloud VPS
0 głosów
1,381 wizyt
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ź

+1 głos
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

0 głosów
0 odpowiedzi 334 wizyt
0 głosów
1 odpowiedź 479 wizyt
pytanie zadane 26 listopada 2015 w JavaScript przez makoso Mądrala (7,380 p.)
0 głosów
1 odpowiedź 322 wizyt

93,486 zapytań

142,420 odpowiedzi

322,771 komentarzy

62,900 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...