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

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

19.01.2017

730

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

Поле select

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

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

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

});

Поле checkbox

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

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

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

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

});

Поле 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.

Тэги:

Поделится информацией с друзьями

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

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

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

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

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

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

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

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

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

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

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

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