Méthode submit
La méthode submit nous permet de travailler avec l'événement JavaScript
submit. Elle nous permet de lier
un gestionnaire à l'événement JavaScript submit ou
de déclencher cet événement sur un élément.
Syntaxe
Nous pouvons passer à la méthode une fonction de gestionnaire, qui se déclenchera à chaque occurrence de l'événement, et à laquelle peut à son tour être transmis un objet d'événement :
.submit(fonction-gestionnaire);
Dans ce cas, la méthode fonctionnera de manière analogue à
la construction .on('submit', handler) de la méthode
on.
Nous pouvons également passer en paramètre optionnel à la méthode un objet avec des données, qui seront transmises à la fonction de gestionnaire :
.submit([données d'événement], fonction-gestionnaire);
Ou nous pouvons ne passer aucun paramètre, alors
la méthode fonctionnera de manière analogue à .trigger('submit')
de la méthode trigger :
.submit();
L'événement submit se produit sur un élément lorsque
l'utilisateur, par exemple, clique sur un bouton
'submit' d'un formulaire. Cet événement peut être
attaché uniquement aux éléments de la balise form.
L'événement submit se produit sur un élément lorsque
l'utilisateur, par exemple, clique sur un bouton
'submit' d'un formulaire. Cet événement peut être
attaché uniquement aux éléments de la balise form.
Exemple
Dans l'exemple suivant, nous avons un formulaire simple,
auquel nous attacherons un gestionnaire d'événements à l'aide de
la méthode submit, avec un champ texte et
un bouton - un input de type submit. Entrons
du texte dans le champ texte, et lors du clic sur le
bouton, vérifions ce texte. Si nous entrons
'jQuery', alors dans le span nous afficherons le texte
'Good!', à l'aide des méthodes
text et
show,
et si c'est autre chose, alors - 'Bad...' :
<p>jQuery</p>
<form action="/">
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
$('form').submit(function(event) {
event.preventDefault();
if ($('input').first().val() === 'jQuery') {
$('span').text('Good!').show();
return;
}
$('span').text('Bad...').show();
});
