input type = "submit" en lugar de input type = "button" con AJAX?

Question

Tengo un formulario AJAX que estoy configurando, usando un <input type="button"> con una acción jQuery .click establecida.

El problema es que, dado que no hay <input type="submit"> en el formulario, el formulario no se envía de forma tradicional, por lo que los validadores de formularios no siempre funcionan, y al presionar el botón Intro no se hace nada.

Si agrego una entrada de envío, cuando se hace clic (o se ingresa, etc.), la página se vuelve a cargar como si no fuera un formulario AJAX.

¿Qué me falta aquí?

Answer 1

Utilice un botón enviar. El botón de envío será más compatible en términos de comportamiento predeterminado del navegador, como presionar enter. Luego, en el evento de envío, simplemente cancele el envío del formulario y ejecute su código AJAX.

<form onsubmit="return false;"> 
<!--Blah Blah Blah--> 
<input type="submit"> 
</form> 

Si estás usando jQuery, puede utilizar un método más "limpia"

$('#form_id').bind('submit',function(e) { 
    e.preventDefault(); //Will prevent the submit... 
    //Add additional code here 
}); 

Answer 2

de Rather formulario de cambio de comportamiento submit y mantener su botón <input type="submit"> así:

$("form").submit(function(e){ 
    e.preventDefault(); 
    // do ajax submition 
    $.ajax({ 
     url: "SomeURL", 
     type: "POST", 
     data: $(this).serializeArray(), 
     success: function(data, status, xhr) { 
      // do the success stuff 
     }, 
     error: function(xhr, status err) { 
      // do the error stuff 
     } 
    }); 
}); 

Advantage: Lo bueno es que esto funcionará en todos los casos cuando se pulse ENTER en cualquiera de entrada del formulario elementos o haga clic en el botón enviar. Siempre funcionará sin excepción.