[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);