кнопка submit

У HTML-формах використовується чотири види кнопок:

В атрибуті кнопки можна задати обробник події onClick, а в атрибуті форми - обробники подій onSubmit і onReset. Крім того, кнопок і формою відповідають об'єкти DOM. Об'єкт, який відповідає кнопці, має методclick (). Об'єкт, який відповідає формі, має методи submit () і reset (). З точки зору програмування важливе питання про взаємодію цих методів один з одним і з відповідними обработчиками подій.

  • при виклику методу click () кнопки викликається і обробник події onClick цієї кнопки;
  • при виклику методу submit () форми не викликається обробник події onSubmitформи;
  • при виклику методу reset () форми викликається і обробник події onResetформи.

Нижче ми на прикладах розглянемо, що це означає на практиці. Таким чином, при програмному виклику методу submit () потрібно подбати про додаткове виклику обробника події onSubmit, щоб, наприклад, дані не були відправлені на сервер без попередньої перевірки. Як це зробити - ми розповімо нижче. Особливу увагу ми приділимо також можливості перехоплення і генерування події відправки даних на сервер.

Кнопка типу button вводиться в форму головним чином для того, щоб можна було виконати будь-які дії або при її натисканні користувачем, або при виклику методу click ().

Виклик методу click () у кнопки рівносильний натискання кнопки, що і демонструє наведений приклад. Як ми побачимо нижче, це ж справедливо для будь-яких типів кнопок.

Для імітації відповіді сервера заготовив наступний простий HTML-файл receive.htm:

Тепер усложним наш приклад: додамо обробники подій onClick (у кнопки відправки) і onSubmit (у форми), і подивимося на поведінку браузера при натисканні кнопки відправки:

Приклад 5.6. Обробники onClick у кнопки відправки і onSubmit у форми (html, txt)

Переконайтеся, що натискання кнопки відправки призводить до наступної послідовності дій браузера:

  1. виклик обробника події onClick у даній кнопки;
  2. виклик обробника події onSubmit у форми;
  3. Передавання даних форми на сервер.

Відповідно, для виконання додаткових дій перед відправкою даних можна помістити код в будь-який із зазначених оброблювачів; зокрема, помістивши в якійсь із них оператор return false, ми зможемо запобігти відправку даних.

Виклик методу click () кнопки відправки рівносильний натискання цієї кнопки - відбудуться всі три вищевказаних дій:

Приклад 5.7. Виклик методу click () у кнопки відправки (html, txt)