input prop, change, blur – czyli użyteczny formularz

Modyfikowanie formularza pod względem designu opisywałem już wcześniej, we wpisie: Tuning pól typu input i textarea. Ten wpis z kolei będzie pokazywał jak można za pomocą kilku funkcji ( prop, change, blur) usprawnić nasz formularz.

Input type=”radio”

Jako pierwsze pokarze bardzo przydatną funkcję dotyczącą pola typu radio.
Poniżej zamieszczę dwa identyczne listy formularza. Jednak różnica w działaniu będzie widoczna.

Oraz drugi formularz:

Wyglądają identycznie jednak działanie już jest całkiem inne. W pierwszym formularzu aby wybrać pole trzeba ustawić się dokładnie na polu checkbox. W drugim formularzu, aby wybrać pole możemy kliknąć w dowolne miejsce w znaczniki listy li. A więc bardzo duży komfort dla użytkownika.
Aby nasz formularz tak zadziałał trzeba w javascript dopisać taką funkcję:

$('ul li').click(function() {
	$(this).find('input').prop('checked', true);
});

A więc po kliknieciu na znacznik li funkcja szuka sobie pola input i poprzez event prop zaznacza pole.

Select > option

Kolejnym elementem do modyfikacje jest lista rozwijalna. Posłużę się w tym przypadku jednym przykładem:


Po wybraniu pozycji z listy, wartość ta automatycznie wpisuje się w następne pole tekstowe. Jest to wariant bardzo często wykorzystywany podczas logowania użytkownika.
Widzimy również, że pokazało się kolejne pole do wpisania hasła. Po wprowadzeniu min. 3 znaków i przełączeniu się z tego pola pokazuje się przycisk zapisu. Bardzo proste ale przede wszystkim bardzo użyteczne.
Pierwsza operacja, a więc za wybranie pozycji z listy i wprowadzenie jej do pola odpowiada funkcja change oraz val. W kroku tym również pojawia się kolejne pole input do wprowadzenia hasła.

$('#ewd_select-tr').change(function()
{
	var selectVal = jQuery('#ewd_select-tr :selected').val();
	$('.optexe-pass').show();
});

Wprowadzając min. 3 literowe hasło i wyjście z tego elementu powoduje pojawienie się przycisku do zapisu. To działanie z koleji możliwe jest dzięki zastosowaniu akcji blur.

$('.optexe-pass').blur(function() {
		if ($(this).val().length > 3)
		{
			$('.submit').show();
		} else {
				$('.submit').hide();
			}
	});

Input type=”checkbox”

Ostatnim przykładem jest lista z polami typu checkbox

Wybrałeś:
Moim przykładem jest zliczanie wybranych elementów do kolejnego pola tekstowego. W tego typu pól wykorzystuje się działanie eventu change.

	$('.ewd_check-tr').change(function() {
		var totalcheck = $('.ewd_check-tr input:checkbox:checked').length;
		
		$('.totalcheck').val(totalcheck);
	});

Funkcja ta po zaznaczeniu elementu zlicza tą wartość i wyświetla w pol z klasą totalcheck. Można dodatkowo wprowadzić limit zaznaczonych pól poprzez funkcję:

$('input').prop('checked', false);

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code