[HTML|JavaScript] Nieaktywny przycisk submit

Przy tworzeniu formularzy w HTML, zachodzi niekiedy potrzeba utworzenia nieaktywnego przycisku, który będzie uaktywniał się po jakiejś akcji, np. po zaznaczeniu pola checkbox. Z pomocą przychodzi wtedy JavaScript.

JavaScript pozwala na dynamiczne modyfikowanie pól formularzy. Zobacz poniższe przykłady, aby dowiedzieć się więcej.

Przykład 1

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.

W poniższym przykładzie input submit będzie uaktywniał się po zaznaczeniu checkboksa. 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. Jeśli użytkownik faktycznie będzie miał wyłączoną obsługę JS, to nie wyśle formularza, chyba że o to nam chodzi.

Na początku w funkcji 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);

Przykład 2

W tym przykładzie przycisk submit będzie aktywował się po wpisaniu minimum 3 znaków w polu input text o ID "test":

Tworzymy nowy formularz z polem input text:

<form action="" method="post">
	<p><input type="text" id="test" onclick="submitDisabled()" /></p>
	<p><input type="submit" id="submit" value="SEND" /></p>
</form>

I modyfikujemy nieco funkcję submitDisabled:

function submitDisabled() {

	const inputText = document.getElementById('test');
	const submit = document.getElementById('submit');
	
	submit.disabled = true;
	
	if(inputText.value.length >= 3) submit.disabled = false;
	
	else submit.disabled = true;
    	
        inputText.addEventListener("keyup", submitDisabled, false);
    
    }

document.addEventListener("DOMContentLoaded", submitDisabled, false);

Tym razem w funkcji zamiast pola checkbox, pobieramy input text. Następnie w warunku sprawdzamy czy ilość wpisanych znaków >= 3 i jeśli tak, uaktywniamy pole input submit.