Form submit

javascript Submit Form

HTML page usually uses a submit button to submit a form to a handling file such as a php script. All input values of the form will be transferred to the handling file by «post» method.

 <form name=sp action="formtest.php" method="post"> Name: <input name="n" type="text" style="width:260px;height:22px;font-size:20px"> <input style="font-size:15px;height:26px;" type=submit value="Submit"/> </form> /*****formtest.php*****/ <?php if (isset($_POST['n']) && $_POST['n'] != "") { echo "Name is: " . $_POST['n']; } else echo "Nothing there."; ?> 

Name:


There is a button, its type is submit, and the form is handled by «formtest.php» via «post» method.

Sometimes javascript is used to check the input values before submitting to the handling file. This can be done by adding an onsubmit() event to the form. Following example shows how to check the input value do not contains number before submit.

 <script language="javascript"> function checkform() { var v=document.sf.sfn.value; for (var i = 0; i < v.length; i++) { if ((v.substring(i,i+1) >= 0 && v.substring(i, i+1) <= 9)) { alert("Error! Name contains number."); return false; } } return true; } </script> <form name=sf action="formcheck.php" method="post" onsubmit="return checkform();"> Name: <input name="n" type="text" style="width:260px;height:22px;font-size:20px"> <input style="font-size:15px;height:26px;" type=submit value="Submit"/> </form> /*****formcheck.php*****/ <?php if (isset($_POST['sfn']) && $_POST['sfn'] != "") { echo "Name is: " . $_POST['sfn']; } else echo "Nothing there."; ?> 

Name:

javascript can also be used for form submit, by adding an onclick() event to the submit button:


 <script language="javascript"> function submitform() { document.forms["sp2"].submit(); } </script> <form name=sp2 action="formtest2.php" method="post"> Name: <input name="n2" type="text" style="width:260px;font-size:22px"> <input style="font-size: 17px" type=button onClick="submitform()" value="Submit"/> </form> /*****formtest2.php*****/ <?php if (isset($_POST['n2']) && $_POST['n2'] != "") { echo "Name is: " . $_POST['n2']; } else echo "Nothing there."; ?> 
Name:

We can use javascript to submit the form using href instead of submit button:

 <form name=sp3 action="formtest3.php" method="post"> Name: <input name="n" type="text" style="width:260px;font-size:22px"> <a href="javascript:document.forms['sp3'].submit()"> <u>Submit</u></a> <a href="javascript:document.forms['sp3'].reset()"> <u>Reset</u></a> </form> /*****formtest3.php*****/ <?php if (isset($_POST['n3']) && $_POST['n3'] != "") { echo "Name is: " . $_POST['n3']; } else echo "Nothing there."; ?> 
Name: Submit Reset

javascript can also be used for form and input box validations, please click here for details.

www.endmemo.com

.submit() — устанавливает обработчик отправки формы на сервер, либо запускает это событие.

Метод имеет три варианта использования.


  • handler — функция, которая будет установлена в качестве обработчика.

  • eventData — объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате {fName1:value1, fName2:value2, ...};
  • handler — функция, которая будет установлена в качестве обработчика.

Вызывает событие submit, у выбранных элементов страницы.

В первых двух вариантах использования, метод является аналогом .on("submit", handler), а в третьем случае аналогом .trigger( "submit" ).

Событие submit происходит непосредственно перед отправкой формы на сервер и в обработчике можно инициировать отмену отправки формы, вызвав метод eventObject.preventDefault() или просто возвратив false. Событие submit можно привязать только к элементу form.

Формы могут быть отправлены либо нажатием явного <input type = "submit">, <input type = "image">
, либо <button type = "submit">, либо нажатием Enter, когда определенные элементы формы имеют фокус.

Для примера рассмотрим HTML:

Обработчик события может быть привязан к форме:

Теперь, когда форма будет отправлена, будет выдано сообщение. Это событие происходит до фактической отправки, поэтому мы можем отменить это действие, вызвав .preventDefault() для объекта события или вернув false из нашего обработчика. Мы можем инициировать событие вручную при нажатии на другой элемент:

После выполнения этого кода, также будет выдано сообщение, но действие отправки по умолчанию в форме будет запущено, поэтому форма будет отправлена.

Событие отправки JavaScript не «всплывает» в Internet Explorer. Тем не менее, скрипты, которые полагаются на делегирование событий с событием отправки, будут последовательно работать в разных браузерах начиная с jQuery 1.4, что нормализовало поведение события.

codernote.ru

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега <form>, как показано в примере 1.

Пример 1. Отправка данных формы

HTML5IECrOpSaFx

   
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Данные формы</title> </head> <body> <form action="/example/handler.php"> <p><input name="login"> <input type="password" name="pass"></p> <p><input type="submit"></p> </form> </body> </html>

В этом примере данные формы, обозначенные атрибутом name (login и password), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге <form> используется атрибут method, а его значениями выступают ключевые слова get и post. Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

Табл. 1. Различия между методами GET и POST
GET POST
Ограничение на объём 4 Кб Ограничения задаются сервером.
Передаваемые данные Видны сразу всем. Видны только при просмотре через расширения браузера или другими методами.
Кэширование Страницы с разными запросами считаются различными, их можно кэшировать как отдельные документы. Страница всегда одна.
Закладки Страницу с запросом можно добавить в закладки браузера и обратиться к ней позже. Страницы с разными запросами имеют один адрес, запрос повторить нельзя.

Какой метод используется легко определить по адресной строке браузера. Если в ней появился вопросительный знак и адрес стал похож на этот, то это точно GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами ?q=node/add и ?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

Ниже перечислены типовые области применения этих методов на сайтах.

GET

Передача небольших текстовых данных на сервер; поиск по сайту.

Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.

POST

Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.


Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега <form>. Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега <iframe> (пример 2).

Пример 2. Открытие формы во фрейме

HTML5IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Использование фрейма</title>  </head>  <body>  <p><iframe name="area" width="500" height="200"></iframe></p>  <form action="handler.php" target="area">  <p><input placeholder="Введите текст" name="text">  <p><input type="submit" value="Отправить"></p>  </form>  </body> </html>

В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area.

Элементы формы традиционно располагаются внутри тега <form>, тем самым определяя те данные, которые будут передаваться на сервер.
то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).

Пример 3. Связывание формы с полями

HTML5IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Форма</title>  </head>  <body>  <form id="auth" action="handler.php" method="post"></form>  <p>...</p>  <p><input name="login" form="auth">  <input type="password" name="pass" form="auth"></p>  <p><input type="submit" form="auth"></p>   </body> </html>

В этом примере тег <form> однозначно отождествляется через идентификатор auth, а к полям, которые следует отправить с помощью формы, добавляется form="auth". При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.


Хотя параметры передачи формы традиционно указываются в теге <form>, их можно перенести и в кнопки отправки формы (<button> и <input type="submit">). Для этого применяется набор атрибутов formaction, formmethod, formenctype и formtarget, которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.

Пример 4. Отправка формы

HTML5IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Отправка формы</title>  </head>  <body>  <form>  <p><input placeholder="Ваше имя" name="user"></p>  <p><input type="submit" value="Отправить"   formaction="handler.php" formmethod="post"></p>  </form>  </body> </html>

Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.

htmlbook.ru

Элемент <form>

Формы вставляются на веб-страницы посредством элемента <form>. Он представляет собой контейнер для всего содержимого формы, включая такие элементы, как текстовые поля и кнопки, а также любые другие теги языка HTML.
нако он не может содержать в себе другой элемент <form>.
Для отправки формы на сервер используется кнопка «Submit», того же результат получится, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» может быть использована для отправки.
Большинство атрибутов элемента <form> влияют на обработку формы, а не на ее дизайн. Наиболее распространёнными из которых являются action и method. Атрибут action содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method является методом HTTP, который должны использовать браузеры для отправки данных формы.

Элемент <input>

Практически все поля для формы создается с помощью элемента <input> (от англ. input — ввод). Внешний вид элемента <input> меняются в зависимости от значения его атрибута type:

<input type="значение">

Вот некоторые значения атрибута type:

Значение Описание
text ввод одной строки текста
radio элемент-переключатель (иногда их называют радио-кнопками)
password текстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой
checkbox поле для установки флажка, который можно установить или сбросить
submit кнопка, при нажатии которой происходит отправка данных, введенных в форму
reset кнопка, при нажатии которой вся форма очищается. Точнее сказать, все элементы формы получают значения по умолчанию
button обычная командная кнопка

Ввод текста и пароля

Одним из самых простых типов элементов формы является текстовое поле, предназначенное для ввода текста из одной строки. Данный тип ввода текста установлен по умолчанию, а следовательно, именно однострочное поле отобразится, если вы забудете указать атрибут type. Для добавления однострочного поля ввода текста в форму следует внутри элемента <input> прописать атрибут type со значением text:

<input type="text">

Поле ввода пароля является разновидностью обычного текстового поля. Оно поддерживает те же атрибуты, что и однострочное текстовое поле. Атрибут name устанавливает имя поля ввода пароля, которое будет отправлено на сервер вместе с паролем, введенным пользователем. Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):

<input type="password">

Пример создания формы с полем для ввода пароля:

Вместе с этим атрибутом можно использовать атрибут maxlenght, значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size, рекомендуется использовать средства каскадных таблиц стилей (CSS).
Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.

Переключатели (radio)

Элемент <input> типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

<input type="radio" name="имя _переменной" value="значение">

Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value. Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:

Флажки (checkbox)

Элемент <input> типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name, однако каждый флажок имеет собственное значение. Основной синтаксис флажка:

<input type="checkbox" name="имя _переменной" value="значение">

Атрибут checked, как и в случае с переключателями, указывает, что данный флажок должен быть установлен по умолчанию при загрузке страницы. Данный атрибут может быть установлен одновременно для нескольких флажков группы.
В следующем примере использование флажков заданы несколько выбранных по умолчанию вариантов ответа:

Кнопки подтверждения (submit) и очистки (reset)

Элемент <input> типа submit создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму. Если создаем кнопку, очищающую форму, то присваиваем атрибуту type значение «reset». Элементу <input> типа submit может быть присвоен необязательный атрибут name. Атрибут vаluе используется в данном элементе для указания текста, обозначающего надпись на кнопке. По умолчанию в браузерах на кнопке пишется «Отправить» (Submit), если вас данная надпись не устраивает — введите ее самостоятельно. Поскольку в разных браузерах стили кнопок подтверждения могут отличаться, поэтому лучше самостоятельно настроить стиль кнопки, воспользовавшись средствами CSS либо использовать графические кнопки.
Создание кнопок подтверждения и очистки:

Атрибут action.

Главным для элемента <form> является атрибут action, который указывает обработчик данных для формы. Обработчик данных — это файл, описывающий, что нужно делать с данными формы. В качестве результата этой обработки выдается новая HTML-страница, которая возвращается браузеру. Другими словами в атрибуте action указывается URL-путь к файлу-обработчику на сервере (иногда называемого страницей сценария) для обработки формы. Синтаксис следующий:

<form action="http://mytestserver.com/namefolder/obrabotchik.php">… </form>

Файл обработки находится на сервере mytestserver.com в папке namefolder и название серверного сценария, который будет обрабатывать данные — obrabotchik.php. Именно ему и будут переданы все данные, введенные вами в форму на веб-странице. Расширение .php указывает на то, что указанная форма обрабатывается сценарием написанном на языке PHР. Сам обработчик может быть написан на другом языке, например это может быть язык сценариев Python, Ruby и др.
Желательно всегда задавать значение атрибута action. Если форма должна передать значения на ту же страницу, где она расположена в качестве значения атрибута action укажите пустую строку: action=»».

Атрибут method

Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST. Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET. Рассмотрим применение каждого из них.

Метод POST

Метод POST упаковывает данные формы и отсылает их серверу незаметно для пользователя, поскольку данные содержатся в теле сообщения. Веб-браузер, при использовании метода POST отправляет на сервер запрос, состоящий из специальных заголовков за которыми следуют данные формы. Так как содержимое этого запроса доступно только серверу, метод POST применяется для передачи конфиденциальных данных, таких как пароли, реквизиты банковских карт и другая персональная информация пользователей. Метод POST также подходит для отправки больших объемов информации, так как в отличие от метода GET, у него нет ограничений по количеству передаваемых символов.

Метод GET

Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET, ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET, давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:

<form action="" method="GET">

т.е. замените POST на GET.
Сохраните файл под именем file_name.html и обновите страницу браузера (F5), затем заполните форму, например Вася Пупкин, и нажмите кнопку «Отправить». В адресной строке браузера Вы увидите что-то типа этого:

...file_name.html?firstname=Вася&lastname=Пупкин

Теперь вы видите имя каждого элемента формы, а также его значение, прямо здесь, в URL-адресе.
URL-адрес отделяется от остальных данных формы символом знака вопроса, а имена и значения переменных разделяются знаком амперсанд (&).
Этот метод нужно использовать, если вы не передаете больших объемов информации.
Этот метод не подойдет, если данные в вашей форме являются конфиденциальными, например хранят номер банковской карты или пароль.
Кроме того, метод GET непригоден, если вместе с формой вы хотите переслать на сервер файлы.

Группировка элементов формы

Элементы формы, связанные по смыслу, можно сгруппировать между тегами <fieldset> и </fieldset>. Браузер отобразит <fieldset> в виде рамки вокруг группы элементов формы. Внешний вид рамки может быть изменен с помощью каскадных таблиц стилей (CSS).
Чтобы добавить заголовок для каждой группы, понадобится элемент <legend>, который задает встраиваемый в рамку текст заголовка группы:


Задачи




wm-school.ru

На днях мне понадобилось реализовать отправку данных формы на сервер (submit формы), но с предварительной обработкой события формы onsubmit. Все бы ничего, если бы это можно было бы сделать при обычном нажатии на кнопку submit, но задача была немного усложнена тем, что сабмитить форму надо было автоматически, а не по запросу пользователя. В моем случае — по таймеру.

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

Для того чтобы наглядно продемонстрировать поведение данных методов, я приведу их исходники и примеры работы.

Пример отправки данных на сервер (post) с помощью обычной кнопки <input type=»submit» /> и предварительная обработка onsubmit будет выглядеть так:

<html> <body>  <form name="myform" onsubmit="alert('Отправка данных на сервер')" method="post">  <input type="text" name="data" value="Данные" />  <a href="javascript:document.myform.submit()">Отправить</a>  </form> </body> </html>

при таком коде HTML, поведение формы будет следующим: если нажать кнопку «Отправить», сначала выскочит окошко с предупреждением об отправке данных на сервер, а после нажатия на кнопку «ОК», данные будут отправлены на сервер.

А что же будет, если заменить кнопку submit на JavaScript метод form.submit ()?

<html> <body>  <form name="myform" onsubmit="alert('Отправка данных на сервер')" method="post">  <input type="text" name="data" value="Данные" />  <a href="javascript:document.myform.submit()">Отправить</a>  </form> </body> </html>

а вот в этом случае, и произойдет то самое, странное поведение формы — событие onsubmit не сработает, но данные будут отправлены на сервер.

После длительных опытов, было определено, что браузеры не следуют спецификации HTML. События обрабатываются только действиями пользователя, но не программными действиями.

А что же по этому поводу говорит спецификация W3C и основные производители браузеров.

Спецификация W3C Document Object Model (DOM) Level 2 HTML Specification говорит, что метод  submit () — «submits the form. It performs the same action as a submit button.» (сабмитит форму. Определяет то же действие, что и кнопка submit).

Производитель браузера FireFox, компания Mozilla сообщает, что onsubmit «Executes JavaScript code when a submit event occurs; that is, when a user submits a form.» (выполняет JavaScript код, когда возникает событие submit; это происходит в тот момент, когда пользователь сабмитит форму). Заметьте, что они уточняют «когда пользователь…», это в принципе исключает сабмит формы при вызове метода JavaScript.

Так же пишет и компания Netscape/Sun.

У Microsoft более лаконичное описание, «The submit method does not invoke the onsubmit event handler.» (Метод submit не вызывает событие onsubmit).

Как же выйти из этой ситуации?

Одним из решений может быть создание невидимой кнопки submit и вызов ее метода click (). Но это не сильно красивое решение. Поэтому можно подключить библиотеку jQuery и написать несколько строк кода на JavaScript для программной генерации событий.

$.fn.fireEvent = function(eventType) {  return this.each(function() {  if (document.createEvent) {  var event = document.createEvent("HTMLEvents");  event.initEvent(eventType, true, true);  return !this.dispatchEvent(event);  } else {  var event = document.createEventObject();  return this.fireEvent("on" + eventType, event)  }  }); };

Использовать данный метод очень просто. С помощью селектора jQuery находим нужный нам объект и вызываем метод fireEvent (), передав ему в качестве параметра, имя нужного события, без приставки on.

$("myform").fireEvent("submit");

На просторах сети, я находил еще одно решение — это использование метода trigger (), вместо метода fireEvent (), только он тоже не работает так как надо, потому и не буду его приводить тут.


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


generaltea.ru

Validate Form

Before submit a form to a server script, it is indicated to perform some minimal validations on the client side, like the number of characters in a field and the correct form of an e-mail address.

In the next example we use jQuery to validate the following form (two text input fields, two radio buttons, a select list, and a textarea).

  <form action="script.php" method="post">   Name: <input type="text" name="name" id="name" /><br />   E-mail: <input type="text" name="email" id="email" /><br />   <span id="gen">   Gender: <input type="radio" name="gen" value="man" />Man   <input type="radio" name="gen" value="woman" />Woman   </span><br />   Age, between: <select name="age" id="age">   <option>..select..</option>   <option value="5-10">5-10</option>   <option value="11-18">11-18</option>   <option value="19-30">19-30</option>   <option value="31-50">31-50</option>   <option value="51-70">51-70</option>   <option value="71+">71+</option>   </select><br />   Message:<br />   <textarea name="msg" id="msg" rows="4" cols="33"></textarea><br />   <input type="submit" name="submit" value="Submit" />  </form>  

Now we write a jQuery code that detects when the user attempts to submit the form. We check if the «name» field has at least two characters, if the e-mail address has the correct form, if a radio button is checked and a select options is selected, and if the textarea has at least 5 characters.
If all the form elements are correctly filled, submits the form, else, adds a CSS class=»error» to the invalid elements, and returns an Alert with a message.
The «error» class is defined in a CSS style to add a red border.
— Below there is a demo with this form.
This is the jQuery code to validate the form above:

  <style type="text/css"><!--  .error { border:2px solid red; }  --></style>  <script type="text/javascript" src="jquery_1.6.1.js"></script>  <script type="text/javascript"><!--  $(document).ready(function() {   // when a form is submited, get its data and validate the fields   $('form').submit(function() {   // gets field values   var name = $(this).find('input[name="name"]'); // Name   var email = $(this).find('input[name="email"]'); // E-mail   var gen = $(this).find(':radio:checked'); // Gender   var age = $(this).find('select[name="age"]'); // Age   var msg = $(this).find('#msg'); // Message     // remove class "error" from al elements   // sets a variable "error" used to deermine if submit or no the form   $('*').removeClass('error');   var error = 0;   var regx = /^([a-z0-9_-.])+@([a-z0-9_-.])+.([a-z]{2,4})$/i; // regexp for e-mail     /* Validate the fields (adds class "error" to invalid fields and set error=1) */   // check "name"   if(name.val().length<2){   name.addClass('error');   error = 1;   }   // check "email"   if(!regx.test(email.val())){   email.addClass('error');   error = 1;   }   // check radio input "gen", if undefined (not checked),   // add class "error" to element that includes radio inputs   if(gen.val()==undefined){   $('#gen').addClass('error');   error = 1;   }   // check "age", if no selected (value of <select> is the value of first <option>, initially displayed)   if(age.val()==age.find('option:first').val()){   age.addClass('error');   error = 1;   }   // check "msg"   if(msg.val().length<5){   msg.addClass('error');   error = 1;   }     // if error is 0, submit the form   // else alerts a message and blocks the submission by returning false   if(error==0) {   $(tihs).submit();   }   else {   alert('Please fill all fields with red border');   return false; // necesary to not submit the form   }   });  });  --></script>  

— The val() function returns the value of a form field.
— $(this).find(‘input[name=»name»]’) — returns the input element with name=»name» in the current object.
— $(this).find(‘:radio:checked’) — returns the checked radio item(s) in the current object.
— $(this).find(‘select[name=»age»]’) — returns the <select> element with name=»age» in the current object.
— $(this).find(‘#msg’) — gets the element with id=»msg» in the current object.

Submit the form via Ajax

To submit form data via Ajax to a server script, you must add the «name=value» pairs of the form fields in a string, separated by «&». This can be easily accomplished with jQuery serialize() method.
The serialize() method encodes a set of form elements as a string for submission.
After we validate the form, if there is no errors, we can apply this method and submit form data.

Hesre’s a complete example. Validate the form created above and submit it with jQuery ajax to a PHP script («script.php» file), then include the response of the script into a <div> on the page (For details, see the comments in code).
— The response from PHP contains a HTML code with form data submited.

  <!doctype html>  <html>  <head>  <meta charset="utf-8" />  <title>jQuery Validate Submit</title>  <style type="text/css"><!--  .error { border:2px solid red; }  --></style>  <script type="text/javascript" src="jquery_1.6.1.js"></script>  <script type="text/javascript"><!--  $(document).ready(function() {   // when a form is submited, get its data and validate the fields   $('form').submit(function() {   // gets field values   var name = $(this).find('input[name="name"]'); // Name   var email = $(this).find('input[name="email"]'); // E-mail   var gen = $(this).find(':radio:checked'); // Gender   var age = $(this).find('select[name="age"]'); // Age   var msg = $(this).find('#msg'); // Message     // remove class "error" from al elements   // sets a variable "error" used to submit or no the form   $('*').removeClass('error');   var error = 0;   var regx = /^([a-z0-9_-.])+@([a-z0-9_-.])+.([a-z]{2,4})$/i; // regexp for e-mail     /* Validate the fields (adds class "error" to invalid fields and set error=1) */   // check "name"   if(name.val().length<2){   name.addClass('error');   error = 1;   }   // check "email"   if(!regx.test(email.val())){   email.addClass('error');   error = 1;   }   // check radio input "gen", if undefined (not checked),   // add class "error" to element that includes radio inputs   if(gen.val()==undefined){   $('#gen').addClass('error');   error = 1;   }   // check "age", if no selected (value of <select> is the value of first <option>, initially displayed)   if(age.val()==age.find('option:first').val()){   age.addClass('error');   error = 1;   }   // check "msg"   if(msg.val().length<5){   msg.addClass('error');   error = 1;   }     // if error is 0, serialize form data and send the data string to server   // else alert a message   if(error==0) {   var srl = $(this).serialize();     $.ajax({   type: 'post',   url: 'script.php',   data: srl,   beforeSend: function() {   // before send the request, displays a "Loading..." messaj in the element where the response will be placed   $('#resp').html('Loading...');   },   timeout: 10000, // sets timeout for the request (10 seconds)   error: function(xhr, status, error) { alert('Error: '+ xhr.status+ ' - '+ error); }, // alert a message in case of error   success: function(response) {   $('#resp').html(response);   }   });   }   else { alert('Please fill all fields with red border'); }     return false; // necesary to not open the page when form is submited   });  });  --></script>  </head>  <body>  <div id="resp">Here will be displayed the response from server.</div>  <h4>Fill the form and submit data</h4>  <form action="script.php" method="post">   Name: <input type="text" name="name" id="name" /><br />   E-mail: <input type="text" name="email" id="email" /><br />   <span id="gen">   Gender: <input type="radio" name="gen" value="man" />Man   <input type="radio" name="gen" value="woman" />Woman   </span><br />   Age, between: <select name="age" id="age">   <option>..select..</option>   <option value="5-10">5-10</option>   <option value="11-18">11-18</option>   <option value="19-30">19-30</option>   <option value="31-50">31-50</option>   <option value="51-70">51-70</option>   <option value="71+">71+</option>   </select><br />   Message:<br />   <textarea name="msg" id="msg" rows="4" cols="33"></textarea><br />   <input type="submit" name="submit" value="Submit" />  </form>  </body>  </html>  

Demo:

coursesweb.net


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector