JSFiddle - React, Tailwind, and code Playground
HTML
<form id="leFormulaire" action="/echo/html/" method="post">
<button type="submit" id="leBoutton">
Cliquez pour envoyer le formulaire
</button>
</form>
CSS
html,
body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
button {
border: 0.25em;
padding: 1em;
font-size: 1.2em;
cursor: pointer;
}
button.confirm {
background: green;
color: white;
}
JavaScript
const form = document.getElementById("leFormulaire")
const onSubmitEvent = (event) => {
event.preventDefault()
const button = document.getElementById("leBoutton")
button.classList.add("confirm")
button.textContent = "Cliquez une seconde fois pour valider"
form.removeEventListener("submit", onSubmitEvent)
}
form.addEventListener("submit", onSubmitEvent)