[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. Po odznaczeniu pola checkbox, przycisk submit będzie wracał do stanu nieaktywnego.

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.

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

Popular

[HTML] Jak wstawić obrazek?

[PHP|HTML] Odświeżenie strony

[HTML] Jak wycentrować stronę?