validacion - validar formulario javascript antes de enviar

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

Question

Tengo una forma simple con remote = true.

Este formulario está realmente en un cuadro de diálogo HTML, que se cierra tan pronto como se presiona 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 del 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 envíe correctamente? ¿Hay alguna forma de agregar alguna devolución de llamada .success o .complete al formulario?

Answer 1

Acabo de hacer esto -

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

         // tasks to do 


   });

Y las cosas funcionaron perfectamente.

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

Answer 2

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

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

En PHP, por ejemplo, puede 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/

Answer 3

No pude lograr que la solución número uno votada hacia arriba funcione de manera confiable, pero he descubierto que esto 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 POST se maneje con la función $ .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>

Answer 4

Para MVC aquí fue un enfoque aún más fácil. Debes usar el formulario Ajax y configurar las AjaxOptions

@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, esto está en la sección de documento listo 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 referenciada 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 de controlador para MVC parece que esto

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

Answer 5

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

Pero no te preocupes, es un pedazo de pastel. A continuación, presentamos una descripción general de cómo trabajará con su formulario:

• anula la acción de envío predeterminada (gracias al objeto de evento pasado en el que tiene un método preventDefault )
• tomar todos los valores necesarios de la forma
• disparar una solicitud HTTP
• manejar la respuesta a la solicitud

Primero, deberá cancelar la acción de envío del formulario de la siguiente manera:

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

Y luego, toma el valor de los datos. Supongamos que tienes un cuadro de texto.

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

Y luego disparar 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 hacerlo.

Nota 2: para analizar los datos del formulario, es preferible que use un plugin . Hará tu 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 tiene que usar difers. Es solo una preferencia personal. También puede hacer lo siguiente, y debería funcionar también.

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

Answer 6

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