Ноу Інти, лекція, програмуємо форми

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

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

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

кнопка button

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

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

кнопка submit

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

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

5.6. Обробники onClick у кнопки відправки і onSubmit у форми

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

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

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

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

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

Метод submit () форми

Виклик методу submit () форми не рівносильний натискання кнопки відправки. При виклику цього методу буде виконано тільки третє з перерахованих вище трьох дій - відправка даних на сервер. Те, що він не повинен породжувати виклик обробника onClick кнопки відправки, цілком зрозуміло - адже ми намагаємося відправити дані в обхід кнопки відправки (якої, до речі, може і не бути зовсім). Але і обробник події onSubmit у форми теж не викликається - це є для багатьох несподіваним. Не будемо судити, наскільки це логічно (і чому це поведінка відрізняється від поведінки методу reset (). Див. Нижче), а просто проілюструємо цей ефект, ввівши в попередній приклад посилання, що викликає метод submit ():

5.8. Метод submit () не викликає обробника onSubmit

5.9. Примусовий виклик onSubmit перед submit ()

Є ще один спосіб ініціювати відправку даних форми в обхід кнопки відправки (якої, до речі, у форми може і не бути). Якщо фокус знаходиться на будь-якому текстовому полі форми і користувач натисне клавішу Enter, то (в більшості браузерів) відбудеться виклик обробника події onSubmit форми і відправка даних на сервер.

5.10. Відправка даних форми натисканням клавіші Enter

Цей спосіб працює логічніше, ніж метод submit (). тому відправляються на сервер дані не уникають попередньої перевірки оброблювачем onSubmit.