JQuery bringt diese Funktionen dazu, zusammenzuarbeiten

Question

Ich bin neu in JQuery und habe versucht, nach einer Antwort darauf zu suchen, wie es geht. Ich habe 2 Funktionen und möchte beide zusammenarbeiten. Die eine Funktion ist ein Unterfrist und sie wird verwendet, um ein Formular zu verbergen und gleichzeitig eine Klasse zu einem versteckten Element hinzuzufügen, um es zu entlasten - dh ein Dankeschön für die Einreichung von H1. Die andere Funktion besteht darin, die Eingabedaten zu greifen und sie in Form des Formulars anzuzeigen. Das Problem ist also, dass ich diesen einen zum Laufen bringen kann, aber der andere nicht. Dh auf Formular Senden Ich kann die Dateneingabe sehen, aber nicht die H1 -Dankesnachricht.

Hier sind die Funktionen:

Eingabemittel:

    submitHandler: function() {


    $("#content").empty();
    $("#content").append(
    "<p>If you want to be kept in the loop...</p>" +
    "<p>Or you can contact...</p>"
    );
    $('h1.success_').removeClass('success_').addClass('success_form');
    $('#contactform').hide();

},

OnSubmit = "Return InputData ()" return ""

    function inputdata(){

                    var usr = document.getElementById('contactname').value;
                    var eml = document.getElementById('email').value;
                    var msg = document.getElementById('message').value;

                    document.getElementById('out').innerHTML = usr + " " + eml + msg;
                    document.getElementById('out').style.display = "block";

                    return true;
            },

Das Formular verwendet PHP und JQuery - ich weiß nichts über Ajax, aber nachdem einige noch weniger sicher gelesen haben. Bitte helfen Sie mir, ich weiß nicht, was ich tue, und im Moment lerne ich, aber es ist immer noch ein langer Weg für mich.

Vielen Dank

Die Form:

          <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform" onsubmit="return inputdata()">
        <div class="_required"><p class="label_left">Name*</p><input type="text" size="50" name="contactname" id="contactname" value="" class="required" /></div><br/><br/>
        <div class="_required"><p class="label_left">E-mail address*</p><input type="text" size="50" name="email" id="email" value="" class="required email" /></div><br/><br/>
        <p class="label_left">Message</p><textarea rows="5" cols="50" name="message" id="message" class="required"></textarea><br/>
        <input type="submit" value="submit" name="submit" id="submit" />
    </form>

Das PHP -Bit:

<?php

$ probjekt = "Website -Kontaktformularanfrage";

// Wenn das Formular eingereicht wird, wenn (isset ($ _ post ['subieren'])) {

//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
    $hasError = true;
} else {
    $name = trim($_POST['contactname']);
}

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '')  {
    $hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
    $hasError = true;
} else {
    $email = trim($_POST['email']);
}

//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
    $hasError = true;
} else {
    if(function_exists('stripslashes')) {
        $comments = stripslashes(trim($_POST['message']));
    } else {
        $comments = trim($_POST['message']);
    }
}

//If there is no error, send the email
if(!isset($hasError)) {
    $emailTo = 'info@bgv.co.za'; //Put your own email address here
    $body = "Name: $name \n\nEmail: $email \n\nComments:\n $comments";
    $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

    mail($emailTo, $subject, $body, $headers);
    $emailSent = true;

}

} ?>

Die jQuery bestätigt das Bit:

$(document).ready(function(){
$('#contactform').validate({

       showErrors: function(errorMap, errorList) {
       //restore the normal look
       $('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
       //stop if everything is ok
       if (errorList.length == 0) return;
       //Iterate over the errors
       for(var i = 0;i < errorList.length; i++)
       $(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
        },

Hier ist das vollständige jQuery -Stück:

$(document).ready(function(){

$('#contactform').validate({

       showErrors: function(errorMap, errorList) {
       //restore the normal look
       $('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
       //stop if everything is ok
       if (errorList.length == 0) return;
       //Iterate over the errors
       for(var i = 0;i < errorList.length; i++)
       $(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
        },

submitHandler: function() {             

    $('h1.success_').removeClass('success_').addClass('success_form');
    $("#content").empty();
    $("#content").append('#sadhu');
    $('#contactform').hide();

},

}); });

Neueste Bearbeitung - Sieht so aus:

$(document).ready(function(){

$('#contactform').validate({

       showErrors: function(errorMap, errorList) {
       //restore the normal look
       $('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
       //stop if everything is ok
       if (errorList.length == 0) return;
       //Iterate over the errors
       for(var i = 0;i < errorList.length; i++)
       $(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
        },

    function submitHandler() {             
        $('h1.success_').removeClass('success_').addClass('success_form');
        $("#content").empty();
        $("#content").append('#sadhu');
        $('#contactform').hide();
    },
    function inputdata() {
         var usr = document.getElementById('contactname').value;
         var eml = document.getElementById('email').value;
         var msg = document.getElementById('message').value;
         document.getElementById('out').innerHTML = usr + " " + eml + msg;
         document.getElementById('out').style.display = "block";
    },
    $(document).ready(function(){
        $('#contactForm').submit(function() {
            inputdata();
            submitHandler();
        });
    });

});

Answer 1

Ihre Einstellungsfunktion wird nicht aufgerufen. Deshalb funktioniert es nicht.

Fügen Sie dies Ihrem Code hinzu:

$('#contactForm').submit(function() {
inputdata();
submitHandler();

});

BEARBEITEN:

Versuche dies:

$(document).ready(function(){

$('#contactform').validate({

showErrors: function(errorMap, errorList) {
   //restore the normal look
   $('#contactform div.xrequired').removeClass('xrequired').addClass('_required');
   //stop if everything is ok
   if (errorList.length == 0) return;
   //Iterate over the errors
   for(var i = 0;i < errorList.length; i++)
   $(errorList[i].element).parent().removeClass('_required').addClass('xrequired');
},

submitHandler: function(form) {             
    $('h1.success_').removeClass('success_').addClass('success_form');
    $("#content").empty();
    $("#content").append('#sadhu');
    $('#contactform').hide();
    var usr = document.getElementById('contactname').value;
    var eml = document.getElementById('email').value;
    var msg = document.getElementById('message').value;
    document.getElementById('out').innerHTML = usr + " " + eml + msg;
    document.getElementById('out').style.display = "block";
    form.submit();
}
});
});

Answer 2

Ich weiß, dass diese Frage bereits beantwortet wurde, und dies geht nicht direkt in Bezug auf die Frage selbst; mehr in Bezug auf den Code in der Frage. Ich kann jedoch keine Kommentare veröffentlichen, da ich ein brandneues Mitglied bin, aber ich dachte nur, ich würde ein paar Dinge in Ihrem Code hervorheben! Hauptsächlich Konsistenz in Bezug auf die Verwendung von JQuery.

In der Funktion für 'Submithandler' - leeren Sie $ ('#content') und gleichen dann HTML an. Dies wird funktionieren, aber eine einfachere Methode wäre die Verwendung der Funktion .html (); Beachten Sie, dass diese Funktion kann verwendet werden, um die in einem Element enthaltene HTML zurückzugeben; Aber dann werden keine Argumente geliefert. Wenn Sie ein Argument liefern, schreibt es den Inhalt des HTML-Elements neu. Darüber hinaus würde ich höchstwahrscheinlich die .show () -Methode für das H1 -Erfolgselement verwenden; wenn nur für die Code -Lesbarkeit.

Zum Beispiel:

submitHandler: function(){
    $('#content').html( "<p>If you want to be kept in the loop...</p>"
        + "<p>Or you can contact...</p>");
    $('h1.success_').show();
    $('contactform').hide();
}

Was InputData () betrifft - Sie scheinen hier ein wenig von dem Jquery -Ethos abgewichen zu haben, würde ich bei der persönlichen Verwendung von JQuery anstreben - aber auch wie die JQuery -Syntax das traditionelle JavaScript 'document.getelemen ...' Objekt sieht etwas veraltet aus/Es ist zusätzlich zu tippen. Im einfachsten JQuery wird im Wesentlichen als Wrapper für das Dokumentobjekt angesehen - nur mit zusätzlichem syntaktischem Zucker. Darüber hinaus können Sie Methoden anketten, sodass die letzten beiden Ausdrücke im Wesentlichen "verkleidet" werden können, um bei der Verwendung von JQuery als eins auszusehen.

Ich würde persönlich .val (), .html () und .css () verwenden; Beispiel:

function inputdata(){
    var usr = $('#contactname').val();
    var eml = $('#email').val();
    var msg = $('#message').val();

    $('#out').html( usr + " " + eml + msg )
    .css('display', 'block');

    return true;
}

Answer 3

Ändern Sie die Rückgabe true, um in der Funktion inputData false zurückzugeben