Обработка формы на JavaScript (часть2)


Обработка формы на JavaScript (часть2)

Доброго всем времени суток. Начинаю вторую, завершающую часть, из цикла обработка формы на JavaScript в которой я продолжу расмотрение кнопок button, флажков checkbox и радиокнопок. Но сначала хочу вернуться к последнему примеру из урока "Обработка формы на JavaScript (часть1)":



Вернуть значение по умолчанию

И особенно хочу обратить ваше внимание на следующую строчку кода:
<a href="javascript:document.form2.reset();void(0);">&nbsp;</a>

Форма работает, код выполняется и, на первый взгляд, все хорошо. Но на самом деле после клика на ссылку могут прекратить грузиться недогруженные элементы страницы, останавливаться анимированные GIF'ы и тому подобное.

Это происходит потому, что браузер считает клик по ссылке переходом на другую страницу и прекращает загружать текущую. Поэтому, если пользователь должен остаться на текущей странице, то добавьте return false при выходе из обработчика события onClick, например:

<a href="javascript:document.form2.reset();void(0); return false;">&nbsp;</a>

В этом случае после вызова программы JavaScript выполнение клика по ссылке прекратится, поэтому браузер не будет считать, что произошел переход на другую страницу.

При использовании в обработчиках событий оператор return позволяет отменить или не отменять действие по умолчанию, которое совершает браузер при возникновении данного события.
Аналогично, чтобы отменить действие по умолчанию для параметров событий onClick, onKeyDown, onKeyPress, onMouseDown, onMouseUp, onSubmit, onReset, нужно использовать return false.

Для события onMouseOver с этой же целью нужно использовать оператор return true. Для таких событий как onMouseOut, onLoad, onUnload - отменить действие по умолчанию невозможно.

Продемострируем вышесказанное на примере:

Предотвращаем отправку формы с помощью return false

Код:
<div style="background: #55a1e0; padding:5px 10px;" > <form name="form1" action="index.html"> <fieldset> <legend>Предотвращаем отправку формы</legend> <input type="submit" value="отправить" onClick="alert('Не отправим!');return false;" /> </fieldset> </form> </div>

Вообще говоря, кнопка отправки (submit) позволяет отправить данные, введенные в форму, на сервер. При отсутствии у контейнера FORM атрибутов значениями по умолчанию являются:

  • ACTION — адрес текущей страницы;
  • METHOD — значение по умолчанию GET;
  • TARGET — значением по умолчанию _self;

И в этом случае при нажатии на кнопку отправки данных, браузер просто перезагрузит текущую страницу.

Графические кнопки


Еще одна разновидность кнопок – это графические кнопки. Ее отличие состоит в том, что вместо кнопки с надписью пользователь увидит картинку, по которой можно кликнуть: Обратится к графической кнопке можно задав уникальный идентификатор ID:
<input type="image" src="pic.gif" id="d1" />

и затем написав в программе:
var knopka = document.getElementById('d1')

можно будет обращаться к свойствам этой кнопки, например knopka.src, или к методу knopka.click().

А продемонстрировать работу с графическими кнопками я хочу на примере ответа на вопрос, который был задан мне в комментариях к статье "Управляем видимостью объекта с помощью jQuery"



Код:
<input type="image" src="/mini_img/img1.jpg" onClick="this.src='/mini_img/img2.jpg'" onMouseOut="for (i=1; i&lt;=100000; i=i+1){}; this.src='/mini_img/img1.jpg'" />

По событию onClick исходное изображение кнопки замещается другим, а при уводе курсора от кнопки - событие onMouseOut, спустя некоторое время (за это отвечает пустой цикл for), возвращается прежнее изображение.

Списки вариантов (объекты Select и Option)


Напомню, что списки вариантов SELECT вмещают в себя контейнеры OPTION. При этом список может "выпадать" либо прокручиваться внутри окна. В зависимости от наличия атрибута MULTIPLE у контейнера SELECT список может быть либо с возможностью выбора только одного варианта, либо нескольких вариантов.

С каждым контейнером SELECT ассоциирован объект класса Select, а с каждым дочерним контейнером OPTION — объект класса Option, являющийся свойством данного объекта класса Select. Кроме того, свойством объекта класса Select является также коллекция options[], объединяющая все его дочерние объекты Option.

Я хочу продемонстрировать вам одно интересное свойство объекта класса option, а именно применение конструктора, с помощью которого можно создавать объекты класса Option. Вот его синтаксис:
opt = new Option([ text, [ value, [ defaultSelected, [ selected ]]]]);

где:
  • text — строка текста, размещаемая в контейнере OPTION;
  • value — значение, которое передается серверу при выборе альтернативы;
  • defaultSelected — альтернатива по умолчанию (true/false);
  • selected — альтернатива выбранная пользователем (true/false).

При нажатии на кнопку "Удалить" - удаляем последний вариант а при нажатии на "Восстановить" - восстанавливаем значения.

Код:
<script type="text/javascript"> function RestoreOptions() { document.form3.select3.options[0] = new Option('Вариант один','',true,true); document.form3.select3.options[1] = new Option('Вариант два'); document.form3.select3.options[2] = new Option('Вариант три'); return false; } </script> <div style="background: #55a1e0; padding:5px 10px;" > <form name="form3" onReset="RestoreOptions();"> <fieldset> <legend>При нажатии на кнопку <strong>"Удалить"</strong> - удаляем последний вариант а при нажатии на <strong>"Восстановить"</strong> - восстанавливаем значения. </legend> <select name="select3" size="3" > <option>Первый вариант</option> <option>Второй вариант</option> <option>Третий вариант</option> </select> <input type="button" value="Удалить" onClick="form3.select3.options[form3.select3.length-1]=null;" /> <input type="reset" value="Восстановить" /> </fieldset> </form> </div>

Восстановление альтернатив помещено в обработчик события onReset контейнера FORM, вызывающий фунцию RestoreOptions(), где и создаются объекты класса Option, которые мы подчиняем объекту document.form3.sеlect3 класса Select. При этом первая альтернатива должна быть выбранной по умолчанию, для этого аргументу defaultSelected задано значение true.

Поля для множественного выбора checkbox


В этом примере при помощи события onClick проверяется текущий элемент this. И если он отмечен, то методом alert выводится сообщение. Причем в среднем чекбоксе флажок можно снять, а в нижнем он блокируется.

При выборе категории выводим отмеченную методом alert HTML и CSS
PHP и MYSQL
JavaScript + jQuery

Код:
<div style="background: #55a1e0; padding:5px 10px;" > <form name="form4"> <fieldset> <legend>При выборе категории выводим отмеченную методом alert</legend> <input type="checkbox" name="HTML и CSS" value ="Да" checked="checked" /> HTML и CSS <br /> <input type="checkbox" name="PHP и MYSQL" value ="Да" onclick="if (this.checked) {alert ('Вы выбрали PHP и MYSQL - флажок можно снять')}" /> PHP и MYSQL <br /> <input type="checkbox" name="JavaScript + jQuery" value ="Да" onclick="if (this.checked) {alert ('Вы выбрали JavaScript + jQuery - флажок нельзя снять')} else {return false}"/> JavaScript + jQuery </fieldset> </form> </div>

Радио кнопки


Ну и напоследок обратимся к радиокнопкам. Обычно имеется несколько радио-кнопок с одним и тем же именем и существует способ доступа ко всем радио-кнопкам с этим именем.

Значение document.forms.имяФормы.elements.имяРадиокнопок будет содержать список со всеми радио-кнопками.

А продемонстрирую я это на следущем примере:

Выводим методом alert значение кнопки Синий
Красный
Зеленый

Код:
<script type="text/javascript"> function radioCheck(){ var radios = document.form5.color; for(var i=0; i<radios.length; i++){ if(radios[i].checked) { alert ('Вы выбрали '+ radios[i].value + ' цвет'); return true; } } alert('Ни один цвет не выбран'); return false; } </script> <div style="background: #55a1e0; padding:5px 10px;" > <form name="form5"> <fieldset> <legend>Выводим методом <strong>alert</strong> значение кнопки</legend> <input type="radio" name="color" value="синий" />Синий<br /> <input type="radio" name="color" value="красный" />Красный<br /> <input type="radio" name="color" value="зеленый" />Зеленый<br /> <input type="button" value="Проверить" onClick="radioCheck();" /> </fieldset> </form> </div>

Всю работу в этом коде выполняет функция radioCheck(), поэтому разберем ее поподробнее. Сначала я заношу в переменную массив всех радиокнопок с именем color. А затем в цикле перебираю все элементы этого массива(радиокнопки), и если кнопка отмечена, то вывожу ее значение методом alert

Я понимаю, конечно, что это не благодарное занятие пытаться рассмотреть в одной небольшой статье такое обширное понятие. Но, собственно, я на это и не претендую. Я хочу лишь заинтересовать вас, дать толчок, показать основные возможности — а дальше дело за вами. А я в свою очередь обещаю, что буду еще не раз возвращаться к этому вопросу.

Автор: Сергей Зарубин

Дата: 2011-08-18

Колличество просмотров: 14730

Нравится

Комментарии к заметке:

Комментарий добавил(а): Павел
Дата: 2012-03-02

Здравствуйте! Очень интересные у Вас статьи. Хотел задать вопрос, можно ли сменить класс у кнопки type="submit" после одного нажатия с помощью JS?

Если подробнее, то есть кнопка "Купить" в интернет-магазине у товара и после её нажатия надо сделать её неактивной. Саму "неактивность" победил через php (по последующим нажатиям товар в корзину уже не добавляется), но сама кнопка остаётся прежней. А хочется после нажатия сменить её класс, то есть сделать серой, с cursor:none; и т.п.

Пример, как на сайте znachkiopt.ru - кнопка "в корзину", но там у них много наворочено кода на событии onclick. А можно как-то проще?
Буду благодарен за ответ!

Комментарий добавил(а): Сергей Зарубин
Дата: 2012-03-03

Здравствуйте. Конечно же можно.
Попробуйте почитать комментарий к статье
Управляем видимостью объекта с помощью jQuery
- там практически ответ на ваш вопрос.
Или обратитесь к заметке Динамическое изменение содержимого веб-страницы и свойство innerHTML.
Ну а если и это это вам не поможет, выполните в браузере:


<input type ='button' value='button' onclick='this.disabled = true;' />


Комментарий добавил(а): vElenaSn
Дата: 2017-06-06

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): segorSn
Дата: 2017-06-09

Ведущая компания в России и странах СНГ по продаже авиабилетов «Airline»

Крупнейшая международная компания по продаже А/В билетов
срочно набирает сотрудников на постоянную основу для несложной
работы через интернет, с ежедневными выплатами от 11 000 руб.

Работая в нашей компании Вы получаете:

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

Пройдите регистрацию у нас на сайте. > www.Airline-Rabota.tk <

Без вложений, опыт и профессиональные навыки не требуются!

Комментарий добавил(а): pElenaSn
Дата: 2017-06-13

Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

Вам достаточно просто зарегистрироваться на нашем сервисе. > www.oplata-vklike.tk <

Вывод заработанных средств ежедневно в течении нескольких минут.

Комментарий добавил(а): mElenaSn
Дата: 2017-09-21

Платим за лайки! - Оплата сдельная!

Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
достаточно просто зарегистрироваться на нашем сервисе. > oplata-vklike.tk <
Вывод заработанных средств ежедневно в течении нескольких минут.



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


Введите число с картинки:

captcha