Comment faire un rappel Jquery après l'envoi du formulaire?

J'ai un formulaire simple avec remote = true.

Ce formulaire est en fait sur une boîte de dialogue HTML, qui se ferme dès que le bouton Soumettre est cliqué.

Maintenant, je dois apporter des modifications sur la page HTML principale une fois le formulaire soumis avec succès.

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

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

// do the task here ..

});

Comment attacher un rappel, de sorte que mon code ne soit exécuté qu'une fois le formulaire soumis avec succès? Existe-t-il un moyen d'ajouter un rappel .success ou .complete au formulaire?

Je viens de faire ça -

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

         // tasks to do 


   });

Et les choses ont parfaitement fonctionné.

Consultez cette documentation API pour plus de détails.

Je n'ai pas pu faire fonctionner de manière fiable la solution numéro un votée positivement, mais j'ai trouvé que cela fonctionne. Je ne sais pas si c'est 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>

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

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

• remplacer l'action de soumission par défaut (grâce à l'objet événement passé, qui a une preventDefaultméthode)
• saisir toutes les valeurs nécessaires du formulaire
• déclencher une requête HTTP
• gérer la réponse à la demande

Tout d'abord, vous devrez annuler l'action d'envoi de formulaire comme suit:

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

Et puis, saisissez 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 lancez une demande. Supposons simplement que ce soit une requête 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 la vie et vous fournira une belle sémantique qui imite une action de soumission de formulaire réelle.

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

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

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

@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 prêt et lie l'événement onclick du bouton à pour soumettre le formulaire

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

voici le callback référencé dans AjaxOptions

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, cela 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");
    }
}

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

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

En PHP, vous pouvez par exemple récupérer un champ caché de votre formulaire et faire quelques changements s'il est présent.

PHP:

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

Une façon de procéder dans Jquery est d'utiliser Ajax. Vous pouvez écouter pour soumettre, retourner false pour annuler son comportement par défaut et utiliser jQuery.post () à la place. jQuery.post a un rappel de succès.

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

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

Les gestionnaires «à la soumission» 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 traditionnel non Javascript, la soumission du formulaire rechargera la page.

$("#formid").ajaxForm({ success: function(){ //to do after submit } });