Activer / désactiver le bouton d'entrée à l'aide de JavaScript
- Utilisez JavaScript pour activer / désactiver le bouton d’entrée
- Utilisez jQuery pour activer / désactiver le bouton d’entrée
Ce didacticiel explique comment activer / désactiver un bouton d’entrée HTML à l’aide de JavaScript / JQuery.
Nous rencontrons souvent des situations où nous voulons activer / désactiver un bouton HTML, comme avant et après l’envoi d’un formulaire. La meilleure façon de faire est d’utiliser la manipulation JavaScript DOM pour sélectionner le bouton et changer son état disabled en true / false pour basculer son état on / off. Ci-dessous, nous verrons deux façons de désactiver / activer un bouton, l’un utilisant JavaScript et l’autre utilisant JQuery.
Utilisez JavaScript pour activer / désactiver le bouton d’entrée
Vous trouverez ci-dessous la démonstration d’un bouton qui s’active lorsque du texte est saisi dans une boîte et désactivé dans le cas contraire.
Code HTML
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
Code JavaScript
let input = document.querySelector('.input');
let button = document.querySelector('.button');
button.disabled = true;
input.addEventListener('change', stateHandle);
function stateHandle() {
if (document.querySelector('.input').value === '') {
button.disabled = true;
} else {
button.disabled = false;
}
}
Ici, nous stockons d’abord la référence à l’entrée et au bouton dans deux variables, puis définissons l’état par défaut du bouton sur désactivé. Nous ajoutons un écouteur d’événements pour voir s’il y a une activité d’entrée dans la zone de texte, puis utilisons la fonction stateHandle() pour désactiver / activer le bouton d’envoi en conséquence.
Utilisez jQuery pour activer / désactiver le bouton d’entrée
<html>
<head>
<title>Enable/Disable a HTML button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="reco" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#reco').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
Nous utilisons la fonction ready() pour le rendre disponible une fois le document chargé. La méthode .on() attache alors le gestionnaire d’événements au champ de saisie. L’événement change vérifiera les changements dans le champ de saisie et exécutera la fonction en conséquence. La méthode .prop() change alors l’état du bouton.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn