Submit js

Оглавление документа

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

  • нажата кнопка Submit;
  • нажата графическая кнопка;
  • нажата клавиша Enter в форме из одного поля;
  • вызван метод submit().

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

1. Кнопка Submit

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


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

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

click (onClick):

При нажатии на кнопку перезагрузки страницы не происходит — передача данных на сервер отменена. Обработчик действует так же, как обработчик события submit в контейнере FORM.

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

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

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

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

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

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


3. Метод submit()

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

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

www.webmasterwiki.ru

Работа с формами

Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.

Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM.

Свойства форм

Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.

Свойства первого набора


  • action. Значение атрибута ACTION тега FORM.
  • encoding. Значение атрибута ENCTYPE тега FORM.
  • method. Значение атрибута METHOD тега FORM.
  • target. Значение атрибута TARGET тега FORM.
  • elements. Массив всех элементов формы.
  • length. Размер массива elements.

Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM. Что же касается массива elements, то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements, причем первому элементу формы будет соответствовать элемент с индексом 0, второму — с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME.

Элементы форм

Кнопки (BUTTON, RESET, SUBMIT)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.

Метод

  • click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.

Пример

<html> <head>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  <script>  <!--  function btnClick()  {  var Txt1 = "";  var Txt2 = "";  Txt1 = document.Test.bt.value;  Txt2 = document.Test.bt.name;  document.getElementById('ex1').innerHTML="<HR>"+  "Вы нажали кнопку: " + Txt1.bold() +  " с именем: " + Txt2.bold() +"<HR>";  }  //-->  </script> </head> <body> <H1>Нажатие кнопки</H1> <div id="ex1"></div> <FORM NAME="Test">  <INPUT TYPE="button" NAME="bt" VALUE="Щелкни здесь!"  onClick="btnClick();"> </FORM> </body> </html>

Флажок (CHECKBOX)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • checked. Состояние флажка: true — флажок установлен, false — флажок не установлен.
  • defaultChecked. Отражает наличие атрибута CHECKED: true — есть, false — нет.

Метод

  • click( ). Вызов этого метода меняет состояние флажка.

Пример

<html> <head>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <H1>Метод click флажка</H1> <FORM NAME="Test">  Флажок <INPUT TYPE="checkbox" NAME="ch">  <BR>Состояние флажка можно изменить и этой кнопкой  <INPUT TYPE="button" VALUE="Смена состояния"  onClick="document.Test.ch.click();"> </FORM> </body> </html>

Переключатель (RADIO)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • length. Количество переключателей в группе.
  • checked. Состояние переключателя: true — переключатель включен, false — выключен.
  • defaultChecked. Отражает наличие атрибута CHECKED: true — есть, false — нет.

Метод

  • click( ). Вызов этого метода включает переключатель.

Так как группа переключателей имеет одно имя NAME, то к переключателям надо адресоваться как к элементам массива.

Пример

<html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">.    
BR>Состояние переключателей можно изменить и этой кнопкой <INPUT TYPE="button" VALUE="Смена состояния" onClick="btnClick();"> </FORM> </body> </html>

Список (SELECT)

Свойства

  • name. Имя объекта.
  • selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE).
  • length. Количество элементов (строк) в списке.
  • options. Массив элементов списка, заданных тегами OPTION.

Каждый элемент массива options является объектом со следующими свойствами:

  • value. Значение атрибута VALUE.
  • text. Текст, указанный после тега OPTION.
  • index. Индекс элемента списка.
  • selected. Присвоив этому свойству значение true, можно выбрать данный элемент.
  • defaultSelected. Отражает наличие атрибута SELECTED: true — есть, false — нет.

Методы

  • focus( ). Передает списку фокус ввода.
  • blur( ). Отбирает у списка фокус ввода.

Пример

<html> <head>  <meta http-equiv=Content-Type content="text/html;charset=utf-8">  <script><!--  function btnClick2()  {  var sI=document.Test2.Item.selectedIndex;  var Txt="";  Txt="Предложено "+document.Test2.Item.length+" напитков"+  "nВыбран "+document.Test2.Item.options[sI].text+  " (value= "+document.Test2.Item.options[sI].value+  ", index= "+document.Test2.Item.options[sI].index+")";  if(document.Test2.Item.options[sI].defaultSelected)  {Txt+="nЭтот напиток выбирается по умолчанию";}  alert(Txt);  }  //-->  </script> </head> <body> <H1>Работа с готовым списком</H1> <FORM NAME="Test2">  <SELECT NAME="Item" SIZE=5>  <OPTION VALUE="tea" SELECTED>Чай  <OPTION VALUE ="coffee">Кофе  <OPTION VALUE ="milk">Молоко  <OPTION VALUE ="cocoa">Какао  <OPTION VALUE ="juice">Сок  </SELECT>  <INPUT TYPE="button" VALUE="Пусть кофе"  onClick="Test2.Item.options[1].selected=true;">  <INPUT TYPE="button" VALUE="Посмотрим"  onClick="btnClick2();"> </FORM> </body> </html>    

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй — значение элемента списка, соответствующее значению атрибута VALUE, третий соответствует свойству defaultSelected, четвертый — свойству selected.

Пример

<html> <head>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <H1>Динамическое заполнение списка</H1> <FORM NAME="Sel">  <!-- Пустой список ссылок-->  <SELECT NAME="ListOfLinks">  </SELECT>  <!-- Кнопка активизации выбранной ссылки-->  <INPUT TYPE="button" VALUE="Переход"  onClick="window.location.href=document.links[Sel.ListOfLinks.selectedIndex];"> </FORM> <A HREF="http://kdg.HtmlWeb.ru"></A> <A HREF="http://www.dstu.edu.ru/"></A> <A HREF="http://sp2all.ru/"></A> <A HREF="http://www.VseTaksi.ru/"></A> <script><!--  // Цикл по всем ссылкам  for(i=0; i<document.links.length; i++)  { // Создание i-элемента списка и запись в него ссылки  document.Sel.ListOfLinks.options[i] = new Option(document.links[i], i, false, false);  }  // Выделение первого элемента в списке  document.Sel.ListOfLinks.selectedIndex = 0;  //--> </script> </body> </html>

Поле ввода (TEXT)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое поля.
  • value. Текущее содержимое поля.

Методы

  • focus( ). Передает полю фокус ввода.
  • blur( ). Отбирает у поля фокус ввода.
  • select( ). Выделяет содержимое поля.

Пример

<html> <head>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  <script>  <!--  function Complete()  {  var Elem="Фамилия: " + document.Sel1.Family.value +  "nИмя: " + document.Sel1.Name.value +  "nВозраст: " + document.Sel1.Age.value +  "nТелефон: " + document.Sel1.Phone.value;  alert(Elem);  }  function CheckAge(age)  {  if(age<18)  return "18";  else  return age;  }  //-->  </script> </head> <body> <H1>Заполните анкету</H1> <FORM NAME="Sel1">  <!-- Анкета -->  <TABLE>  <TR><TD><B>Фамилия:<B></TD>  <TD><INPUT NAME="Family" SIZE=20  onBlur=".    
<TR><TD><B>Телефон:<B></TD> <TD><INPUT NAME="Phone" SIZE=10></TD></TR> </TABLE> <!-- Кнопки готовности и сброса --> <INPUT TYPE="button" VALUE="Готово" onClick="Complete();"> <INPUT TYPE="reset" VALUE="Сброс"> </FORM> </body> </html>

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

Текстовая область (TEXTAREA)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое области.
  • value. Текущее содержимое области.

Методы

  • focus( ). Передает области фокус ввода.
  • blur( ). Отбирает у области фокус ввода.
  • select( ). Выделяет содержимое области.

Пример

<html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <script>  <!--  var OK="Тетя Эльза чувствует себя хорошо.nЮстас.";  var Problem="Тетя Эльза заболела.nЮстас.";  function getDate()  {  var today=new Date();  return today.toLocaleString()+"n";  }  function CheckRadio(form,value)  {  if(value=="Good")  form.Letter.value=getDate()+OK;  else  form.Letter.value=getDate()+Problem;  }  //-->  </script> </head> <body lang=RU> <H1>Отправьте телеграмму</H1> <FORM NAME="Sel2">  <label><INPUT TYPE="radio" NAME="Code" VALUE="Good"  onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка в норме  </label>  <BR>  <label><INPUT TYPE="radio" NAME="Code" VALUE="Bad"  onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка провалена  </label>  <TEXTAREA NAME="Letter" ROWS=3 COLS=35>  </TEXTAREA>  <INPUT TYPE="button" VALUE="Готово" onClick="alert(document.Sel2.Letter.value);">  <INPUT TYPE="reset" VALUE="Сброс"> </FORM> </body> </html>

Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:

<form>  <textarea id="textArea">Это тестовая область</textarea>  <input type="button" onclick="setCaretPosition('textArea', 5);" value="Установить курсор"> </form> <script>  function setCaretPosition(o, pos) {  o=document.getElementById(o);  if(o.setSelectionRange) {  o.focus();  o.setSelectionRange(pos,pos);  }else if (o.createTextRange) { // IE  var range = o.createTextRange();  range.collapse(true);  range.moveEnd('character', pos);  range.moveStart('character', pos);  range.select();  }  }  </script>

Поле ввода пароля (PASSWORD)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое поля.
  • value. Текущее содержимое поля.

Методы

  • focus( ). Передает полю фокус ввода.
  • blur( ). Отбирает у поля фокус ввода.
  • select( ). Выделяет содержимое поля.

Пример

<html> <head>  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  <script><!--  function Complete1()  {  if(document.Sel3.Pwd.value==document.Sel3.Pwd1.value)  alert("Вас зарегистрировалиnID="+document.Sel3.Id.value+"nPassword="+document.Sel3.Pwd.value);  else  alert("Ошибка при вводе пароляnПопробуйте еще раз");  }  //-->  </script> </head> <body> <H1>Регистрация</H1> <FORM NAME="Sel3">  <TABLE>  <TR><TD><B>Идентификатор:<B></TD>  <TD><INPUT NAME="Id" SIZE=20  onBlur="this.value=this.value.toUpperCase()"></TD></TR>  <TR><TD><B>Пароль:<B></TD>  <TD><INPUT TYPE="password" NAME="Pwd" SIZE=20  onFocus="this.select();"></TD></TR>  <TR><TD><B>Проверка пароля:<B></TD>  <TD><INPUT TYPE="password" NAME="Pwd1" SIZE=20  onFocus="this.select();"></TD></TR>  </TABLE>  <INPUT TYPE="button" VALUE="Готово" onClick="Complete1();">  <INPUT TYPE="reset" VALUE="Сброс"> </FORM> </body> </html>


Как я могу использовать select box как навигационное меню?

При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример:

 <FORM name="navForm"> <select name="menu" onChange = "self.location =  document.navForm.menu[document.navForm.menu.selectedIndex].value;"> <option value="home.html">Home</option> <option value="links.html">Links</option> <option value="contact.html">Contact Info</option> </select> 

Просто сохраните URL различных страниц в option value. Обработчик события OnChange вызовет перенаправление расположения, когда значение в поле изменено.

Вы могли бы использовать этот код, чтобы изменить расположение другого фрейма изменением ‘self.location =’ на ‘top.framename.location =


Как я могу использовать картинку для кнопки submit?

Часто возникает вопрос: «Как инициировать форму по картинке, а не по кнопке submit?» Решение столь же просто, как этот пример:

 <form> <input type="image" name="cancel" src="cancel.gif" alt="Cancel!" border=0> <input type="image" name="continue" src="continue.gif" 	alt="Click to Continue" border=0> </form> 

Когда нажимается любая кнопка, форма инициируется и координаты x/y щелчка мыши на кнопке загружаются в объект запроса. Например, если пользователь выбрал Cancel!, объект запроса будет содержать переменные cancel.x и cancel.y. Точно так же щелчок на Continue привел бы к переменным continue.x и continue.y.

Здесь важно отметить, что элементы .x и .y — не переменные объектов continue или cancel, а фактически часть имени «continue.x». Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса:

 if (request.normalItem)  act(); if (request.continue.x) // Noooo! Produces horrible error messages!  doContinuingThings(); 

Тем не менее рассмотрите это:

 if (request['normalItem'])  act(); if (<B>request['continue.x']</B>) // Much better :)  doContinuingThings(); 

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

Для некоторых приложений, полезно знать координаты курсора на нажатой картинке. Эта информация, конечно, содержится в парах image_element.x и image_element.y. Следующий серверный JavaScript мог бы использоваться для этого:

 x=0; y=0; if ((request['my_submit_image.x']) (request['my_submit_image.y'])) {  x = parseInt(request['my_submit_image.x']);  y = parseInt(request['my_submit_image.y']); } 


Передача данных между формами на различных страницах

В качестве простого примера, предположите, что ваша «домашняя» страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах. Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL. Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search.

home.html

 <html> <head> <script language="JavaScript"> function nextPage() {  self.location = "next.html?name=" +  	escape(document.theForm.userName.value);  // Use escape() any time there might be spaces or } // non-alpa characters </script> </head> <body> <form onSubmit = "nextPage();return false;"> Enter your name: <input type=text name=userName> <input type=submit> </form> </body> </html> 

next.html

 userName = document.search; userName = userName.substring(userName.indexOf("=")+1); document.write("Greetings, " + userName + "<P>"); 


Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?

Потому что объект работает не таким образом. Правильный и полный синтаксис для доступа к VALUE только что выбранным полем в списке — это:

 Document.form.selectObject[document.form.selectObject.selectedIndex].value 

Для доступак тексту элемента используйте свойство text:

 Document.form.selectObject[document.form.selectObject.selectedIndex].text 


Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?

Существует свойство, созданное в объекте form для каждой radio buttons или checkboxes с тем же самым именем. Например, следующий HTML код:

 <form name='theForm'> <input type=radio name="gender" value="Male">Male <input type=radio name="gender" value="Female">Female <input type=radio name="gender" value="Evasive">Not Specified </form> 

приводит к созданию 3-х элементов массива, вызываемых с помощью document.theForm.gender. Чтобы определить значение выбранной кнопки (или checkbox’а), вам нужно проверить свойство checked каждого из элементов. Например:

 function checkIt() {  theGroup = document.theForm.gender;  for (i=0; i< theGroup.length; i++) {  if (theGroup[i].checked) { 	 alert("The value is " + theGroup[i].value); 	 break; 	 }  } } 

Для получения и установки значения radio button value на javascript можно использовать следующие функции:

function getCheckedValue(radioObj) {     if(!radioObj)         return "";     var radioLength = radioObj.length;     if(radioLength == undefined)         if(radioObj.checked)             return radioObj.value;         else             return "";     for(var i = 0; i < radioLength; i++) {         if(radioObj[i].checked) {             return radioObj[i].value;         }     }     return ""; }   function setCheckedValue(radioObj, newValue) {     if(!radioObj)         return;     var radioLength = radioObj.length;     if(radioLength == undefined) {         radioObj.checked = (radioObj.value == newValue.toString());         return;     }     for(var i = 0; i < radioLength; i++) {         radioObj[i].checked = false;         if(radioObj[i].value == newValue.toString()) {             radioObj[i].checked = true;         }     } }


Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?

Форма отправляется, если нажата клавиша enter, в то время как единственный входной текстовый элемент формы имеет фокус. Вы можете вызывать подобное поведение в форме, имеющей более одного элемента, разбивая форму на ряд отдельных форм, так, чтобы каждая форма имела только один текстовый элемент. Используйте обработчик события onSubmit (или action=»javascript:myFunction();«) для накопления данных из других форм в вашей странице и инициируйте их все сразу.


Как я могу отключить поле текстового ввода?

Используйте обработчик onfocus для вызова функции blur():

 <INPUT TYPE="text" NAME="aTextField" ONFOCUS="this.blur()"> 

Если вы хотите динамически отключать/включать поле, используйте функцию skip (e)

 { this.blur(); }  <A HREF="javascript:document.formName.aTextField.onfocus = skip; void 0">disable text field</A>  <A HREF="javascript:document.formName.aTextField.onfocus = null; void 0">enable text field</A> 


Как сделать загрузку страницы при выборе флажка?

Используйте обработчик OnChange для вызова функции submit():

 <form method=get OnChange='this.submit();'>  <input type=checkbox name="fnew">Только новые </form> 


Сохранение данных в локальное хранилище браузера:

sessionStorage — запоминает результат пока открыт сайт во вкладке(окне), можно свободно перемещаться по сайту, обновлять страницы, но не закрывать окно браузера(вкладку).

localStorage — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.

<style> #idVhod {  display: none; /* изначально скрыт */ } </style>  <button onclick="onclickVhod()">открыть</button> <span id="idVhod">скрытый текст</span>  <script> var idVhod = document.getElementById('idVhod');  function onclickVhod() { idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline' localStorage.setItem('hide', idVhod.style.display); // сохраняем значение в объект hide }  if(localStorage.getItem('hide') == 'inline') { // если значение объекта hide "inline"  document.getElementById('idVhod').style.display = 'inline'; } //localStorage.removeItem('hide') // удалить один элемент //localStorage.clear() // удалить все элементы  </script>


Особенности onClick, onSubmit, onReset

  • метод click() у гиперссылки — влечет за собой вызов обработчика onClick этой ссылки
  • метод click() у ЛЮБОЙ кнопки формы — влечет за собой вызов обработчика onClick этой кнопки
  • метод reset() у формы — влечет за собой вызов обработчика onReset у формы
  • НО метод submit() у формы — НЕ влечет за собой вызов обработчика onSubmit у формы!


DOM объект элемента INPUT:

 interface HTMLInputElement : HTMLElement {  attribute DOMString accept;  attribute DOMString alt;  attribute DOMString autocomplete;  attribute boolean autofocus;  attribute boolean defaultChecked;  attribute boolean checked;  attribute DOMString dirName;  attribute boolean disabled;  readonly attribute HTMLFormElement? form;  readonly attribute FileList? files;  attribute DOMString formAction;  attribute DOMString formEnctype;  attribute DOMString formMethod;  attribute boolean formNoValidate;  attribute DOMString formTarget;  attribute unsigned long height;  attribute boolean indeterminate;  readonly attribute HTMLElement? list;  attribute DOMString max;  attribute long maxLength;  attribute DOMString min;  attribute boolean multiple;  attribute DOMString name;  attribute DOMString pattern;  attribute DOMString placeholder;  attribute boolean readOnly;  attribute boolean required;  attribute unsigned long size;  attribute DOMString src;  attribute DOMString step;  attribute DOMString type;  attribute DOMString defaultValue;  attribute DOMString value;  attribute Date? valueAsDate;  attribute double valueAsNumber;  attribute unsigned long width;   void stepUp(optional long n);  void stepDown(optional long n);   readonly attribute boolean willValidate;  readonly attribute ValidityState validity;  readonly attribute DOMString validationMessage;  boolean checkValidity();  void setCustomValidity(DOMString error);   readonly attribute NodeList labels;   void select();  attribute unsigned long selectionStart;  attribute unsigned long selectionEnd;  attribute DOMString selectionDirection;  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction); }; 


htmlweb.ru

// Submit form with id function.  function submit_by_id() {  var name = document.getElementById("name").value;  var email = document.getElementById("email").value;  if (validation()) // Calling validation function  {  document.getElementById("form_id").submit(); //form submission  alert(" Name : " + name + " n Email : " + email + " n Form Id : " + document.getElementById("form_id").getAttribute("id") + "nn Form Submitted Successfully......");  }  }    // Submit form with name function.  function submit_by_name() {  var name = document.getElementById("name").value;  var email = document.getElementById("email").value;  if (validation()) // Calling validation function  {  var x = document.getElementsByName('form_name');  x[0].submit(); //form submission  alert(" Name : " + name + " n Email : " + email + " n Form Name : " + document.getElementById("form_id").getAttribute("name") + "nn Form Submitted Successfully......");  }  }    // Submit form with class function.  function submit_by_class() {  var name = document.getElementById("name").value;  var email = document.getElementById("email").value;  if (validation()) // Calling validation function  {  var x = document.getElementsByClassName("form_class");  x[0].submit(); //form submission  alert(" Name : " + name + " n Email : " + email + " n Form Class : " + document.getElementById("form_id").getAttribute("class") + "nn Form Submitted Successfully......");  }  }    // Submit form with HTML <form> tag function.  function submit_by_tag() {  var name = document.getElementById("name").value;  var email = document.getElementById("email").value;  if (validation()) // Calling validation function  {  var x = document.getElementsByTagName("form");  x[0].submit(); //form submission  alert(" Name : " + name + " n Email : " + email + " n Form Tag : <form>nn Form Submitted Successfully......");  }  }    // Name and Email validation Function.  function validation() {  var name = document.getElementById("name").value;  var email = document.getElementById("email").value;  var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;  if (name === '' || email === '') {  alert("Please fill all fields...!!!!!!");  return false;  } else if (!(email).match(emailReg)) {  alert("Invalid Email...!!!!!!");  return false;  } else {  return true;  }  }

www.formget.com

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, что нормализовало поведение события.

Дополнительно

Событие submit() является лишь сокращением для .on("submit", handler), поэтому убрать установленный обработчик можно с помощью .off( "submit" )

Формы и их дочерние элементы не должны использовать имена ввода или идентификаторы, которые противоречат свойствам формы, таким как submit, length, или method. Конфликты имен могут вызывать сбои.

codernote.ru

CSS выравнивание по центру

1 ) Горизонтальное и вертикальное выравнивание по центру с помощью CSS — 1 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру — по ширине и по высоте. Для более современных браузеров : [ Подробнее ] : [ Открыть страницу-пример ] 2 ) Горизонтальное и вертикальное выравнивание по центру с помощью CSS — 2 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру — по ширине и по высоте. Более консервативный, чем предыдущий вариант. Подходит не только для современных браузеров, но и для более старых. Таких как Internet Explorer 6 или ранние версии Maxthon. При необходимости что-то изменить, требует больше усилий, чем первый способ : [ Подробнее ] : [ Открыть страницу-пример ] 3 ) Горизонтальное выравнивание блока неизвестной ширины Горизонтальное выравнивание блока неизвестной ширины средствами CSS : [ Подробнее ] : [ Открыть страницу-пример ] 4 ) Position: absolute по центру Горизонтальное выравнивание абсолютно позиционированного элемента по центру с помощью CSS : [ Подробнее ] 5 ) Изображение по центру CSS Горизонтальное выравнивание изображения по центру с помощью CSS : [ Подробнее ] 6 ) Вертикальное выравнивание CSS Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения : [ Подробнее ] 7 ) Выравнивание по центру с помощью JavaScript и CSS Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью JavaScript и CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру — по вертикали и по горизонтали : [ Подробнее ] : Два случая : 1. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024×768 : [ Открыть страницу-пример ] 2. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024×768 + курсор мыши наводится на ссылку в одном из элементов содержимого страницы : [ Открыть страницу-пример ]

www.kompx.com


You May Also Like

About the Author: admind

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

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

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

Adblock
detector