web-dev-qa-db-fra.com

jQuery soumettre le formulaire sans recharger la page

Je ne connais pas très bien jQuery. J'essaie de créer un formulaire qui est soumis en arrière-plan sans recharger la page.

J'ai un div caché qui s'affiche et se cache au clic, à l'intérieur du div il y a un formulaire.

J'ai deux problèmes:

1) Lorsque la validation du formulaire échoue, le formulaire est toujours soumis. J'ai essayé de mettre les codes de validation et de soumission dans la condition if(validation == valid) { $.ajax.... } mais cela ne fonctionne pas correctement.

2) Une fois le formulaire soumis, le div se masque automatiquement, de sorte que le message réussi ne peut pas être vu.

Voici le code:

$().ready(function() { 

    // Validate the form when it is submitted, using validation plugin.
    var validator = $("#contactform").validate({
        errorContainer: container,
        errorLabelContainer: $(),
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    errorPlacement: function (error, element) { 
error.insertBefore(element);    
}   
    });
});

$(function() {

    //This submits a form
$('input[type=submit]').click(function() {
        $.ajax({
            type: "POST",
            url: "contact.php",
            data: $("#contactform").serialize(),
            beforeSend: function() {
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data) {
                $('#result').html(data);
            }

        })
    })
})


//This shows and hides div onclick
$(document).ready(function(){   
        $(".slidingDiv").hide(); 
        $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    });
});
jqueryajaxformsform-submit
10
qwaz

Plutôt que de vous lier à l'événement click (input[type=submit]) vous devez vous lier à l'événement submit du formulaire.

$("form").on("submit", function (e) {
    e.preventDefault();

Je ne suis pas sûr non plus de la validation. S'il s'exécute de manière asynchrone, un rappel est requis. S'il s'exécute de manière synchrone, quand est-il déclenché? Il semble que cela devrait être fait lorsque le formulaire est soumis, sauf si votre plug-in de validation le fait seul:

$("form").on("submit", function (e) {
    e.preventDefault();
    if ($(this).validate(options)) {
        $.ajax

En utilisant e.preventDefault empêchera le rechargement et devrait permettre à votre div de succès de s'afficher.

22
Explosion Pills

1) Utilisez event.preventDefault(); pour empêcher la soumission du formulaire - http://api.jquery.com/event.preventDefault/

2) Il n'y a rien dans le script donné qui devrait masquer #result, mais vous pouvez essayer $('#result').show() et voir si cela le ramène

1
Seth McClaine

Veuillez vérifier quelle version de jQuery vous utilisez, car après jQuery 1.8.2, la fonction "succès" de jQuery Ajax est obsolète.

Utilisez e.preventDefault() pour empêcher l'événement d'envoi réel.

1
Jay Patel