javascript - form - serialize jquery ajax

jQuery AJAX enviar formulario

Question

Tengo un formulario con el nombre orderproductForm y un número indefinido de entradas.

Quiero hacer algún tipo de jQuery.get o ajax o algo por el estilo que llame a una página a través de Ajax, y enviar todas las entradas del formulario orderproductForm .

Supongo que una forma sería hacer algo como

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

Sin embargo, no sé exactamente todas las entradas de formulario. ¿Hay alguna característica, función o algo que simplemente envíe TODAS las entradas del formulario?

Answer 1

Versión simple (no envía imágenes)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

Copie y pegue la ajaxification de un formulario o todos los formularios en una página

Es una versión modificada de respuesta de

• Funcionará con jQuery> = 1.3.2
• Puede ejecutar esto antes de que el documento esté listo
• Puede eliminar y volver a agregar el formulario y seguirá funcionando
• Se publicará en la misma ubicación que el formulario normal, especificado en el atributo "acción" del formulario.

JavaScript

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form''s elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

Quería editar la respuesta de Alfrekjv pero me desvié demasiado de ella, así que decidí publicar esto como una respuesta separada.

No envía archivos, no admite botones, por ejemplo, al hacer clic en un botón (incluido un botón de envío) se envía su valor como datos de formulario, pero como se trata de una solicitud de ajax, no se enviará el clic de botón.

Para admitir botones, puede capturar el botón real haciendo clic en lugar de enviar.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest(''form''), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr(''name'')){
            formdata += (formdata!=='''')? ''&'':'''';
            formdata += self.attr(''name'') + ''='' + ((self.is(''button''))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

En el lado del servidor, puede detectar una solicitud ajax con este encabezado que jquery establece HTTP_X_REQUESTED_WITH para php

PHP

if(!empty($_SERVER[''HTTP_X_REQUESTED_WITH'']) && strtolower($_SERVER[''HTTP_X_REQUESTED_WITH'']) == ''xmlhttprequest'') {
    //is ajax
}

Answer 2

Esta es una referencia simple:

// this is the id of the form
$("#idForm").submit(function(e) {


    var form = $(this);
    var url = form.attr(''action'');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form''s elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

Espero que te ayude.

Answer 3

Este código funciona incluso con la entrada de archivos

$(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        
});

Answer 4

Hay algunas cosas que debes tener en cuenta.

1. Hay varias formas de enviar un formulario.

• usando el botón de enviar
• presionando enter
• activando un evento de envío en JavaScript
• Posiblemente más dependiendo del dispositivo o futuro dispositivo.

Por lo tanto, debemos vincularnos al evento de envío de formulario , no al evento de clic de botón. Esto asegurará que nuestro código funcione en todos los dispositivos y tecnologías de asistencia ahora y en el futuro.

2. Hijax

El usuario puede no tener habilitado JavaScript. Un patrón de hijax es bueno aquí, donde tomamos suavemente el control del formulario usando JavaScript, pero lo dejamos sometible si JavaScript falla.

Deberíamos extraer la URL y el método del formulario, de modo que si el HTML cambia, no necesitamos actualizar el JavaScript.

3. JavaScript no intrusivo

Usar event.preventDefault () en lugar de devolver falso es una buena práctica, ya que permite que el evento crezca. Esto permite que otros scripts se vinculen con el evento, por ejemplo, scripts de análisis que pueden estar monitoreando las interacciones del usuario.

Velocidad

Lo ideal sería utilizar un script externo, en lugar de insertar nuestro script en línea. Podemos vincularnos a esto en la sección de encabezado de la página usando una etiqueta de script, o vincularlo en la parte inferior de la página para obtener velocidad. El script debe mejorar silenciosamente la experiencia del usuario, no interponerse en el camino.

Código

Suponiendo que está de acuerdo con todo lo anterior, y desea capturar el evento de envío, y manejarlo mediante AJAX (un patrón de hijax), podría hacer algo como esto:

$(function() {
  $(''form.my_form'').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr(''method''),
      url: form.attr(''action''),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

Puede activar manualmente un envío de formulario cuando lo desee a través de JavaScript usando algo como:

$(function() {
  $(''form.my_form'').trigger(''submit'');
});

Editar:

Hace poco tuve que hacer esto y terminé escribiendo un plugin.

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr(''method''),
        url: form.attr(''action''),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

Agregue un atributo de auto-envío de datos a su etiqueta de formulario y luego puede hacer esto:

HTML

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

JS

$(function() {
  $(''form[data-autosubmit]'').autosubmit();
});

Answer 5

Me gustó mucho esta respuesta de y, especialmente, la forma en que la envolvió es la solución en un complemento jQuery . Así que gracias a por una respuesta muy útil. En mi caso, sin embargo, quería un complemento que me permitiera definir los controladores de eventos de éxito y error mediante opciones cuando se inicializa el complemento.

Así que aquí es lo que se me ocurrió:

;(function(defaults, $, undefined) {
    var getSubmitHandler = function(onsubmit, success, error) {
        return function(event) {
            if (typeof onsubmit === ''function'') {
                onsubmit.call(this, event);
            }
            var form = $(this);
            $.ajax({
                type: form.attr(''method''),
                url: form.attr(''action''),
                data: form.serialize()
            }).done(function() {
                if (typeof success === ''function'') {
                    success.apply(this, arguments);
                }
            }).fail(function() {
                if (typeof error === ''function'') {
                    error.apply(this, arguments);
                }
            });
            event.preventDefault();
        };
    };
    $.fn.extend({
        // Usage:
        // jQuery(selector).ajaxForm({ 
        //                              onsubmit:function() {},
        //                              success:function() {}, 
        //                              error: function() {} 
        //                           });
        ajaxForm : function(options) {
            options = $.extend({}, defaults, options);
            return $(this).each(function() {
                $(this).submit(getSubmitHandler(options[''onsubmit''], options[''success''], options[''error'']));
            });
        }
    });
})({}, jQuery);

Este complemento me permite "ajaxificar" fácilmente formularios html en la página y proporcionar controladores de eventos de envío , éxito y error para implementar comentarios al usuario sobre el estado del formulario enviado. Esto permitió que el plugin se usara de la siguiente manera:

 $(''form'').ajaxForm({
      onsubmit: function(event) {
          // User submitted the form
      },
      success: function(data, textStatus, jqXHR) {
          // The form was successfully submitted
      },
      error: function(jqXHR, textStatus, errorThrown) {
          // The submit action failed
      }
 });

Tenga en cuenta que los controladores de eventos de éxito y error reciben los mismos argumentos que recibiría de los eventos correspondientes del método ajax jQuery .

Answer 6

Otra solución similar utilizando atributos definidos en el elemento de formulario:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $(''#contactForm1'');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr(''method''),
            url: frm.attr(''action''),
            data: frm.serialize(),
            success: function (data) {
                console.log(''Submission was successful.'');
                console.log(data);
            },
            error: function (data) {
                console.log(''An error occurred.'');
                console.log(data);
            },
        });
    });
</script>

Answer 7

Para evitar múltiples envíos de formdata:

No se olvide de desvincular el evento de envío, antes de que se vuelva a enviar el formulario, el usuario puede llamar a la función sumbit más de una vez, quizás olvidó algo o fue un error de validación.

 $("#idForm").unbind().submit( function(e) {
  ....

Answer 8

Puede usar esto en la función de envío como se muestra abajo.

Formulario HTML

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

Función jQuery:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = ''name=''+ name + ''&message='' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

Para más detalles y muestra visite: http://www.spiderscode.com/simple-ajax-contact-form/

Answer 9

Puede usar las funciones ajaxForm / ajaxSubmit de Ajax Form Plugin o la función de serialización jQuery.

AjaxForm :

$("#theForm").ajaxForm({url: ''server.php'', type: ''post''})

o

$("#theForm").ajaxSubmit({url: ''server.php'', type: ''post''})

ajaxForm enviará cuando se presione el botón de envío. ajaxSubmit envía inmediatamente.

Serializar :

$.get(''server.php?'' + $(''#theForm'').serialize())

$.post(''server.php'', $(''#theForm'').serialize())

La documentación de serialización AJAX está aquí .

Answer 10

Si está utilizando el formulario .serialize (), debe asignar a cada elemento de formulario un nombre como este:

<input id="firstName" name="firstName" ...

Y el formulario se serializa así:

firstName=Chris&lastName=Halcrow ...

Answer 11

También está el evento submit, que se puede activar como este $ ("# form_id"). Submit (). Usaría este método si el formulario ya está bien representado en HTML. Acabas de leer en la página, rellenar las entradas del formulario con cosas y luego llamar a .submit (). Utilizará el método y la acción definidos en la declaración del formulario, por lo que no necesita copiarlo en su javascript.

examples

Answer 12

También puede usar FormData (pero no está disponible en IE):

var formData = new FormData(document.getElementsByName(''yourForm'')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

Así es como usas FormData .

Answer 13

Tengo lo siguiente para mí:

formSubmit(''#login-form'', ''/api/user/login'', ''/members/'');

dónde

function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

Esto supone que la publicación en ''url'' devuelve un ajax en la forma de {success: false, error:''my Error to display''}

Puedes variar esto como quieras. Siéntete libre de usar ese fragmento.

Answer 14

considera usar el closest

$(''table+table form'').closest(''tr'').filter('':not(:last-child)'').submit(function (ev, frm) {
        frm = $(ev.target).closest(''form'');
        $.ajax({
            type: frm.attr(''method''),
            url: frm.attr(''action''),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

Answer 15

jQuery AJAX enviar formulario , no es más que enviar un formulario con ID de formulario cuando hace clic en un botón

Por favor siga los pasos

Paso 1: la etiqueta del formulario debe tener un campo de ID

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

Botón en el que vas a hacer clic.

<button>Save</button>

Paso 2: enviar el evento está en jQuery, lo que ayuda a enviar un formulario. En el siguiente código estamos preparando una solicitud JSON a partir del nombre del elemento HTML.

$("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:''json'',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

para la demostración en vivo haga clic en el siguiente enlace

¿Cómo enviar un formulario utilizando jQuery AJAX?