Onepage: Kontaktformular über PHP senden

[Narox]

Hallo

Ich habe eine Bootstrap 4 OnePage mit einem Kontaktformular. Header des Formulars:

<form action="contact.php" class="was-validated" method="post">

Klickt man auf den Submit Button wird zunächst geprüft, ob das CAPTCHA geklickt wurde:

<script>$("form").submit(function(event) {
    var recaptcha = $("#g-recaptcha-response").val();
    if (recaptcha === "") {
        event.preventDefault();
        $("#recaptcha-error").text("Bitte Häkchen setzen");
    }
});</script>

Anschließend wird über PHP PEAR die E-Mail versendet (contact.php):

<?php
require_once "Mail.php";
$host = "xxx.kasserver.com";
$port = "587";
$username = "xxx";
$password = "xxx";
$from = "xxx";
$to = "xxx";
$subject = "Formular";
$body = "<b>Daten des Formulars</b><br>" .
"<br>Anrede: " . $_POST["anrede"] .
"<br>Vorname: " . $_POST["vorname"] .
"<br>Nachname: " . $_POST["nachname"] .
"<br>Nachricht: " . $_POST["nachricht"];

$headers = array ('From' => $from, 'To' => $to, 'Subject' => $subject, 'MIME-Version' => 1, 'Content-type' => 'text/html;charset=iso-8859-1');
$smtp = Mail::factory('smtp', array ('host' => $host, 'port' => $port, 'auth' => true, 'username' => $username, 'password' => $password));
$mail = $smtp->send($to, $headers, $body);

if (PEAR::isError($mail)) {
    echo("<p>" . $mail->getMessage() . "</p>");
} else {
    echo("<p>Message successfully sent!</p>");
}
?>

Meine Frage:
Ich möchte aber auf meiner OnePage bleiben und nur ein Modal (Bootstrap Funktion) ausgeben mit dem Hinweis, dass das Formular versendet wurde. Leider weiß ich nicht, wie ich das am Besten umsetze, hat da jemand Erfahrung?

Dachte zuerst ich könnte ich die JavaScript Funktion noch ein else einbauen in dem dann irgendwie das Modal aufgerufen wird mit dem Inhalt von contact.php im Hintergrund und ein "Formular wurde versendet" im Vordergrund. Aber weiß leider nicht, wie technischt am Besten umsetzen.

 

[Tokolosh]

AJAX ist vermutlich das was du suchst.

HTML Request per AJAX von Client an den Server, PHP skript sendet Mail und schickt ein Ergebnis zurück. Dann wird das ausgewertet und je nachdem, was in der Response steht kannst du einen Modalen Dialog öffnen.

 

[Narox]

Meinst du sowas:
https://blog.teamtreehouse.com/create-ajax-contact-form

 

[Tokolosh]

Habs mir jetzt nicht im detail angeguckt, aber ja das ist die Richtung. Ich denke mal auch, dass mit OnePage eine SPA (Single Page Application) gemeint war? Also möchtest du keine neu ladenden Seiten, sondern Content dynamisch einbinden.

 

[r15ch13]

https://api.jquery.com/jQuery.ajax/

$('form').submit(function () {
    $.ajax({
        url: 'contact.php',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo',
            'bar': 'some-bar' // hier daten aus deinem Form reinholen
        }
    }).done(function (data) {
        // data koennte auch eine Meldung von contact.php enthalten
    }).fail(function (data) {
        // mach hier vielleicht etwas anderes
    });;

    return false;
});

Mit der contact.php dann passen HTTP-Status Code mitschicken. Dann kannste den auch ordentlich mit jQuery verarbeiten.


Bitte das Captcha Serverseitig noch mal ueberpruefen (https://developers.google.com/recaptcha/docs/verify), ansonsten gibts Spam

 

[Narox]

Es funktioniert alles, vielen Dank

Vielleicht weiß aber jemand wieso das hier nicht geht im AJAX Aufruf. Möchte vom Formular den Dropdown Wert auslesen: $("#anrede option:selected").val()

 

[Tokolosh]

Was möchtest du jetzt wissen? Ist der Code valide? Ja! Warum hat er nicht den richtigen Wert? Woher soll das jemand wissen ohne den restlichen Code zu kennen? Ich vermute du hast kein value gesetzt in deinen <option> Tags. Aber das ist reine Spekulation.

 

[r15ch13]

Den Dropdown Wert erhaelt man durch ein simples: $("#anrede").val()

 

[Narox]

Danke r15ch13