[HTML|JavaScript] Nieaktywny przycisk submit
Przy tworzeniu formularzy w HTML niekiedy zachodzi potrzeba utworzenia nieaktywnego przycisku, który będzie uaktywniał się po jakiejś akcji, np. po zaznaczeniu pola checkbox. Z pomocą przychodzi JavaScript.
Przykładowy formularz
Zaczniemy od stworzenia przykładowego formularza:
<form action="" method="post">
<p><input type="checkbox" id="checkbox" onclick="submitDisabled()" /></p>
<p><input type="submit" id="submit" value="SEND" /></p>
</form>
Każdemu z inputów musimy nadać ID. Dodatkowo do checkboksa dodajemy atrybut onclick z wywołaniem funkcji submitDisabled.
Skrypt JavaScript
Należy założyć, że przeglądarka użytkownika może mieć wyłączoną obsługę JavaScript, dlatego nie umieszczamy bezpośrednio w tagu input submit atrybutu disabled, ponieważ jeśli użytkownik faktycznie będzie miał wyłączoną obsługę JavaScript, to nie wyśle formularza.
Na początku w skrypcie ustawiamy status disabled dla przycisku submit danego formularza, aby tego dokonać wywołujemy funkcję przy użyciu metody addEventListener i zdarzenia DOMContentLoaded:
document.addEventListener("DOMContentLoaded", submitDisabled, false);
. Spowoduje to wywołanie funkcji submitDisabled po załadowaniu drzewa DOM. Sama zaś funkcja submitDisabled wygląda tak:
function submitDisabled() {
const checkbox = document.getElementById('checkbox');
const submit = document.getElementById('submit');
submit.disabled = true;
if(checkbox.checked) submit.disabled = false;
else submit.disabled = true;
}
document.addEventListener("DOMContentLoaded", submitDisabled, false);
Komentarze
Prześlij komentarz