Wie ändert man ein Formular, das ein Div enthält, nach der Validierung und Übermittlung?

Question

Ich habe ein Formular, das mit Jquery validiert. Die ID des Formulars ist "Kontakt" und es ist innerhalb eines div namens "formdiv".

Ich möchte, dass beim Absenden der Inhalt von "formdiv" durch den Inhalt von "contact_received.php" einschließlich der übermittelten $_GET-Daten ersetzt wird, anstatt mich auf eine neue Seite "contact_received.php" zu bringen. (z.B.: echo 'Vielen Dank, '.$_GET['Name'].' für die Kontaktaufnahme, wir melden uns bei Ihnen über '.$_GET['Nachricht']). Ich suchte nach etwas ähnlichem online & dachte, ich würde jquery submit handler verwenden:

$("#contact").validate({    
rules: {SOME RULES-clipped for length}, 
messages: {SOME MESSAGES-clipped for length},

submitHandler: function() { 
    $.ajax({
        url: '/contact_received.php',
        type: "GET",
        data: datastring,    
        cache: false,
        success: function (html) {             
            $('#formdiv').fadeOut('slow',complete);
            function complete() { 
                $('#formdiv').fadeIn('slow').html(html); 
                $('.loading').hide();
            }
        }
    });
}
});

Formular-Code ist hier:

<div id="formdiv">

    <form id="contact" name="contact" action="/contact_received.php" method="get">

        Your Name

        <input type="text" name="name" id="name" value="" style="display:block;">

     Your Email

      <input type="text" name="email" value="" style="display:block;">

      messsage

      <textarea name="message" cols="50" rows="5" style="display:block;"></textarea>

     <input type="submit" class="btn" value=

      "Contact Us" name="Submit">

  </form> 
</div>

Dadurch wird die Validierung nicht unterbrochen, aber ich werde direkt auf die Seite contact_received.php weitergeleitet. Was mache ich falsch?

Answer 1

Ich habe Ihren Code auf meinem PC ausprobiert und er funktioniert gut. Ich habe sogar einige Regeln und Meldungen hinzugefügt.

$("#contact").validate({
    rules : {
        name : { required: true, minlength: 3 },
        email : { required: true, email: true },
        message: { required: true, minlength: 5 }
    },
    messages: {
        name: {
           required: "We need your name to identify you",
           minlength: jQuery.format("At least {0} characters required!")
        },
        email: {
           required: "We need your email address to contact you",
           email: "Your email address must be in the format of name@domain.com",
        },
        message: {
            required: "You need to write something",
            minlength: jQuery.format("At least {0} characters required!")
        }
    },
    submitHandler: function() { 
        $.ajax({
            url: './contact_received.php',
            type: "GET",
            data: 'name=Romain&message=something',    
            cache: false,
            success: function (html) {            
                $('#formdiv').fadeOut('slow',complete);
                function complete() { 
                    $('#formdiv').fadeIn('slow').html(html); 
                    $('.loading').hide();
                }
            }
        });
    }
});

Ich schlage vor, Sie zeigen uns Ihre Regeln und Mitteilungen. Wenn Sie einen Syntaxfehler im Javascript-Code haben, werden Sie auf die Zielseite umgeleitet.

(Tipp: Um Javascript-Fehler in Firefox zu sehen, gehen Sie ins Firefox-Hauptmenü => Webentwicklung => Fehlerkonsole). Ich hoffe, die Menüs sind auf Englisch die gleichen, ich bin Franzose.

EDIT : Ich habe auch einen Punkt vor dem Namen der php-Datei hinzugefügt: url: './contact_received.php' . Auf meinem Computer, wenn ich es nicht schreibe, passiert nichts, wenn ich das Formular abschicke (keine Umleitung, nichts)

Answer 2

OK, Sie verwenden das Validierungs-Plugin. Versuchen Sie, dies zu ändern:

<form id="contact" name="contact" action="/contact_received.php" method="get">

a esto:

<form id="contact" name="contact" action="">

Und entfernen Sie das return false, das ich vorhin angeboten habe, als ich den Formularcode nicht hatte.

OK, das haben wir jetzt hinter uns gelassen. Versuchen Sie dies:

$.ajax({
    url: '/contact_received.php',
    type: "GET",
    data: datastring,    
    cache: false,
    success: function (html) {
        function complete() { 
            $('#formdiv').fadeIn('slow').html(html); 
            $('.loading').hide();
        }             
        $('#formdiv').fadeOut('slow',complete);

    }
});

Ich habe die ajax-Funktion so angepasst, dass die komplette Funktion vor dem Aufruf definiert wird und nicht wie bei Ihnen erst danach.

Versuchen Sie das mal.