Взаимодействие форм и scripts

Для различных задач требуется отслеживать значения форм и полей формы. У каждого поля (input, select, checkbox, radio) есть свои особенности, которые необходимо учитывать.

Поле select

$('#sort').change(function(){ //функция работает при изменении select

	var sortValues = $("#sort option:selected").val(); //получаем значение выбранного пункта select
	//alert( sortValues );

	if($("#sort").val()=="") { 
		если значение поля пустое (обычно исходное состояние)		
	} else {
		если значение поля заполнено		
	}

});

Сделать нужный option активным из значения

var colorscheme = $.cookie('color-scheme'); //где угодно берем значение

$('#color-scheme option[value="' + colorscheme + '"]').attr( 'selected', 'selected' );

Поле checkbox

Проверка одного чекбокса

$('#pic-monochrome').change(function(){ //функция работает при изменении checkbox

	if ($('#pic-monochrome').is(':checked')) { 
		$('body').addClass('pic-monochrome');
		$.cookie('pic-monochrome', 'true', { path: '/', expires: 7 });
	} else {
		$('body').removeClass('pic-monochrome');
		$.removeCookie('pic-monochrome', { path: '/' });
	}

});

Несколько чекбоксов

$('.metka').change(function(){ //функция работает при изменении checkbox

	//собираем выбранные значения тэгов(меток) в массив, значения через запятую
	var arrList = $('.metka:checkbox:checked').map(function(){
		return $(this).attr('value');
	}).get();

	var arrListstroke = arrList.join(' '); // преобразовываем массив в строку с разделителем ' '

	if(arrList == 0) { 		
		если чекбокс(ы) не включен(ы)	
	} else {
		если чекбокс(ы) включен(ы)
	}

});

Включение чекбокса, если передано его значение, например из Cookies

var picmonochrome = $.cookie('pic-monochrome');
	
if(picmonochrome == null){
} else {
	$('body').addClass('pic-monochrome');
	$('#pic-monochrome').attr( 'checked', 'checked' );
}

Обязательное включение хотя бы одного чекбокса

<div id="brand_point_block" class="required">
<label><input type="checkbox" name="brand_point[]" value="total" >TOTAL</label>
<label><input type="checkbox" name="brand_point[]" value="cepsa" >CEPSA</label>
<label><input type="checkbox" name="brand_point[]" value="mobil" >MOBIL</label>
<label><input type="checkbox" name="brand_point[]" value="fuchs" >FUCHS</label>
</div>

Скрипт:

/* Обязательность заполнения поля Бренд точки */

jQuery('#post').on('submit', function () {
	
	if (jQuery("#brand_point_block").hasClass("required")) {
		
		var count_brands = jQuery("#brand_point_block.required input:checked").length;
	
		if ( count_brands < 1 ) {
			alert ('Заполните поле Бренд точки');
			return false;
		}

	}

});

При этом обязательность группе чекбоксов дает класс required, если его убрать, пустые поля проигнорируются.

Поле radio

Нам например нужно что-то скрыть в зависимости от выбранного пункта. В случае если необходимый нам пункт единственный:

jQuery(document).ready(function() {
	
	$('.spec').hide(); 
	
	$('input:radio[name="education"]').on('change', function () {
		if (this.checked && this.value == 'Да') { $('.spec').show(); } 
		else { $('.spec').hide(); }
	});
	
});

Если необходимых пунктов несколько:

jQuery(document).ready(function() {
	$('.spec').hide(); 
	
	$('input:radio[name="education"]').on('change', function () {
		if (this.value == 'среднее профессиональное' || this.value == 'незаконченное высшее' || this.value == 'полное высшее') {
			$('.spec').show();
		} else {
			$('.spec').hide();
		}		
	});
});

Поле Hidden

Изменение полей type=»hidden» не дают триггеров событий .keyup и .change. Чтобы получить событие при изменении таких полей, нужно дополнительно прописывать скрипт.

[site-socialshare]