Envíe un formulario usando jQuery [cerrado]

Quiero enviar un formulario usando jQuery. ¿Alguien puede proporcionar el código, una demostración o un enlace de ejemplo?

Depende de si está enviando el formulario normalmente o mediante una llamada AJAX. Puede encontrar mucha información en jquery.com , incluida documentación con ejemplos. Para enviar un formulario normalmente, consulte el submit()método en ese sitio. Para AJAX , hay muchas posibilidades diferentes, aunque probablemente desee usar los métodos ajax()o post(). Tenga en cuenta que post()es realmente una forma conveniente de llamar al ajax()método con una interfaz simplificada y limitada.

Un recurso crítico, uno que uso todos los días, que debe marcar como favorito es Cómo funciona jQuery . Tiene tutoriales sobre el uso de jQuery y la navegación de la izquierda da acceso a toda la documentación.

Ejemplos:

Normal

$('form#myForm').submit();

AJAX

$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         // ... do something with response from server
       },
       'json' // I expect a JSON response
    );
});

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   // ... do something with the data...
                 }
    });
});

Tenga en cuenta que los métodos ajax()y post()anteriores son equivalentes. Hay parámetros adicionales que puede agregar a la ajax()solicitud para manejar errores, etc.

Tendrás que usar $("#formId").submit().

Generalmente llamarías a esto desde una función.

Por ejemplo:

<input type='button' value='Submit form' onClick='submitDetailsForm()' />

<script language="javascript" type="text/javascript">
    function submitDetailsForm() {
       $("#formId").submit();
    }
</script>

Puede obtener más información sobre esto en el sitio web de Jquery .

cuando tiene un formulario existente, que ahora debería funcionar con jquery - ajax / post ahora podría:

• colgar en el envío - evento de su formulario
• evitar la funcionalidad predeterminada de enviar

• haz tus propias cosas

  $(function() {
      //hang on event of form with id=myform
      $("#myform").submit(function(e) {
  
          //prevent Default functionality
          e.preventDefault();
  
          //get the action-url of the form
          var actionurl = e.currentTarget.action;
  
          //do your own request an handle the results
          $.ajax({
                  url: actionurl,
                  type: 'post',
                  dataType: 'application/json',
                  data: $("#myform").serialize(),
                  success: function(data) {
                      ... do something with the data...
                  }
          });
  
      });
  
  });

Tenga en cuenta que, para que la serialize()función funcione en el ejemplo anterior, todos los elementos del formulario deben tener su nameatributo definido.

Ejemplo de la forma:

<form id="myform" method="post" action="http://example.com/do_recieve_request">

<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>

@PtF: los datos se envían utilizando POST en esta muestra, por lo que esto significa que puede acceder a sus datos a través de

 $_POST['dataproperty1'] 

, donde dataproperty1 es un "nombre-variable" en su json.

aquí muestra la sintaxis si usa CodeIgniter:

 $pdata = $this->input->post();
 $prop1 = $pdata['prop1'];
 $prop1 = $pdata['prop2'];

En jQuery preferiría lo siguiente:

$("#form-id").submit()

Pero, de nuevo, realmente no necesita jQuery para realizar esa tarea, solo use JavaScript normal:

document.getElementById("form-id").submit()

Del manual: jQuery Doc

$("form:first").submit();

Para información
si alguien usa

$('#formId').submit();

No hagas algo como esto

<button name = "submit">

Me llevó muchas horas encontrar que submit () no funcionaría así.

Úselo para enviar su formulario usando jquery. Aquí está el enlace http://api.jquery.com/submit/

<form id="form" method="post" action="#">
    <input type="text" id="input">
    <input type="button" id="button" value="Submit">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $( "#button" ).click(function() {
        $( "#form" ).submit();
    });
});
</script>

esto enviará un formulario con preloader:

var a=$('#yourform').serialize();
$.ajax({
    type:'post',
    url:'receiver url',
    data:a,
    beforeSend:function(){
        launchpreloader();
    },
    complete:function(){
        stopPreloader();
    },
    success:function(result){
         alert(result);
    }
});

Tengo un truco para hacer una publicación de datos de formulario reformada con un método aleatorio http://www.jackart4.com/article.html

$("form:first").submit();

Ver eventos / enviar .

Tenga en cuenta que si ya instaló un detector de eventos de envío para su formulario, la llamada interna para enviar ()

jQuery('#<form-id>').submit( function(e){ 
    e.preventDefault();
    // maybe some validation in here
    if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});

no funcionará ya que intenta instalar un nuevo detector de eventos para el evento de envío de este formulario (que falla). Por lo tanto, debe acceder al elemento HTML en sí (desenvolver de jQquery) y llamar a submit () en este elemento directamente:

    jQuery('#<form-id>').submit( function(e){ 
      e.preventDefault();
      // note the [0] array access:
      if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
    });

También puede usar el complemento de formulario jquery para enviar usando ajax también:

http://malsup.com/jquery/form/

jQuery("a[id=atag]").click( function(){

    jQuery('#form-id').submit();      

            **OR**

    jQuery(this).parents("#form-id").submit();
});

Tenga en cuenta que en Internet Explorer hay problemas con los formularios creados dinámicamente. Un formulario creado como este no se enviará en IE (9):

var form = $('<form method="post" action="/test/Delete/">' +
             '<input type="hidden" name="id" value="' + myid + '"></form>');
$(form).submit();

Para que funcione en IE, cree el elemento de formulario y adjúntelo antes de enviarlo así:

var form = document.createElement("form");
$(form).attr("action", "/test/Delete")
       .attr("method", "post");
$(form).html('<input type="hidden" name="id" value="' + myid + '" />');
document.body.appendChild(form);
$(form).submit();
document.body.removeChild(form);

Crear el formulario como en el ejemplo 1 y luego adjuntarlo no funcionará: en IE9 arroja un error JScript DOM Exception: HIERARCHY_REQUEST_ERR (3)

Atrezzo a Tommy W @ https://stackoverflow.com/a/6694054/694325

Las soluciones hasta ahora requieren que conozca la ID del formulario.

Use este código para enviar el formulario sin necesidad de conocer la ID:

function handleForm(field) {
    $(field).closest("form").submit();
}

Por ejemplo, si desea manejar el evento de clic para un botón, puede usar

$("#buttonID").click(function() {
    handleForm(this);    
});

Si el botón se encuentra entre las etiquetas de formulario, prefiero esta versión:

$('.my-button').click(function (event) {
    var $target = $( event.target );
    $target.closest("form").submit();
});

podrías usarlo así:

  $('#formId').submit();

O

document.formName.submit();

Truco de IE para formas dinámicas:

$('#someform').find('input,select,textarea').serialize();

Mi enfoque es ligeramente diferente Cambie el botón en el botón Enviar y luego haga clic

$("#submit").click(function(event) {
$(this).attr('type','submit');
$(this).click();
});

function  form_submit(form_id,filename){
    $.post(filename,$("#"+form_id).serialize(), function(data){
        alert(data);
    });
}

Publicará los datos del formulario en su nombre de archivo a través de AJAX.

Recomiendo una solución genérica para que no tenga que agregar el código para cada formulario. Use el complemento de formulario jquery (http://jquery.malsup.com/form/) y agregue este código.

$(function(){
$('form.ajax_submit').submit(function() {
    $(this).ajaxSubmit();
            //validation and other stuff
        return false; 
});

});

podrías hacerlo así:

$('#myform').bind('submit', function(){ ... });

También he usado lo siguiente para enviar un formulario (sin enviarlo realmente) a través de Ajax:

  jQuery.get("process_form.php"+$("#form_id").serialize(), {}, 
    function() {
      alert("Okay!"); 
    });