Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions control-form-submit-event.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,31 @@
const form = document.getElementById('form')
const input = document.getElementById('input')

// les elements du dom FORM on un event 'submit' qui ce déclanche quand on
// les elements du dom FORM ont un event 'submit' qui se déclenche quand on
// valide un formulaire
// On va donc ajouté une fonction à l'écoute de notre evenement submit
// qui sera appeler à chaques envois du formulaire
// On va donc ajouter une fonction à l'écoute de notre évènement submit
// qui sera appelé à chaque envoi du formulaire
form.addEventListener('submit', event => {
// Comme tout les `events`, notre fonction est appellé avec un argument
// Comme tous les `events`, notre fonction est appellée avec un argument
// `event` qui contient les infos de l'event

// La on à un soucis qui est que le comportement de base d'un submit de form
// fait une requete pour envoyer notre formulaire a un serveur.
// on a un souci qui est que le comportement de base d'un submit de form
// fait une requête pour envoyer notre formulaire à un serveur.

// C'est géré automatiquement sans passé par le JS sauf que la, nous
// on veux le géré nous meme et ne pas avoir de rechargement de page.
// C'est géré automatiquement sans passer par le JS sauf que , nous
// on veut le gérer nous-même et ne pas avoir de rechargement de page.

// On va appelé la methode `preventDefault` du parametre `event`
// On va appeler la méthode `preventDefault` du paramètre `event`
event.preventDefault()

// Parfois quand vous allez géré un event il faut annulé les comportements
// par défaut du navigateur pour évité d'avoir 2 actions
// qui ce déclanche en meme temps
// Parfois quand vous allez gérer un event il faut annuler les comportements
// par défaut du navigateur pour éviter d'avoir 2 actions
// qui se déclenchent en meme temps

// En suite je vais récupéré la valeur de mon input
console.log(input.value) // dispo dans la proprieté `value` des inputs
// Ensuite je vais récupérer la valeur de mon input
console.log(input.value) // dispo dans la propriété `value` des inputs

// A partir de la vous en faite ce que vous voulez ça me regarde pas.
// A partir de vous en faites ce que vous voulez ça me regarde pas.
})
</script>
</body>
Expand Down