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

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

HIT

19.01.2017

2260

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

Форма подписки без плагина

Создаем простую форму подписки без какого-либо плагина. Далее возможны различные варианты применения этого функционала. Создание формы подписки // Функция формы подписки if(!function_exists('kv_email_subscription_fn')) { add_action('kv_email_subscription' , 'kv_email_subscription_fn' ); function kv_email_subscription_fn() { Читать далее »

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

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

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

Contact Form 7

Contact Form 7

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

/

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

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
Пользовательское письмо Woocommerce
Рекомендации для васПользовательское письмо WoocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.