Kontaktformular

Sébastien Fournereau

Hallo zusammen,

ich bin dabei meinen Kontaktformular herzustellen leider komme ich nicht weiter...

Dies ist meine Internetseite:
http://testwebsite.physio-in-esslingen.de/kontakt

Dies ist meinen html Code:

HTML

<div class="alert alert-success">
                Well done! You successfully read this important alert message. 
            </div>

            <form id="contact" method="post"  action="kontakt.php">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <input class="span4" id="nachname" name="nachname" size="16" type="text" placeholder="Name">
                </div>
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input class="span4" id="email" name="email" size="16" type="text" placeholder="Email Addresse">
                </div>
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-globe"></i></span>
                    <input class="span4" id="telefon" name="telefon" size="16" type="text" placeholder="Telefonnummer">
                </div>
                <textarea class="span6" id="nachricht" name="nachricht" style="height:115px; margin-top:20px"></textarea>
                <div class="row">
                    <div class="span2" style="margin-top:20px">
                        <input type="submit" class="btn btn-inverse" id="submit" name="submit" value="Abschicken">
                    </div>
                </div>
            </form>

Alles anzeigen

Und meinen php Code:

PHP

<?php
    /* === Daten aus dem Formular auslesen und in Variablen speichern === */
      $nachname = $_POST['nachname'];
      $email = $_POST['email'];
      if(eregi("\r",$from) || eregi("\n",$from)) {
        die("Why ?? :(");
    }
      $telefon = $_POST['telefon'];
      $nachricht = $_POST['nachricht'];


     
    /* === Empfängeradresse und Betreff === */
      $an = 'info@physio-in-esslingen.de'; //Hier Ihre E-Mail-Adresse eintragen
      $betreff = "Kontaktformularnachricht | $nachname ";

    /* === Wenn Bedingung erfüllt, dann E-Mail abschicken - andernfalls Fehlermeldung ausgeben === */
        if ((!empty($nachname))&&(!empty($email))&&(!empty($telefon))&&(!empty($nachricht))) {

          mail($an, $betreff, $nachricht, 'From:' . $email); //Mail versenden

          echo 'Ihre Kontaktnachricht wurde zugestellt. Sie werden bald möglichst eine Antwort erhalten.';
        }
        else {
          echo 'Sie müssen alle Felder ausfüllen. <a href="kontakt.htm">Zurück</a>';
        }
    ?>

Alles anzeigen

Jetzt hätte ich gerne das die Info über fehler und das die Nachricht gesendet wurde in der div:class="alert alert-success" steht und keine neue Seite aufgeht.

Ich habe es mal mit AJAX versucht aber komme nicht weiter, hier meine Codierung:

Code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>

        <script>
            $(function(){
                var submit = $("input[type=submit]"); 
                var email_feld = $("#email"); 
                var nachname_feld = $("#nachname"); 
                var telefon_feld = $("#telefon");
                var nachricht_feld = $("#nachricht");                 

                submit.attr("disabled", "disabled");

                email_feld.bind("change blur", function(){
                    $.post('validate.php', { 
                        action: 'validate_email', 
                        email: $(email_feld).val()
                    }, function(data){
                        if(data == 'error'){
                            $(email_feld).css("border", "2px solid red"); 
                            $(submit).attr("disabled", "disabled");
                        } else {
                            $(email_feld).css("border", "2px solid green"); 
                            $(submit).removeAttr("disabled");

                        }
                    });
                });

                telefon_feld.bind("change blur", function(){
                    $.post('validate.php', { 
                        action: 'validate_telefon', 
                        telefon: $(telefon_feld).val()
                    }, function(data){
                        if(data == 'error'){
                            $(telefon_feld).css("border", "2px solid red"); 
                            $(submit).attr("disabled", "disabled");
                        } else {
                            $(telefon_feld).css("border", "2px solid green"); 
                            $(submit).removeAttr("disabled");

                        }
                    });
                });

                nachname_feld.bind("change blur", function(){
                    $.post('validate.php', { 
                        action: 'validate_nachname', 
                        nachname: $(nachname_feld).val()
                    }, function(data){
                        if(data == 'error'){
                            $(nachname_feld).css("border", "2px solid red"); 
                            $(submit).attr("disabled", "disabled");
                        } else {
                            $(nachname_feld).css("border", "2px solid green"); 
                            $(submit).removeAttr("disabled");

                        }
                    });
                });

                nachricht_feld.bind("change blur", function(){
                    $.post('validate.php', { 
                        action: 'validate_nachricht', 
                        nachricht: $(nachricht_feld).val()
                    }, function(data){
                        if(data == 'error'){
                            $("#antwort").html(data); 
                            $(submit).attr("disabled", "disabled");
                        } else {
                            $("#antwort").html(data); 
                            $(submit).removeAttr("disabled");

                        }
                    });
                });
            })
        </script>

Alles anzeigen

Kann mich jemanden helfen?

Vielen Dank

Gastl

Zitat von Sébastien Fournereau

Jetzt hätte ich gerne das die Info über fehler und das die Nachricht gesendet wurde in der div:class="alert alert-success" steht und keine neue Seite aufgeht.

Dann darfst du keine neue Seite aufrufen! Das machst du mit deiner "kontakt.php" aber. Du müsstest den PHP-Code in deine Startseite des Kontaktformulars (wie in deinem Link) mit integrieren und in dieser nach Eingabefeldern und Fehlern abfragen.

Sébastien Fournereau

Heißt das ich muss dann action="#" schreiben und dann einfach meinen php im header oder im body?

Gastl

Ne, eher so:

PHP

action="<?php echo $_SERVER['PHP_SELF']; ?>"

Es wird dann wohl eine Mischung aus HTML und PHP in einer Datei. So mache ich das jedenfalls mit Formularen immer.
Das bringt dann auch einige "if then else" mit sich, ein geschachteltes Dokument.

Sébastien Fournereau

Und wo tue ich meinen php code im header oder im body?

Gastl

Normaler Weise wird Code, der Eingaben mittels eines Formulares abfragt und auch Ausgaben tätigt, sicher im Body gepackt, oder nicht? Erst Recht wenn HTML und PHP gemischt werden. Du müsstest aber erst mal deine Dateien sinnvoll zusammen legen.

Sébastien Fournereau

hab's jetzt mit hilfe hinbekommen:

HTML

<div class="alert alert-success" id="ajax-response" style="display:none;"> 
            </div>

            <form id="contact" method="post"  action="kontakt.php">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-user"></i></span>
                    <input class="span4" id="nachname" name="nachname" size="16" type="text" placeholder="Name" required>
                </div>
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-envelope"></i></span>
                    <input class="span4" id="email" name="email" size="16" type="email" placeholder="Email Addresse" required>
                </div>
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-globe"></i></span>
                    <input class="span4" id="telefon" name="telefon" size="16" type="text" placeholder="Telefonnummer" required>
                </div>
                <textarea class="span6" id="nachricht" name="nachricht" style="height:115px; margin-top:20px" required></textarea>
                <div class="row">
                    <div class="span2" style="margin-top:20px">
                        <input type="submit" class="btn btn-inverse" id="submit" name="submit" value="Abschicken">
                    </div>
                </div>
            </form>
    </div><!--End page content column-->

    <script>$( document ).ready(function() {
    $( "#contact" ).submit(function( event ) {
 
  // Stop form from submitting normally
  event.preventDefault();


  // Lock form
  $("#contact :input").attr("disabled", true);  
 
  // Get some values from elements on the page:
  var $form = $( this );
  var email_inhalt = $("#email").val(); 
  var nachname_inhalt = $("#nachname").val(); 
  var telefon_inhalt = $("#telefon").val();
  var nachricht_inhalt = $("#nachricht").val();
 
  // Send the data using post
  var posting = $.post( $form.attr( "action" ), {email: email_inhalt, nachname: nachname_inhalt, telefon: telefon_inhalt, nachricht: nachricht_inhalt} );
 
  // Put the results in a div
  posting.done(function( data ) {
    $( "#ajax-response" ).text(data);
    // unlock form
    $("#contact :input").attr("disabled", false);
    $("#ajax-response").fadeIn();      
  });
});  
});
</script>

Alles anzeigen

- - - Aktualisiert - - -

steht dann alles im body

synaptic

also ich hab jetzt nicht alles gesehen, aber ich rate davon ab, die validierung über javascript zu machen
nimm dein formular inklusive serverseitiger vali, stopf den ganzen schizzle in ne php-datei.
bereite das so vor, dass bei einem normalen seitenaufruf alles in der php direkt erzeugt wird.

erst wenn das alles problemlos läuft, nimmst du das ganze baust dir ne ajax.php und includest darin die formular.php,
die rufste auf und dann tauscht du am besten des gesamte formular via ajax aus!

die server müssen des eigentlich eh validieren, denn wenn jemand js deaktiviert brauchste des serverseitg eh, in der heutigen zeit sind server leistungsstark und brauchen net lang. also kannste das clientside validieren sein lassen und einfach das formular an den server schicken

Tags