Tengo un formulario simple con control remoto=true.

Esta forma es, en realidad, en un Diálogo HTML, que se cierra tan pronto como el botón de Enviar se hace clic.

Ahora tengo que hacer algunos cambios en el HTML principal de la página después de que el formulario sea enviado correctamente.

He intentado esto con jQuery. Pero esto no garantiza que las tareas se realizan después de algún tipo de respuesta en el envío del formulario.

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

//do the task here ..

});

¿Cómo puedo adjuntar una devolución de llamada, por lo que el código se ejecuta sólo después de que el formulario se ha enviado correctamente? Hay alguna forma de agregar algunos .el éxito o el .devolución de llamada completa el formulario?

  • ¿Por qué no utilizar Ajax? Con jQuery Ajax funciones que se pueden definir las devoluciones de llamada.
  • davidbuzatto, hay algunos casos cuando no se puede utilizar ajax. Por ejemplo, cuando se desea cargar un archivo.
  • No es cierto aquí en el futuro.

7 Comentarios

  1. 114

    Yo solo hice esto –

     $("#myform").bind('ajax:complete', function() {
    
             //tasks to do 
    
    
       });

    Y las cosas funcionaron a la perfección .

    Ver esta documentación de la api para detalles más específicos.

    • Wow… acabo de aprender algo nuevo. Sí, desde el aspecto de la misma, esta es la más simple solución. Tal vez, incluso es la mejor. Yo soy un ávido Codificación de Horror lector, y en ese blog, Jeff Attwood hace hincapié en que se debe escribir menos código, y con este método se consigue que. Buen hallazgo. 🙂
    • Por favor, dime ¿cómo puede usted utilizar ajax:completa cuando la unión formulario? no podemos encontrar ninguna propiedad relativa a un formulario como «ajax:completa’.
    • Ajax:completa puede ser conectado a cualquier Ajax Evento . Cuando termina el evento , este se activa . En mi forma he utilizado «remote=true» – lo que significa que el formulario sea enviado a través de Ajax . Así que u puede adjuntar un ajax:completar el formulario de submissionhttp://api.jquery.com/ajaxComplete/
    • Y si el <form> se somete normalmente ? (No me refiero con Ajax) ¿Qué puedo poner en el primer argumento de .bind() ? EDIT : bueno, supongo que click. Nvm, lo siento. :p
    • cuidado: esto va a disparar su función después de la finalización de cualquier ajax evento, no sólo por su forma de presentación (a menos que yo estoy equivocado, en cuyo caso me encantaría para que usted proporcione un enlace de donde la has encontrado esta)
    • Esto no parece funcionar si el formulario se crea de forma dinámica, como en el siguiente: var form = $("<form>", {'action': 'somepath.html','method':'post'}).bind('ajax:complete', function() {console.log("AJAX COMPLETE");});
    • «Como de jQuery 1.8, el .ajaxComplete() método sólo debe adjuntarse al documento»
    • Dónde está ‘ajax:completa’ definido? En el jQuery docs es «ajaxComplete». api.jquery.com/Ajax_Events
    • Nunca la mente. Encontré aquí: github.com/rails/jquery-ujs/wiki/ajax
    • No funciona el formulario de mí, el uso de Forma normal, con un botón, pero el botón de llamadas de javascript $(‘#formFile’).submit();
    • También no funcionó para mí. He creado de forma dinámica y activa presentar, pero después, cuando ya tengo la respuesta de ajax, escucha con ajax:completa no se activa.
    • gracias – ¿sabes cómo puedo tener éxito el enlace a un generadas dinámicamente forma?
    • Esto no funciona para generada dinámicamente con la forma. Usted tendrá que usar algo como api.jquery.com/live o api.jquery.com/on para atender a los elementos dinámicos.
    • Si esto no funciona para usted, como en el caso de las generadas dinámicamente de forma que la solución debe ser el de obligar al oyente a que el documento en lugar como este: `$(document).bind(‘ajax:completa», «#mi-forma», function() { this.doesFoo(); });
    • tienes curiosidad de cómo esto tiene mucho upvotes, ya que no se aplican a las formas normales (se envía con un botón de enviar). La respuesta por parte de Bradley es más completa y explica cómo este podría «trabajar» (si no incluyen un éxito de devolución de llamada, lo que no tiene ningún sentido).

  2. 32

    No pude conseguir el número uno upvoted solución para que funcione de forma fiable, pero han encontrado que esto funciona. No estoy seguro si es necesario o no, pero no tengo una acción o un método de atributo en la etiqueta, que asegura que el POST es manejado por el $.función de ajax y le da 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>
    • +1. La clave de esta respuesta es la $(this).serialize() línea. Se permite el uso de jQuery.ajax() presentar el formulario existente en el fondo, a continuación, coger la respuesta desde el servidor y hacer algo con ella.
    • javascript sin punto y coma… algunas personas sólo quieren ver el mundo arder. La solución funciona, así que gracias 🙂
    • Tenga en cuenta que .serialize no incluye entradas del archivo Publicado en su solicitud. Usar el HTML5 FormData (ver esta pregunta) en lugar de a menos que se apoya a la edad de los navegadores como IE < 9
    • Accesorios para el uso de $(this).serialize(), solucionó mis problemas!
    • ¿qué es el ‘form_selector’ en el html que se hace referencia en el js?
    • es el identificador de la forma… la Misma cosa como «#myform» en la publicación original.
    • En realidad Eslint sugieren no utilizar innecesarios punto y coma, y que no se queme el mundo 🙂 @viggity. La solución funciona a la perfección para mí, gracias.
    • Que la pelusa de la regla es para extra semi-colon. No desalentar el uso de ellos, sólo dice que no uso dos cuando uno es suficiente. Yo uno de ellos de acuerdo con viggity, el no uso de ellos hará que el mundo de la quemadura, o al menos su código cuando alguien accidentalmente elimina un salto de línea.

  3. 23

    Tendrás que hacer las cosas manualmente con una llamada AJAX al servidor. Será necesario reemplazar el formulario.

    Pero no te preocupes, es un pedazo de la torta. He aquí un resumen de cómo va a ir sobre el trabajo con su forma:

    • defecto anular la acción de enviar (gracias a la aprobada en el objeto de evento, que tiene un preventDefault método)
    • agarrar todos los valores necesarios de la forma
    • disparar una solicitud HTTP
    • manejar la respuesta a la solicitud

    Primer lugar, usted tendrá que cancelar el formulario de envío de acción así:

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

    Y, a continuación, tome el valor de los datos. Vamos a suponer que usted tiene un cuadro de texto.

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

    Y luego el fuego de una solicitud. Vamos a asumir que es una petición 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 acerca de hacerlo.

    Nota 2: Para el análisis de los datos del formulario, es preferible que utilice un plugin. Te hará la vida muy fácil, así como proporcionar un buen semántica que imita una real forma de presentar la acción.

    Nota 2: Usted no tiene que usar aplaza. Es sólo una cuestión de preferencia personal. Usted también puede hacer lo siguiente, y se debe trabajar, también.

    $.post("http://somewhere.com", { val: val }, function () {
        //Start partying here.
    }, function () {
        //Handle the bad news here.
    });
    • Gran ejemplo. Cómo hacer lo mismo con la carga de archivos (multi-parte/form-data) ???
  4. 9

    Para MVC aquí era incluso más fácil.
    Usted necesidad de utilizar el Ajax formulario y establezca la AjaxOptions

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

    aquí es la presentación del código, esto es, en el documento listo sección y lazos en el evento onclick del botón para enviar el formulario

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

    aquí es el de devolución de llamada que se hace referencia en el 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 de controlador para MVC se ve como esta

    [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");
        }
    }
    • Estos códigos son .Neto de los códigos, y en la pregunta que no se especifica.
    • Que realmente no es una buena razón para votar este. La respuesta obras y podría ayudar a un .NET desarrollador que está enfrentando el mismo problema.
    • Me gusta esta idea, pero por alguna razón la devolución de llamada no está disparando. ¿El método de controlador de tener que devolver un JsonResult? Mi método de controlador en la actualidad devuelve un ActionResult.
  5. 7

    Creo que no hay una devolución de llamada de la función como la que usted describe.

    Lo que es normal aquí es hacer las alteraciones de usar algún lenguaje en el servidor, como PHP.

    En PHP usted podría, por ejemplo, la obtención de un campo oculto del formulario y hacer algunos cambios, si está presente.

    PHP:

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

    Una manera de ir sobre esto en Jquery es el uso de Ajax. Usted puede escuchar a presentar, devolver false para cancelar su comportamiento por defecto y el uso de jQuery.post() en su lugar. jQuery.post tiene un éxito de devolución de llamada.

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

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

  6. 0

    Del formulario «enviar» se llama a los controladores antes de enviar el formulario. No sé si hay un controlador de ser llamado después de que el formulario es enviado. En el tradicional sin Javascript sentido el envío del formulario volverá a cargar la página.

    • A menos que el formulario de presentación redirige a la descarga de un archivo, en el que caso de que la página se ha dejado intacto. No puedo usar JavaScript presentación debido a una petición Ajax no puede iniciar la descarga de un archivo (sin la etiqueta de anclaje de los juegos), pero también no puedo decir que el usuario espere, o limpiar una vez que tengan el archivo…
  7. -1
    $("#formid").ajaxForm({ success: function(){ //to do after submit } });
    • Es ajaxForm() un componente de terceros has instalado? No es una parte estándar de jQuery.
    • Es un plugin de hecho. malsup.com/jquery/form

Dejar respuesta

Please enter your comment!
Please enter your name here