jQuery obtenir ces fonctions à travailler ensemble

Question

Je suis nouveau à jQuery et ont essayé de regarder autour d'une réponse sur la façon de le faire. J'ai 2 fonctions et je voudrais à la fois de travailler ensemble. La seule fonction est submitHandler et son habitude de se cacher sous une forme et en même temps ajouter une classe à un élément caché pour l'afficher - dire un merci pour soumettre h1. L'autre fonction est de saisir les données d'entrée et l'afficher sous la forme onsubmit. Le problème est que je peux obtenir que l'un au travail mais l'autre ne marche pas. -À-dire sur la forme que je peux voir soumettre l'entrée de données, mais pas les h1 Merci message.

Voici les fonctions:

SubmitHandler:

    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 = "donnéesEntrée de retour ()"

    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;
            },

Le formulaire utilise PHP et jQuery - Je ne sais pas à propos de AJAX, mais après un peu de lecture encore moins sûr. S'il vous plaît, aidez-moi je ne sais pas ce que je fais et pour le moment je suis apprentissage, mais sa longue route pour moi encore.

Merci

Le formulaire:

          <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>

Le PHP bit:

<?php

$ subject = "Site web Contact Formulaire de demande";

// Si le formulaire est soumis if (isset ($ _ POST [ 'submit'])) {

//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;

}

} ?>

Le Jquery Valider 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');
        },

Voici le bit complet jquery:

$(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();

},

}); });

Dernières modifier - se présente comme suit:

$(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

Votre fonction submitHandler est pas appelée. Voilà pourquoi il ne fonctionne pas.

Ajouter à votre code:

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

});

EDIT:

essayez ceci:

$(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

Je sais que cette question a déjà répondu et ce n'est pas directement sur la question elle-même; d'autant plus en ce qui concerne le code dans la question. Cependant, je ne peux pas poster des commentaires que je suis un nouveau membre, mais je pensais que je voudrais souligner quelques choses dans votre code! Principalement cohérence en ce qui concerne l'utilisation de jQuery.

Dans la fonction fournie pour 'submitHandler' - vous videz $ ( '# content'), puis append HTML à elle. Cela fonctionne, mais une méthode plus simple serait d'utiliser la fonction .html (); Notez que cette fonction peut être utilisé pour retourner le code HTML contenu dans un élément; mais c'est quand aucun argument sont fournis. Lorsque vous fournissez un argument, il réécrit le contenu de l'élément HTML. De plus, je voudrais utiliser très probablement la méthode .Show () sur l'élément de succès h1; si seulement pour la lisibilité du code.

Par exemple:

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();
}

En ce qui concerne donnéesEntrée () - vous semblez avoir hors de l'égarée jQuery Ethos ici un peu nouveau, je vise la cohérence lors de l'utilisation de jQuery personnellement - mais aussi comme la syntaxe jQuery rend le javascript traditionnels « document.getElemen. .. » look objet un peu dépassé / il est en plus de taper. À la base jQuery est essentiellement mieux considérée comme une enveloppe pour l'objet document - juste avec sucre ajouté syntactique. De plus, il vous permet de méthodes de la chaîne -. De sorte que les deux dernières expressions peuvent être essentiellement « habillés » à regarder comme un lorsque vous utilisez jQuery

Je personnellement utiliser les fonctions .val (), .html () et Css (); exemple:

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

CHange return true pour return false dans la fonction donnéesEntrée