Pase todo el formulario como datos en la función jQuery Ajax

Tengo una función jQuery ajax y me gustaría enviar un formulario completo como datos de publicación. Actualizamos constantemente el formulario, por lo que resulta tedioso actualizar constantemente las entradas del formulario que deben enviarse en la solicitud.

Hay una función que hace exactamente esto:

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);

serialize () no es una buena idea si desea enviar un formulario con el método de publicación. Por ejemplo, si desea pasar un archivo a través de ajax, no funcionará.

Supongamos que tenemos un formulario con esta identificación: "myform".

la mejor solución es hacer un FormData y enviarlo:

    var myform = document.getElementById("myform");
    var fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });

En general uso serialize()en el elemento de formulario.

Tenga en cuenta que varias opciones de <seleccionar> se serializan bajo la misma clave, p. Ej.

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

dará como resultado una cadena de consulta que incluye múltiples ocurrencias del mismo parámetro de consulta:

[path]?foo=1&foo=2&foo=3&someotherparams...

que puede no ser lo que quieres en el backend.

Utilizo este código JS para reducir múltiples parámetros a una sola tecla separada por comas (copiada descaradamente de la respuesta de un comentarista en un hilo en el lugar de John Resig):

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
}

que convierte lo anterior en:

[path]?foo=1,2,3&someotherparams...

En su código JS lo llamaría así:

var inputs = compress($("#your-form").serialize());

Espero que ayude.

Utilizar

serializar ()

var str = $("form").serialize();

Serialice un formulario a una cadena de consulta, que podría enviarse a un servidor en una solicitud de Ajax.

Una buena opción de jQuery para hacer esto es a través de FormData . ¡Este método también es adecuado al enviar archivos a través de un formulario!

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

Su función de envío en jQuery se vería así:

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

Para agregar datos a su formulario, puede usar una entrada oculta en su formulario o agregarla sobre la marcha:

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );

Solo tienes que publicar los datos. y Uso de los parámetros establecidos de la función jquery ajax. Aquí hay un ejemplo.

<script>
        $(function () {

            $('form').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    type: 'post',
                    url: 'your_complete url',
                    data: $('form').serialize(),
                    success: function (response) {
                        //$('form')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $('form')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>

Las otras soluciones no funcionaron para mí. Tal vez el viejo DOCTYPE en el proyecto en el que estoy trabajando impide las opciones HTML5.

Mi solución:

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}