Отправка данных формы: событие и метод submit

Отправка данных формы: событие и метод submit

Здравствуйте!  В этом последнем уроке по работе с формами в JavaScript   я хотел бы  рассказать об  отправке данных формы и конкретно  об методе submit.  Само событие submit  появляется при отправке данных  формы на сервер.  И наиболее частое его применение – это валидация  или  просто проверка  формы перед отправкой.

Метод submit позволяет отправить форму из JavaScript, без  непосредственного участия пользователя.  Далее  давайте рассмотрим  более  детально.

Отправка формы javascript

Событие submit

Чтобы отправить форму на сервер, у посетителя есть два способа:

  1. Первый – это  просто нажать кнопку <input type=»submit»> или <input type=»image»>.
  2. Второй – нажать Enter, находясь на каком-нибудь поле в форме.

Какой бы способ ни выбрал посетитель – будет сгенерировано событие submit. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать event.preventDefault() – тогда форма не отправится на сервер.

Например, в таком HTML оба способа выведут alert, форма не будет отправлена:

<form onsubmit="alert('submit!');
return false"> 
Первый: Enter в текстовом поле <input type="text" value="Текст"><br> 
Второй: Нажать на "Отправить": <input type="submit" value="Отправить"> 
</form>

Ожидаемое поведение:

  1. Перейдите в текстовое поле и нажмите  на клавишу Enter, будет событие, но форма не отправится на сервер благодаря return false в обработчике.
  2. То же самое произойдет при клике на <input type=»submit»>.
Взаимосвязь событий submit и click

При отправке формы путём нажатия Enter на текстовом поле, на элементе <input type=»submit»> генерируется событие click.
Это довольно забавно, учитывая что клика-то и вовсе не было.

<form onsubmit="alert('submit');
return false"> 
<input type="text" size="30" value="При нажатии Enter будет click"> 
<input type="submit" value="Submit" onclick="alert('click')"> 
</form>

Просмотреть  пример

Метод submit

Чтобы отправить форму на сервер из JavaScript – нужно вызвать на элементе формы метод form.submit().

Читайте также  Свойства элементов формы

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

Это можно использовать для искусственной генерации отправки формы  на  сервер.

Задания

Модальное диалоговое окно

Создайте функцию showprompt(text, callback), которая  будет выводить форму для ввода с сообщением text и кнопками ОК/Отмена.

  • При отправке формы (OK/ввод в текстовом поле) – должна вызываться функция callback со значением поля.
  • При нажатии на Отмена или на клавишу Esc – должна вызываться функция callback(null). К

Проверка  правильности заполнения полей  формы

Напишите функцию valid(form), которая будет  проверять содержимое формы по клику на кнопку «Проверить».

Ошибки:

  1. Одно из полей не заполнено.
  2. Пароли не совпадают.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: