Kontaktformular

Hallo Leute,

aber ein einfaches Kontaktformular stellt.
Hier der Link dazu: http://lena91567.bplaced.net/kontakt

Das Formular funktioniert auch soweit, nur sollte es zu sein, dass nach dem absenden des Formulars keine neue Seite angezeigt oder geladen wird, sondern es sollte die Seite http://lena91567.bplaced.net/kontakt beibehalten werden und nach der absenden-Schaltfläche sollte eine Erfolgsmeldung erscheinen.

Wie macht man denn sowas?

Hier noch der PHP-Code

<?php

// Prüfe, ob alle Pflichtfelder ausgefüllt sind
if (!isset($_POST['name']) || $_POST['name'] == '') {
  echo 'Bitte geben Sie Ihren Namen ein.';
  exit;
}

if (!isset($_POST['email']) || $_POST['email'] == '') {
  echo 'Bitte geben Sie Ihre E-Mail-Adresse ein.';
  exit;
}

if (!isset($_POST['stelle']) || $_POST['stelle'] == '') {
  echo 'Bitte wählen Sie eine Stelle aus.';
  exit;
}

if (!isset($_POST['stundenanzahl']) || $_POST['stundenanzahl'] == '') {
  echo 'Bitte geben Sie die Stundenanzahl ein.';
  exit;
}

if (!isset($_POST['dienstantritt']) || $_POST['dienstantritt'] == '') {
  echo 'Bitte geben Sie den Dienstantritt ein.';
  exit;
}

if (!isset($_POST['datenschutz']) || $_POST['datenschutz'] == '') {
  echo 'Bitte akzeptieren Sie die Datenschutzerklärung.';
  exit;
}

// Sende die Daten an die E-Mail-Adresse
$to = 'tl-therapeutin@web.de';
$subject = 'Kontaktformular';
$message = '
Name: ' . $_POST['name'] . '
E-Mail-Adresse: ' . $_POST['email'] . '
Telefonnummer: ' . $_POST['telefon'] . '
Stelle: ' . $_POST['stelle'] . '
Stundenanzahl: ' . $_POST['stundenanzahl'] . '
Dienstantritt: ' . $_POST['dienstantritt'] . '
';

mail($to, $subject, $message);

// Gebe eine Erfolgsmeldung aus
echo 'Ihre Anfrage wurde erfolgreich abgesendet.';

danke Jörg für deine Tipps!
Die Ajax-Lösung bevorzuge ich. Werde mal schauen, was ich dazu finde

JavaScript bzw. Jquery-Scripte würde ich mithilfe der JavaScript-Konsole debuggen. Firefox zeigt hier folgende Fehlermeldung an:

Uncaught SyntaxError: return not in function

"return false;" muss innerhalb einer Funktion stehen.

Der Code in Zeile 102 bis 118 sollte doch den entsprechenden Abschnitt in dieser Funktion ersetzen:

$("form").on("submit", function (e) {
    var dataString = $(this).serialize();
    
    $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function () {
        // Display message back to the user here
      }
    });
    e.preventDefault();
});

Das obige Code-Beispiel fehlt allerdings in der deutschen "Übersetzung". Diese ist anscheinend nicht nur vom Ausdruck her ziemlich schrottig. Ich würde stattdessen, falls möglich, das englische Original durcharbeiten:

https://code.tutsplus.com/submit-a-form-without-page-refresh-using-jquery--net-59t

Ohne ein Grundverständnis von Ajax und jquery wird dies allerdings nicht ganz einfach.

Guten Morgen Jörg,

wie behebe ich denn die vorliegende Fehlermeldung

Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.

From line 30, column 7; to line 30, column 38

p">↩      <label for="stelle" id="stelle">Jugend

Hallo Jörg, danke deinen Hinweis.

leider weiß ich immer noch nicht, wie die ID in meinem Fall muss

    <div class="form-group">
      <label for="stelle" id="stelle">Jugendtrainer für</label>
      <input type="radio" name="stelle" id="stelle-maedchen" value="maedchen" required>
      <label for="stelle-maedchen">Mädchen</label>
      <input type="radio" name="stelle" id="stelle-junge" value="junge" required>
      <label for="stelle-junge">Junge</label>
    </div>

Keine Ahnung, das Eingabeelement ist.