web-dev-qa-db-fra.com

Comment faire un rappel Jquery après la soumission du formulaire?

J'ai un formulaire simple avec remote = true.

Ce formulaire est en fait dans un dialogue HTML, qui se ferme dès que vous cliquez sur le bouton Soumettre.

Maintenant, je dois apporter quelques modifications à la page HTML principale une fois le formulaire soumis.

J'ai essayé cela en utilisant jQuery. Toutefois, cela ne garantit pas que les tâches sont effectuées après une certaine forme de réponse de la soumission du formulaire.

$("#myform").submit(function(event) {

// do the task here ..

});

Comment joindre un rappel pour que mon code ne soit exécuté qu'une fois le formulaire soumis? Est-il possible d'ajouter des rappels .success ou .complete au formulaire?

javascriptjqueryhtmlasp.netwebforms
112
geeky_monster

Je viens de faire ceci -

 $("#myform").bind('ajax:complete', function() {

         // tasks to do 


   });

Et les choses ont fonctionné parfaitement.

Voir cette documentation api pour plus de détails.

111
geeky_monster

Je ne pouvais pas obtenir la solution numéro un voté pour fonctionner de manière fiable, mais j'ai trouvé que cela fonctionne. Pas sûr que ce soit nécessaire ou non, mais je n'ai pas d'attribut d'action ou de méthode sur la balise, ce qui garantit que le POST est géré par la fonction $ .ajax et vous donne l'option de rappel.

<form id="form">
...
<button type="submit"></button>
</form>

<script>
$(document).ready(function() {
  $("#form_selector").submit(function() {

    $.ajax({
     type: "POST",
      url: "form_handler.php",
      data: $(this).serialize(),
      success: function() {
        // callback code here
       }
    })

  })
})
</script>
29
Bradley Bossard

Vous devrez faire les choses manuellement avec un appel AJAX au serveur. Vous devrez également remplacer le formulaire.

Mais ne vous inquiétez pas, c'est un morceau de gâteau. Voici un aperçu de la façon dont vous allez travailler avec votre formulaire:

  • redéfinit l'action de soumission par défaut (grâce à l'objet event passé dans, qui a une méthode preventDefault)
  • saisir toutes les valeurs nécessaires du formulaire
  • lancer une requête HTTP
  • gérer la réponse à la demande

Tout d'abord, vous devrez annuler l'action de soumission de formulaire de la manière suivante:

$("#myform").submit(function(event) {
    // Cancels the form's submit action.
    event.preventDefault();
});

Et puis, prenez la valeur des données. Supposons simplement que vous ayez une zone de texte.

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();
});

Et puis lancer une demande. Supposons simplement que c'est une demande POST.

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();

    // I like to use defers :)
    deferred = $.post("http://somewhere.com", { val: val });

    deferred.success(function () {
        // Do your stuff.
    });

    deferred.error(function () {
        // Handle any errors here.
    });
});

Et cela devrait le faire.

Remarque 2: Pour analyser les données du formulaire, il est préférable d'utiliser un plugin . Cela vous facilitera vraiment la vie et vous fournira une sémantique de Nice qui imite une action de soumission de formulaire.

Remarque 2: Vous n'êtes pas obligé d'utiliser les différés. C'est juste une préférence personnelle. Vous pouvez également faire ce qui suit et cela devrait fonctionner aussi.

$.post("http://somewhere.com", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});
24
Sal

Pour MVC, l'approche était encore plus simple. Vous devez utiliser le formulaire Ajax et définir les options Ajax.

@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" }))
{ 
  ... html for form
}

voici le code de soumission, il se trouve dans la section Document Ready et lie l'événement onclick du bouton à l'envoi du formulaire.

$("#btnSubmitFileUpload").click(function(e){
        e.preventDefault();
        $("#frmUploadTrainingMedia").submit();
});

voici le rappel référencé dans les options Ajax

function displayUploadMediaMsg(d){
    var rslt = $.parseJSON(d.responseText);
    if (rslt.statusCode == 200){
        $().toastmessage("showSuccessToast", rslt.status);
    }
    else{
        $().toastmessage("showErrorToast", rslt.status);
    }
}

dans la méthode du contrôleur pour MVC, il ressemble à ceci

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // there is only one file  ... do something with it
        }
        return Json(new
        {
            statusCode = 200,
            status = "File uploaded",
            file = "",
        }, "text/html");
    }
    else
    {
        return Json(new
        {
            statusCode = 400,
            status = "Unable to upload file",
            file = "",
        }, "text/html");
    }
}
8
edepperson

Je ne crois pas qu'il existe une fonction de rappel comme celle que vous décrivez.

Ce qui est normal ici est de faire les modifications en utilisant un langage côté serveur, comme PHP.

Dans PHP, vous pouvez par exemple récupérer un champ caché dans votre formulaire et apporter quelques modifications s'il est présent.

PHP:

  $someHiddenVar = $_POST["hidden_field"];
    if (!empty($someHiddenVar)) {
        // do something 
    }

Une façon de s'y prendre dans Jquery est d'utiliser Ajax. Vous pouvez écouter pour soumettre, renvoyer false pour annuler son comportement par défaut et utiliser jQuery.post () à la place. jQuery.post a un callback réussi.

$.post("test.php", $("#testform").serialize(), function(data) {
  $('.result').html(data);
});

http://api.jquery.com/jQuery.post/

7
Sindre

Les gestionnaires "on submit" du formulaire sont appelés avant que le formulaire ne soit soumis. Je ne sais pas s'il y a un gestionnaire à appeler après l'envoi du formulaire. Dans le sens non Javascript, la soumission du formulaire rechargera la page.

1
eel ghEEz
$("#formid").ajaxForm({ success: function(){ //to do after submit } });
0
Aikanáro