@@ -1,25 +1,23 @@ # Forms: event and method submit # Formulaires: l'événement et la méthode "submit"
The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript. L'événement `submit` se déclenche lorsque le formulaire est soumis, il est généralement utilisé pour valider le formulaire avant de l'envoyer au serveur ou pour abandonner la soumission et la traiter en JavaScript.
The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server. La méthode `form.submit()` permet de lancer l'envoi de formulaire depuis JavaScript. Nous pouvons l'utiliser pour créer et envoyer dynamiquement nos propres formulaires au serveur.
Let's see more details of them. Voyons-les plus en détail.
## Event: submit ## Évènement: submit
There are two main ways to submit a form: 1. Le premier - cliquer sur `<input type="submit">` ou `<input type="image">`. 2. La seconde - appuyez sur `key:Enter` dans un champ de saisie.
1. The first -- to click `<input type="submit">` or `<input type="image">`. 2. The second -- press `key:Enter` on an input field. Les deux actions mènent à l'événement `submit` sur le formulaire. Le gestionnaire peut vérifier les données, et s'il y a des erreurs, les afficher et appeler `event.preventDefault()`, alors le formulaire ne sera pas envoyé au serveur.
Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server. Dans le formulaire ci-dessous: 1. Allez dans le champ de texte et appuyez sur `key:Enter`. 2. Cliquez sur `<input type ="submit">`.
In the form below: 1. Go into the text field and press `key:Enter`. 2. Click `<input type="submit">`.
Both actions show `alert` and the form is not sent anywhere due to `return false`: Les deux actions affichent `alert` et le formulaire n'est envoyé nulle part en raison de `return false`:
```html autorun height=60 no-beautify <form onsubmit="alert('submit!');return false"> Expand All @@ -28,12 +26,12 @@ Both actions show `alert` and the form is not sent anywhere due to `return false </form> ```
````smart header="Relation between `submit` and `click`" When a form is sent using `key:Enter` on an input field, a `click` event triggers on the `<input type="submit">`. ````smart header="Relation entre `submit` et `click`" Lorsqu'un formulaire est envoyé en utilisant `key:Enter` sur un champ de saisie, un événement `click` se déclenche sur `<input type="submit">`.
That's rather funny, because there was no click at all. C'est plutôt drôle, car il n'y a pas eu de clic du tout.
Here's the demo: Voici la démo: ```html autorun height=60 <form onsubmit="return false"> <input type="text" size="30" value="Focus here and press enter"> Expand All @@ -43,13 +41,13 @@ Here's the demo:
````
## Method: submit ## Méthode: submit
To submit a form to the server manually, we can call `form.submit()`. Pour soumettre manuellement un formulaire au serveur, nous pouvons appeler `form.submit()`.
Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing. Ensuite, l'événement `submit` n'est pas généré. On suppose que si le programmeur appelle `form.submit()`, alors le script a déjà effectué tous les traitements associés.
Sometimes that's used to manually create and send a form, like this: Parfois, cela est utilisé pour créer et envoyer manuellement un formulaire, comme ceci:
```js run let form = document.createElement('form'); Expand All @@ -58,7 +56,7 @@ form.method = 'GET';
form.innerHTML = '<input name="q" value="test">';
// the form must be in the document to submit it // le formulaire doit être dans le document pour le soumettre document.body.append(form);
form.submit(); Expand Down