Обработка форм

174

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

jQuery предоставляет ряд методов, предназначенных для обработки событий, связанных с формой. Сейчас имеет смысл освежить ваши знания в этой области, поскольку формы являются предметом нашего рассмотрения. Интересующие нас методы и события, которые им соответствуют, описывались в статье «Использование прямых методов событий», далее мы более подробно рассмотрим эти события.

Реагирование на изменение фокуса формы

Методы blur() и focus() позволяют реагировать на изменения состояния фокуса формы. Обычно эта возможность используется для того, чтобы помочь пользователю сориентироваться в том, какой элемент имеет фокус (и, таким образом, какой элемент будет принимать вводимые данные). Соответствующий пример приведен ниже:

$(function() {
    
	$('input').bind('focus blur', function(e) {
		var borderVal = e.type == "focus" ? "medium solid green" : "";
        $(this).css("border", borderVal);
	});
		
});

В этом примере мы выбираем все элементы input и регистрируем функцию в качестве обработчика обоих событий — focus и blur. Эта функция выделяет элемент зеленой рамкой, когда он принимает фокус, и убирает рамку, когда фокус теряется:

Выделение элемента, получившего фокус

Обратите внимание на то, что здесь использован селектор input. Иными словами, элементы выбираются по дескриптору. В некоторых браузерах этот селектор действует более широко и, в частности, выбирает элементы button, способные инициировать отправку формы. Это означает, что при использовании расширенного селектора граница будет применяться не только к элементам input, но и к элементу button.

Реагирование на изменение значений формы

Событие change запускается, когда пользователь изменяет значение элемента form. Это событие особенно полезно, если вы предоставляете совокупную информацию, основанную на значениях, введенных в форме. В примере ниже показано, как это событие можно использовать в документе, представляющем сайт цветочного магазина, для отслеживания общего объема заказа:

$(function() {
	
    var total = $('#buttonDiv')
        .prepend("<div>Общий объем заказа: <span id=total>0</span></div>")
        .css({clear: "both", padding: "5px"});
    $('<div id=bbox />').appendTo("body").append(total).css("clear: left");
        
    $('input').change(function(e) {
        var total = 0;
        $('input').each(function(index, elem) {
            total += Number($(elem).val());
        });    
        $('#total').text(total);
    }); 
		
});

В этом примере в ответ на событие change вычисляется сумма всех значений, введенных в полях input, и результат отображается в элементе span, который перед этим был добавлен в документ. Обратите внимание на то, что для получения значений элементов input используется метод val().

Реагирование на отправку формы

К более сложным операциям, которые можно выполнять по отношению к формам, относятся те, что связаны с отменой действий браузера по умолчанию, предусмотренных для элементов формы. Простой пример приведен ниже:

$(function() {
	
    $('form').submit(function (e) {
        if ($('input').val() == 0) {
             e.preventDefault();
        }
    });  
		
});

В этом сценарии регистрируется встроенная функция для обработки события submit. Это событие будет запускаться при выполнении пользователем щелчка на кнопке "Заказать". Если значение первого элемента input равно 0, вызывается метод, preventDefault(), который прервет предусмотренное для формы действие по умолчанию, заключающееся в отправке данных на сервер. При любом другом значении отправка формы выполняется.

Пройди тесты
Лучший чат для C# программистов