/ Scripts & jquery / Взаимодействие форм и scripts

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

19.01.2017

996

Для различных задач требуется отслеживать значения форм и полей формы. У каждого поля (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' );
}

Поле 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();
		}		
	});
});

Продолжение следует.. Далее input.

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Вложение файла при отправке формы

Вложение файла при отправке формы

Как настроить в WordPress вложение и отправку файла с формы без использования плагинов. Форма с нужным полем для вложения и указанием обработчика: Содержимое файла process_upload.php, на который мы переходим после Читать далее »

Типовые поля форм

Типовые поля форм

Для удобства и быстроты верстки привожу основные типы полей форм, а также их некоторые особенности. Input Классный эффект для любых форм на сайте. При нажатии на форму placeholder плавно исчезает. Читать далее »

Заявка на товар

Заявка на товар

Бывает так, что нам не нужно непосредственно продавать товар через сайт, а только лишь получить на него заявку. Данный механизм прост: нам нужно создать форму обратной связи в которую будет Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Взаимодействие форм и scripts
Поле загрузчик файлов для товара
Рекомендации для васПоле загрузчик файлов для товараOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.