Web-инжиниринг

Submit


Обмен данными

Передача данных на сервер из формы происходит по событию submit. Это событие происходит при одном из следующих действий пользователя:

  • нажата кнопка Submit
  • нажата графическая кнопка
  • нажата клавиша Enter в форме из одного поля
  • вызван метод Submit
  • При описании отображения контейнера FORM на объекты JavaScript мы подробно описали обработку события submit. В данном разделе мы сосредоточимся на сочетании JavaScript-программ в атрибутах полей и обработчиках событий. Особое внимание уделим возможности перехвата/генерации события submit.

    Кнопка Submit

    Кнопка submit - это разновидность поля ввода. Она ведет себя так же, как и обычная кнопка, но только при этом генерирует событие submit(передачу данных на сервер). В этом, с точки зрения JavaScript-программирования, она абсолютно идентична графическим кнопкам:

    <form>
    <input type=submit value=submit>>
    </form>

    В этом примере мы просто перезагружаем страницу.

    С точки зрения программирования наибольший интерес представляет собой возможность перехвата события submit и выполнение при этом действий, отличных от стандартных. Для этой цели у кнопки есть атрибут обработки события click(onClick):

    <form>
    <input type=submit value=Submit onClick="return false;">
    </form>



    Из этого примера видно, что кнопка submit ведет себя несколько иначе, чем графическая кнопка в Netscape Navigator, но также как графическая кнопка в Internet Explorer(различия со временем наверняка исчезнут :-)). При нажатии на кнопку перезагрузки страницы не происходит - передача данных на сервер отменена. Обработчик работает так же, как и обработчик события submit в контейнере FORM.

    Теперь можно написать свою собственную программу обработки события submit:

    function my_submit()

    {


    if(window.confirm("Do you wona to reload page?")) return true;



    else return false;

    }

    ...
    <form>
    <input type=submit value=Submit onClick="return my_submit();">
    </form>

    Если согласиться с перезагрузкой страницы, то она действительно будет перезагружена, при отказе (cancel) - вы вернетесь в текущую страницу без перезагрузки. Действия могут быть и более сложными. В любом случае, если функция обработки возвращает значение true, то передача данных на сервер(в нашем случае перезагрузка страницы) происходит, в противном случае (значение false) - данные не передаются.



    начало страницы


    Единственное поле в форме

    Если в форме присутствует одно единственное поле, и мы в него осуществили ввод и после этого нажали на кнопку клавиатуры Enter, то браузер сгенерирует событие submit:

    <form onSubmit="window.alert('Data submited');return false;">
    <input size=10 maxlength=10>
    </form>

    Перехватить такое событие и обработать можно только за счет программы обработки события submit в контейнере FORM, как это и сделано в примере.

    Нужно что-то делать

    Ничего не надо делать

    В этом примере кроме поля ввода в форме присутствует меню. Если менять значения выбранных альтернатив, то перезагрузки не происходит, но стоит изменить значение в поле ввода и нажать Enter, происходит submit и мы получаем окно предупреждения.



    начало страницы


    Метод submit()

    Метод submit() - это метод формы. Если в программе вызывается метод submit, то данные из формы, к которой применяется данный метод, передаются на сервер. Усовершенствуем пример с полем ввода и меню выбора(прежде чем выбирать альтернативы прочтите комментарий под примером):

    <form onSubmit="window.alert('Data submited');return false;">
    <input size=10 maxlength=10>
    <select onChange="form.submit();">
    <option>Нужно что-то делать<option>Ничего не надо делать</select>
    </form>
    Нужно что-то делатьНичего не надо делать

    При выборе альтернативы пользователь сразу инициирует обмен данными с сервером. Событие submit в данном случае обработчиком событий не перехватывается в отличие от нажатия Enter. Такое поведение браузера довольно логично. Если программист вызвал метод submit(), то, наверное, он предварительно проверил данные, которые отправляет на сервер.


    Содержание раздела