Il y a quelques choses que vous devez garder à l'esprit.
1. Il existe plusieurs façons de soumettre un formulaire
- en utilisant le bouton soumettre
- en appuyant sur enter
- en déclenchant un événement de soumission en JavaScript
- éventuellement plus en fonction de l'appareil ou futur appareil.
Nous devons donc nous lier à l' événement de soumission du formulaire , et non à l'événement de clic de bouton. Cela garantira que notre code fonctionne sur tous les appareils et technologies d'assistance, maintenant et à l'avenir.
2. Hijax
L'utilisateur peut ne pas avoir activé JavaScript. Un modèle hijax est bon ici, où nous prenons doucement le contrôle du formulaire en utilisant JavaScript, mais le laissons soumis en cas d'échec de JavaScript.
Nous devons extraire l'URL et la méthode du formulaire, donc si le HTML change, nous n'avons pas besoin de mettre à jour le JavaScript.
3. JavaScript discret
L'utilisation de event.preventDefault () au lieu de renvoyer false est une bonne pratique car elle permet à l'événement de se propager. Cela permet à d'autres scripts de se lier à l'événement, par exemple des scripts d'analyse qui peuvent surveiller les interactions des utilisateurs.
La vitesse
Nous devrions idéalement utiliser un script externe, plutôt que d'insérer notre script en ligne. Nous pouvons créer un lien vers cela dans la section d'en-tête de la page en utilisant une balise de script, ou un lien vers celui-ci au bas de la page pour plus de rapidité. Le script devrait tranquillement améliorer l'expérience utilisateur, ne pas gêner.
Code
En supposant que vous êtes d'accord avec tout ce qui précède et que vous souhaitez intercepter l'événement de soumission et le gérer via AJAX (un modèle hijax), vous pouvez faire quelque chose comme ceci:
$(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...
});
});
});
Vous pouvez déclencher manuellement une soumission de formulaire à tout moment via JavaScript en utilisant quelque chose comme:
$(function() {
$('form.my_form').trigger('submit');
});
Éditer:
J'ai récemment dû le faire et j'ai fini par écrire un 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)
Ajoutez un attribut data-autosubmit à votre balise de formulaire et vous pouvez ensuite faire ceci:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});