¿Cómo hacer una devolución de llamada de Jquery después de enviar el formulario?

Tengo una forma simple con remote = true.

Este formulario está en realidad en un cuadro de diálogo HTML, que se cierra tan pronto como se hace clic en el botón Enviar.

Ahora necesito hacer algunos cambios en la página HTML principal después de que el formulario se envíe correctamente.

Intenté esto usando jQuery. Pero esto no garantiza que las tareas se realicen después de alguna forma de respuesta al envío del formulario.

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

// do the task here ..

});

¿Cómo adjunto una devolución de llamada para que mi código se ejecute solo después de que el formulario se haya enviado correctamente? ¿Hay alguna forma de agregar alguna devolución de llamada .success o .complete al formulario?

Acabo de hacer esto

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

         // tasks to do 


   });

Y las cosas funcionaron perfectamente.

Consulte esta documentación de la API para obtener detalles más específicos.

No pude hacer que la solución número uno con voto positivo funcionara de manera confiable, pero descubrí que funciona. No estoy seguro de si es necesario o no, pero no tengo un atributo de acción o método en la etiqueta, lo que garantiza que la función $ .ajax maneje el POST y le brinda la opción de devolución de llamada.

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

Tendrá que hacer las cosas manualmente con una llamada AJAX al servidor. Esto requerirá que también anule el formulario.

Pero no te preocupes, es pan comido. Aquí hay una descripción general de cómo trabajará con su formulario:

• anular la acción de envío predeterminada (gracias al objeto de evento pasado, que tiene un preventDefaultmétodo)
• tomar todos los valores necesarios del formulario
• disparar una solicitud HTTP
• manejar la respuesta a la solicitud

Primero, tendrá que cancelar la acción de envío del formulario así:

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

Y luego, tome el valor de los datos. Supongamos que tiene un cuadro de texto.

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

Y luego dispara una solicitud. Supongamos que es una solicitud 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.
    });
});

Y esto debería ser suficiente.

Nota 2: para analizar los datos del formulario, es preferible que utilice un complemento . Hará su vida realmente fácil, además de proporcionar una buena semántica que imita una acción de envío de formulario real.

Nota 2: no es necesario utilizar diferidos. Es solo una preferencia personal. También puede hacer lo siguiente, y también debería funcionar.

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

Para MVC, este era un enfoque aún más fácil. Necesita usar el formulario Ajax y configurar las opciones Ajax

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

aquí está el código de envío, se encuentra en la sección de preparación del documento y vincula el evento onclick del botón para enviar el formulario

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

aquí está la devolución de llamada a la que se hace referencia en AjaxOptions

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

en el método del controlador para MVC se ve así

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

No creo que haya una función de devolución de llamada como la que describe.

Lo normal aquí es hacer las alteraciones usando algún lenguaje del lado del servidor, como PHP.

En PHP, por ejemplo, podría buscar un campo oculto de su formulario y hacer algunos cambios si está presente.

PHP:

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

Una forma de hacerlo en Jquery es usar Ajax. Puede escuchar enviar, devolver falso para cancelar su comportamiento predeterminado y usar jQuery.post () en su lugar. jQuery.post tiene una devolución de llamada exitosa.

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

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

Los controladores "al enviar" del formulario se llaman antes de enviar el formulario. No sé si hay un controlador al que llamar después de enviar el formulario. En el sentido tradicional que no es Javascript, el envío del formulario recargará la página.

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