jQuery / Form elements

change — изменение значения элемента
submit — отправка формы

Отслеживание change позволяет обрабатывать такие события как изменение selectbox’а, или radiobutton’а, что потребуется для динамического изменения формы. И самый простой пример тому – это на странице регистрации выбор страны, затем по выбранной стране должен быть подгружен список регионов, по региону – список городов и так далее. Отслеживание submit потребуется для проверки правильности заполнения формы, а так же для отправки формы посредством AJAX.

$(‘form’).submit(function(){
$.post(
$(this).attr(‘action’), // ссылка куда отправляем данные
$(this).serialize() // данные формы
);
// отключаем действие по умолчанию
return false;
});

первый метод – serialize() – он в ответе за «сбор» данных с формы в удобном для передачи данных формате:
name=Ivan&role=Admin

Так же есть метод serializeArray() –он собранные данные представляет в виде объекта:
[{ name:”name”, value:”Ivan” }, { name:”role”, value:”Admin” }]

$(‘form’).submit(function(){
if ($(this).find(‘input[name=user]’).val() == ”) {
alert(‘Введите имя пользователя’);
return false;
}
// кусок кода с отправкой
// …
});

val() – получение значения первого элемента формы из выборки
val(value) – установка значение всем элементам формы из выборки
$(‘input[type=radio][name=choose][value=2]’).prop(‘checked’, true)
checbox: $(‘input[name=check] ‘).prop(‘checked’, true)

Проверяем «чекнутость»:
$(‘input[name=check] ‘).prop(‘checked’)
// или чуть более наглядным способом
$(‘input[name=check] ‘).is(‘:checked’)

// возьмём список заранее, поберегу чернила
var $select = $(‘form select[name=Role]’);
// добавить новый элемент в выпадающий список
$select.append(‘<option>Manager</option>’);
// выбрать необходимый элемент
$select.val(‘Value 1’);
// или по порядковому номеру, начиная с 0
$select.find(‘option:eq(2)’).prop(‘selected’, true);
// очищаем список
$select.remove(‘option’);
// преобразуем в multiple
// не забываем, что имя такого селекта, должно быть с [], т.е.
// myselect[], иначе сервер получит, лишь одно значение
$(‘select’).attr(‘size’, $(‘select option’).length )
$(‘select’).attr(‘multiple’, true)

if ($(this).find(‘input[name=user]’).val() == ”) {
$(this).find(‘input[name=user]’).before(‘<div class=”error”>Введите имя</div>’);
return false;
}

$(‘form’).submit(function(){
// чистим ошибки
$(this).find(‘.error’).remove();
// проверяем поля формы
if ($(this).find(‘input[type=name]’).val() == ”) {
$(this).find(‘input[name=user]’).before(‘<div class=”error”>Введите имя</div>’);
return false;
}
// всё хорошо – отправляем запрос на сервер
$.post( $(this).attr(‘action’), // ссылка куда отправляем данные
$(this).serialize() // данные формы
);
return false;
});
focus — фокус на элементе, для работы с данным событием так же есть «shorthand» метод focus(); может потребоваться, если надо вывести подсказку к элементу формы при наведении
blur — фокус ушёл с элемента + метод blur(), для работы с ним; пригодится при валидации формы по мере заполнения полей
select — выбор текста в textarea и input[type=text] + метод select(); если соберётесь разрабатывать свой WYSIWYG, то познакомитесь очень плотно
submit — отправка формы + метод submit(); будете использовать частенько

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: