por - validar formulario jquery ejemplo

Presentar un formulario utilizando jQuery

Question

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

Answer 1

Úsalo para enviar tu 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>

Answer 2

Del manual: submit()

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

Answer 3

En jQuery preferiría lo siguiente:

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

Pero una vez más, realmente no necesitas jQuery para realizar esa tarea, solo usa JavaScript regular:

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

Answer 4

Las soluciones hasta ahora requieren que usted conozca la identificación del formulario.

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

Answer 5

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

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

Answer 6

Podrías hacerlo así:

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

Answer 7

Podrías usarlo así:

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

O

document.formName.submit();

Answer 8

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

});

Answer 9

Si el botón está ubicado entre las etiquetas de formulario, prefiero esta versión:

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

Answer 10

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

Answer 11

También puede usar el complemento jquery form para enviar mediante ajax aswell:

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

Answer 12

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

Por lo general, lo llamarías desde dentro de 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 submit() .

Answer 13

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 se produce un error de JScript. DOM Exception: HIERARCHY_REQUEST_ERR (3)

Puntales a Tommy W @ https://.com/a/6694054/694325

Answer 14

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

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í mismo (desenvolver desde jQquery) y llamar a submit () directamente en este elemento:

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

Answer 15

Truco de IE para formas dinámicas:

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

Answer 16

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

• colgar en el envío - evento de su formulario
• evitar la funcionalidad por defecto 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 función serialize() funcione en el ejemplo anterior, todos los elementos de formulario deben tener definido su atributo de name .

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 mediante 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 de variable" en su json.

Aquí muestra la sintaxis si usa CodeIgniter:

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

Answer 17

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 algún truco para hacer que un post de datos de formulario se reforme con un método aleatorio http://www.jackart4.com/article.html

Answer 18

para información
si alguien usa

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

no use ninguno

<button name = "sumit">

Me tomó muchas horas encontrarme que submit () no funcionará así.

Answer 19

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

Un recurso crítico, uno que uso todos los días, que debe marcar es Cómo funciona jQuery . Tiene tutoriales sobre el uso de jQuery y la navegación a la izquierda le 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 solicitud ajax() para manejar errores, etc.

Answer 20

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

Ver submit() .

Answer 21

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

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

Answer 22

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

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

            **OR**

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