• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kontaktform "dynamisch" übermitteln

jakestyler

jakestyler

Mitglied
Hey,
ich würde gerne mein Kontaktformular mit AJAX übermitteln.
Da ich nicht weiterkomme, hier was ich bereits habe:

Form:
HTML: 
<form action="contact.php" class="form_contact show animated slideInLeft" method="post" id="contacter">
          <input name="name" type="text" class="form input-xxlarge inline_element" id="name" placeholder="Your Name*" value="" size="40" required="">
          <input type="email" name="email" id="email" size="40" placeholder="Your E-Mail*" class="form input-xxlarge inline_element" value="" required="">
          <br>
          <input type="tel" name="tel" id="tel" size="40" placeholder="Mobile Phonenumber (Worldwide)" value="" class="form input-xxlarge inline_element">
          <br>
          <textarea name="text" id="text" cols="50" placeholder="Your Message*" rows="10" class="form input-xxlarge inline_element" required=""></textarea>
          <p>&nbsp;<br>
            <input name="submit" type="submit" value="Submit" class="co btn-lg btn contact button">
        </p></form>

Die contact.php gibt bei erfolgreicher Übermittlung den Code 100 #RANDOM aus. #RANDOM ist hierbei eine Ticket-ID, die bei jedem Request anders ist. Der Code 200 bedeutet, dass ein oder mehrere Felder nicht komplett ausgefüllt sind und 300 bedeutet einen anderen Fehler.

Je nach Ergebnis würde ich die form dann gerne ausblenden und gegen einen je nach Ergebnis angepassten Text austauschen.

Danke schonmal! :)
 
Werbung:
Werbung:
Naja, du kennst die Regeln. Eigener Ansatz ist Voraussetzung ... ;)

Aber weil morgen Weihnachten ist, hier Ajax für Einsteiger in 5 min.

Wir haben eine Datei mit einem HTML-Formular:
HTML: 
<form action="ajax_deliver.php" method="post">
    <input type="text" name="name"><br>
    <input type="text" name="email"><br>
    <input type="submit" name="submit">
</form>
<div id="result"></div>

und eine zweite Datei mit dem PHP-Skript:

ajax_deliver.php:
PHP: 
<p>
  Name: <?= $_POST['name']; ?><br>
  Mail: <?= $_POST['mail']; ?>
</p>

Nun reichen wir den Inhalt der Input-Felder "name" und "email" an das PHP-Skript weiter, lassen ihn von dort wieder zur Formulardatei zurückliefern und im Div #result anzeigen.:

Code: 
$('input[name="submit"]').on('click', function(e) {
    e.preventDefault(); // HTML-Funktion des Buttons abschalten

  $.ajax({
      url: 'ajax_deliver.php', // 'action' des Formulars
      type: 'POST', // 'method' des Formulars
      data: { // Das hier liegt in $_POST und wird an das PHP-Skript gesendet
          name: $('input[name="name"]').val(),
          mail: $('input[name="email"]').val()
      },
      success: function(result) { // in der Variablen result liegt, was vom PHP-Skript zurückkommt
          $('#result').html(result); // Hier wird der Inhalt von result als innerHTML in das Div #result geschrieben
      }
    });
});

Ist einfach, oder?
 
Man sollte dazu dagen, dass das nicht nur Ajax ist, sondern Javascript mit dem Framework jQuery.

Das heißt, du musst jQuery mit einbinden in deinem HTML.

HTML: 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

MfG
 
Werbung:
Erstmal danke für deinen Lösungsansatz, aber wie so oft, funktioniert etwas bei mir nicht.
Das Ergebnis ist immer: Bitte fülle alle Felder aus.

HTML:
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="charset=UTF-8">
<title>AJAX Übermittlung</title>
</head>

<body>
<form action="ajax_deliver.php" method="post">
<input name="name" type="text" id="name"><br>
<input type="email" name="email" id="email"><br>
<textarea name="text" id="text"></textarea><br>
<input name="submit" type="submit" value="Submit" class="co btn-lg btn contact button" />
</form>
<div id="result"></div>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$('input[name="submit"]').on('click', function(e) {
    e.preventDefault(); // HTML-Funktion des Buttons abschalten
  $.ajax({
      url: 'ajax_deliver.php', // 'action' des Formulars
      type: 'POST', // 'method' des Formulars
      data: { // Das hier liegt in $_POST und wird an das PHP-Skript gesendet
          name: $('input[name="name"]').val(),
          email: $('input[name="email"]').val(),
          text: $('input[name="text"]').val()   
      },
      success: function(result) { // in der Variablen result liegt, was vom PHP-Skript zurückkommt
          $('#result').html(result); // Hier wird der Inhalt von result als innerHTML in das Div #result geschrieben
      }
    });
});
</script>
</body>
</html>

PHP:
PHP: 
<?php
$name = $_REQUEST['name'];
$mail = $_REQUEST['email'];
$msg = $_REQUEST['text'];
  
if(empty($_REQUEST['name']) || empty($_REQUEST['email']) || empty($_REQUEST['text'])){
    $ergebnis = 'Bitte fülle alle Felder aus.';
}
     else{$ergebnis = "Alles ok.";}

echo $ergebnis;
?>

Das Skript habe ich aus dem, was es später werden soll natürlich stark vereinfacht, eben nur für die Testzwecke.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben