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

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

HIT

19.01.2017

2283

Для различных задач требуется отслеживать значения форм и полей формы. У каждого поля (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]
  • Похожие записи
  • Комментарии
  • Вложения
Contact Form 7

Contact Form 7

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

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

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

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

Сбор ящиков для подписки в БД

Сбор ящиков для подписки в БД

Создадим форму для сбора email для подписки, которая будет сохранять значения в специальную таблицу в БД. Форма Скрипт по передаче данных (ajax) Стили формы Функция по отправке формы Данная функция Читать далее »

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

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6260

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

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