Há algumas coisas que você precisa ter em mente.
1. Existem várias maneiras de enviar um formulário
- usando o botão enviar
- pressionando enter
- acionando um evento de envio em JavaScript
- possivelmente mais dependendo do dispositivo ou dispositivo futuro.
Portanto, devemos vincular ao evento de envio de formulário , não ao evento de clique no botão. Isso garantirá que nosso código funcione em todos os dispositivos e tecnologias assistivas agora e no futuro.
2. Hijax
O usuário pode não ter o JavaScript ativado. Um padrão hijax é bom aqui, onde assumimos o controle suavemente do formulário usando JavaScript, mas o deixamos submissível se o JavaScript falhar.
Devemos extrair o URL e o método do formulário, portanto, se o HTML mudar, não precisaremos atualizar o JavaScript.
3. JavaScript Discreto
Usar event.preventDefault () em vez de return false é uma boa prática, pois permite que o evento borbulhe . Isso permite que outros scripts se vinculem ao evento, por exemplo, scripts de análise que podem estar monitorando as interações do usuário.
Rapidez
Idealmente, devemos usar um script externo, em vez de inserir nosso script embutido. Podemos criar um link para isso na seção de cabeçalho da página usando uma tag de script ou um link para ele na parte inferior da página, para acelerar. O script deve melhorar silenciosamente a experiência do usuário, não atrapalhar.
Código
Supondo que você concorda com todas as opções acima, e deseja capturar o evento de envio e manipulá-lo via AJAX (um padrão de hijax), você pode fazer algo assim:
$(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...
});
});
});
Você pode acionar manualmente o envio de um formulário sempre que quiser via JavaScript usando algo como:
$(function() {
$('form.my_form').trigger('submit');
});
Editar:
Recentemente, tive que fazer isso e acabei escrevendo um plugin.
(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)
Adicione um atributo data-autosubmit à sua tag de formulário e você poderá fazer o seguinte:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});