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

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

HIT

19.01.2017

1318

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

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

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

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

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

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

Ajax форма без плагина

Ajax форма без плагина

Создаем формы без использования плагинов (например Contact Form 7). Делаем форму Ajax. Создание простой формы Добавляем скрипт обработчик (с валидацией полей) Прописываем функцию формы Данное решение взято с сайта inprocess.by Читать далее »

Contact Form 7

Contact Form 7

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы Отключить обертку в <p> и добавление <br> Читать далее »

/

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

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

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