Formulario de envío de jQuery AJAX

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

Quiero hacer algún tipo de jQuery.get o ajax o algo así que llame a una página a través de Ajax y envíe 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 conozco exactamente todas las entradas del formulario. ¿Existe una característica, función o algo que simplemente enviaría TODAS las entradas del formulario?

preguntado el 24 de diciembre de 09 a las 22:12

20 Respuestas

Puede usar las funciones ajaxForm / ajaxSubmit desde Complemento de formulario Ajax o la función de serialización de jQuery.

Formulario Ajax:

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

or

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

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

Publicar por fascículos:

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

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

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

respondido 18 mar '17, 13:03

idea interesante, sin embargo, no controlo el lado del servidor al que estoy llamando, por lo tanto, no puedo enviar datos serializados - nathan h

Sí, puede, el nombre no es importante, lo que hará es enviar pares de cada clave de formulario y cada variable de formulario. - usuario14038

Se serializa en una cadena de consulta, al igual que los datos que está colocando en la matriz manualmente en la llamada GET que habría. Esto es lo que quieres, estoy bastante seguro. - agua

oooh ya veo, luego agrego esta cadena al final de la URL en la llamada get. Estaba pensando en serializar PHP. Lo siento. ¡Gracias! - nathan h

.ajaxSubmit()/.ajaxForm() no son funciones básicas de jQuery, necesita el Complemento de formulario jQuery - Yarin

Esta es una referencia simple:

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

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

    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.
           }
         });

    
});

Respondido 11 Jul 20, 22:07

Pero form.serialize () no puede publicar en IE - macio.jun

¡Excelente respuesta para el envío normal de formularios! - El Sheek Geek

Similar a @ BjørnBørresen, también puede usar type: $(this).attr('method') si usas el method atributo en su formulario. - djule5

Vale la pena mencionar que desde jQuery 1.8, .success, .error y .complete están en desuso en favor de .done, .fail y .always. - Adam

Comentario de @ JohnKary: gran artículo, aunque parece que ya no está disponible. Aquí hay un archivo de Eventos de jQuery: Detener (incorrectamente) usando Return False - KyleMit

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

<form id="contactForm1" action="/es/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>

contestado el 20 de mayo de 17 a las 18:05

¿Alguna sugerencia sobre cómo hacer esto si el atributo de nombre incluye un "."? (Requisito del lado del servidor, no es mi idea). - Josef Engelfrost

Incluya una devolución de llamada de error a esto para completarlo. Uno nunca sabe cuándo obtendrá un error, siempre debe tenerlo en cuenta. - codificación de Aaron

Si no establece el método o la acción, de forma predeterminada get y la URL actual respectivamente. Le vendría bien agregar esta suposición al código. - rybo111

Según la documentación de jQuery (api.jquery.com/enviar), frm.submit (función (evento) {..}); es equivalente a frm.on ("enviar", función (evento) {..}) ;. Para mí, este último es más legible, ya que es obvio que está adjuntando un controlador de eventos a un elemento que se ejecutará cuando se active el evento. - mehmet

@ rybo111 - En la consola puedo ver que los datos se serializan, pero no se publican. Puede el url ser el problema? Mi declaración de formulario es la siguiente: <form action="" method="POST" id="my_form"> - user12379095

Hay algunas cosas que debe 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 dispositivo futuro.

Por lo tanto, debemos unirnos a la formulario enviar evento, no el evento de clic de botón. Esto garantizará que nuestro código funcione en todos los dispositivos y tecnologías de asistencia ahora y en el futuro.

2. hijax

Es posible que el usuario no tenga habilitado JavaScript. A hijax El patrón es bueno aquí, donde tomamos suavemente el control del formulario usando JavaScript, pero lo dejamos para enviar si JavaScript falla.

Debemos extraer la URL y el método del formulario, por lo que si el HTML cambia, no necesitamos actualizar el JavaScript.

3. JavaScript discreto

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

velocidad

Idealmente, deberíamos usar un script externo, en lugar de insertar nuestro script en línea. Podemos enlazar a esto en la sección de cabecera de la página usando una etiqueta de secuencia de comandos, o enlazarlo en la parte inferior de la página para mayor velocidad. El script debería mejorar silenciosamente la experiencia del usuario, no interferir.

Código

Suponiendo que está de acuerdo con todo lo anterior y desea capturar el evento de envío y manejarlo a través de 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 el envío de un formulario cuando lo desee a través de JavaScript usando algo como:

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

Edit:

Recientemente tuve que hacer esto y terminé escribiendo un complemento.

(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 envío automático de datos a su etiqueta de formulario y luego puede hacer esto:

HTML

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

JS

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

Respondido el 14 de diciembre de 15 a las 11:12

¿Cómo puedo agregar las devoluciones de llamada a las funciones 'hecho' y 'fallar'? algo como $ ('form [data-autosubmit]'). autosubmit (). done (function ({...}); ¿Esto es posible? - Cruzado

Hola @Crusader: ciertamente, en lugar de que este complemento devuelva esto, puede hacer que devuelva el evento ajax, luego podría encadenarlo directamente. Alternativamente, puede hacer que el complemento reciba una devolución de llamada exitosa. - superluminario

No veo cómo sucede esto ".. dejarlo sometible si JavaScript falla" aquí? - mehmet

@mmatt: si JavaScript está deshabilitado, el formulario sigue siendo solo un formulario. El usuario hace clic en enviar y se produce un envío de formulario basado en el navegador. A esto lo llamamos mejora progresiva. Hoy en día no es tan importante, ya que los lectores de pantalla modernos admiten JavaScript. - superluminario

@mmatt: las devoluciones de llamada de promesa recibirán opcionalmente un parámetro que contiene los datos. - superluminario

También puedes usar Formulario de datos (Pero no 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 Formulario de datos.

respondido 27 mar '18, 09:03

Veo que FormData ahora es compatible con IE10. En unos años esta será la solución preferida. - superluminario

¿Qué ventaja tiene esta forma? - insignia

La ventaja de @insign es que no se requiere ningún complemento y funciona en muchos navegadores modernos. - KhoPhi

@insign FormData también puede manejar archivos (si hay uno de esos campos en su formulario) mientras que serialize () simplemente lo ignora. - mehmet

Error de tipo no detectado: no se pudo construir 'FormData': el parámetro 1 no es del tipo 'HTMLFormElement' - rahim.nagori

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

<form action="/es/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 ajaxificación de un formulario o todos los formularios en una página

Es una versión modificada de Alfrekjv's https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be

  • 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, hacer clic en un botón (incluido un botón de envío) envía su valor como datos de formulario, pero debido a que se trata de una solicitud ajax, el clic del botón no se enviará.

Para admitir botones, puede capturar el clic real del botón en lugar del envío.

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 puedes detectar una solicitud ajax con este encabezado que establece jquery HTTP_X_REQUESTED_WITH para php

PHP

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

contestado el 23 de mayo de 17 a las 13:05

¿Cómo funcionaría esto si quisiera enviar un archivo con este formulario? - yami medina

@YamiMedina esa no es una solución simple, necesita enviar la solicitud completa en un formato diferente (formato de varias partes) con los datos del archivo - Timo Huovinen

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


        }
    });        
});

Respondido 07 Feb 15, 19:02

Solo para tener en cuenta que formData () es IE10 + developer.mozilla.org/en-US/docs/Web/API/FormData - chris hopkins

el tipo de datos: 'json' es importante si desea utilizar form.serialize () - david mañana

¡Guau, este FormData es maravilloso! en caso de que alguien necesite: Array.from(new FormData(form)) itera sobre este iterador de datos de formulario :) - test30

realmente me gustó esta respuesta by superluminario y especialmente la forma en que envolvió es una solución en un jQuery enchufar. Asi que gracias a superluminario para una respuesta muy útil. En mi caso, sin embargo, quería un complemento que me permitiera definir el éxito y error manejadores de eventos por medio de opciones cuando se inicializa el complemento.

Así que esto 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" formularios html en la página y proporcionar onsubmit, éxito y error controladores de eventos para implementar comentarios al usuario sobre el estado del envío del formulario. Esto permitió que el complemento 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 éxito y error Los controladores de eventos reciben los mismos argumentos que recibirías de los eventos correspondientes del jQuery ajax método.

contestado el 23 de mayo de 17 a las 13:05

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 forma de {success: false, error:'my Error to display'}

Puede variar esto como desee. Siéntase libre de usar ese fragmento.

Respondido el 21 de enero de 14 a las 20:01

Qué es target ¿por aquí? ¿Por qué enviaría un formulario con AJAX, solo para redirigirlo a una nueva página? - 1252748

Formulario de envío de jQuery AJAX, no es más que enviar un formulario utilizando la identificación del formulario cuando hace clic en un botón

Siga los pasos

Paso 1: la etiqueta del formulario debe tener un campo de identificación

<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 la solicitud JSON del elemento HTML nombre .

$("#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 enlace de abajo

¿Cómo enviar un formulario usando jQuery AJAX?

Respondido el 11 de enero de 18 a las 08:01

Sé que esto es un jQuery pregunta relacionada, pero ahora con JS ES6 las cosas son mucho más fáciles. Ya que no hay puro javascript respuesta, pensé que podría agregar un simple puro javascript solución a esto, que en mi opinión es mucho más limpia, utilizando el fetch() API. Esta es una forma moderna de implementar solicitudes de red. En su caso, dado que ya tiene un elemento de formulario, simplemente podemos usarlo para construir nuestra solicitud.

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

Respondido 16 Oct 19, 20:10

Considere usar 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();
    });

Respondido 26 Oct 16, 11:10

Para evitar múltiples envíos de formdata:

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

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

respondido 13 nov., 14:18

Si estás usando formulario.serialize (): debe darle a cada elemento del formulario un nombre como este:

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

Y el formulario se serializa así:

firstName=Chris&lastName=Halcrow ...

Respondido 27 Abr '16, 00:04

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

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 obtener más detalles y una visita de muestra: http://www.spiderscode.com/simple-ajax-contact-form/

Respondido el 21 de diciembre de 16 a las 09:12

Trata

fetch(form.action,{method:'post', body: new FormData(form)});

function send(e,form) {
  fetch(form.action,{method:'post', body: new FormData(form)});

  console.log('We submit form asynchronously (AJAX)');
  e.preventDefault();
}
<form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm">
    <input hidden name="csrfToken" value="$0meh@$h">
    <input name="email" value="aa@bb.com">
    <input name="phone" value="123-456-666">
    <input type="submit">    
</form>

Look on Chrome Console > Network after/before 'submit'

Respondido el 29 de enero de 20 a las 14:01

Esta no es la respuesta a la pregunta de OP,
pero en caso de que no pueda usar el formulario DOM estático, también puede intentar así.

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

Respondido 30 Abr '19, 04:04

Me sorprende que nadie mencione data como un objeto. Para mí, es la forma más limpia y sencilla de pasar datos:

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo-value',
            'bar': $('#bar').val()
        }
    }).always(function (response) {
        console.log(response);
    });

    return false;
});

Luego, en el backend:

// Example in PHP
$_POST['foo'] // some-foo-value
$_POST['bar'] // value in #bar

Respondido el 17 de junio de 20 a las 22:06

OP dijo que no conoce los nombres de los campos / indeterminado, por lo que no se pueden usar datos en este caso porque no se conocen los nombres de los campos. - SupaMonkey

JavaScript

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

HTML

    <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

respondido 26 nov., 19:13

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

ejemplos

Respondido el 04 de junio de 13 a las 18:06

si borra su publicación, obtendrá los puntos de penalización que le han quitado. - Araña chispeante

Esto enviará el formulario, pero no a través de AJAX, por lo que no responde la pregunta. - superluminario

lo que dijo @spider, además de obtener una bonita insignia llamada "presión de grupo" - nurettin

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.