Javascript submit form


На днях мне понадобилось реализовать отправку данных формы на сервер (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

Creating and styling the outline of your form

Now in the body section you put two <div>s inside of one another, one with the class="container" attribute and the one inside it with the class="main" attribute. These are purely for styling purposes. The code will look like this:

  <div class="container">   <div class="main">  </div>  </div>  

While the styling for these elements can be found in the submit_javascript.css


file, looking like this:

 div.container{  width: 900px;  height: 610px;  margin:35px auto;  font-family: 'Raleway', sans-serif; } div.main{  width: 300px;  padding: 10px 50px 10px;  border: 2px solid gray;  border-radius: 10px;  font-family: raleway;  float:left;  margin-top:60px; } 

Labels and Inputs

Now inside of the <div class="main"> we put this code:

  <form action="#" method="post" name="form_name" id="form_id" class="form_class" ></form>  

And inside this tag we put the code for the labels and inputs, which should look like this:

  <h2>Javascript Form Submit Example</h2>  <label>Name :</label> <input type="text" name="name" id="name" placeholder="Name" /> <label>Email :</label> <input type="text" name="email" id="email" placeholder="Valid Email" /> 

The inputs should both have the type="text"


attribute, while having names and id respectively "name" and "email". Also we can put the attribute placeholder, though it’s not obligatory.

Buttons

Now it’s time to create the submit buttons, which will be four, as we want to make make the submission once by id, once by class, once by name and once by tag.Here’s the code:

 <input type="button" name="submit_id" id="btn_id" value="Submit by Id" onclick="submit_by_id()"/> <input type="button" name="submit_name" id="btn_name" value="Submit by Name" onclick="submit_by_name()"/> <input type="button" name="submit_class" id="btn_class" value="Submit by Class" onclick="submit_by_class()"/> <input type="button" name="submit_tag" id="btn_tag" value="Submit by Tag" onclick="submit_by_tag()"/> 

You all know the attributes given to the button, except for maybe the onclick attribute. That is the name of the JavaScript function, which tells the button what to do when clicked. With that we finish our job in the index.html file, so we can deal with those functions right now.

JavaScript functions

Every button triggers a different way of behaving for the buttons they’re attributed to, namely the submit the form by class


, id, name, or tag. Also we will put out an alert which will tell us if the e-mail is valid or not. For that we’re going to have a validation function, which will look like this:

 // 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;  } } 

This function gets the name and e-mail and if those are null strings puts out “Please fill all fields……!!!!!!” or if the e-mail does not match the regular email, puts out “Invalid email…..!!!!!!”.

Let’s see first the function submit_by_tag(). The code for it will go like this:

 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......");  } } 

After getting the name and email values and passing them through validation, the function gets the element by tag name and submits them using the submit() function. After that, it puts out an alert saying the name and email entered, the form tag, and a message saying that the form was submitted successfully.

Similar is what we’re going to do with the other three functions, except in them we’re going to get the elements by class, id, or name.

The code below is the submit_by_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......");  } } 

This is the code for submit_by_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......");  } } 

And finally, this is the submit_by_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......");  } } 

Styling the form

And last but not least is styling the form. We have already styled the outer <div>s with the class="container"


and class="main" attributes. Now we’re going to make everything else look as pretty.

First we put this code in the submit_javascript.css file to style the title of the form and the content separator:

 h2{  background-color: #FEFFED;  padding: 30px 35px;  margin: -10px -50px;  text-align:center;  border-radius: 10px 10px 0 0; } hr{  margin: 10px -50px;  border: 0;  border-top: 1px solid #ccc;  margin-bottom: 40px; } 

Now we style the inputs and labels with this CSS bit of code:

 input[type=text]{  width: 100%;  height: 40px;  padding: 5px;  margin-bottom: 25px;  margin-top: 5px;  border: 2px solid #ccc;  color: #4f4f4f;  font-size: 16px;  border-radius: 5px; } label{  color: #464646;  text-shadow: 0 1px 0 #fff;  font-size: 14px;  font-weight: bold; } 

Now let’s get to the buttons.We will style them differently when in standby and when hovered. The following bit of code is their normal standby state:

 #btn_id,#btn_name,#btn_class,#btn_tag{  font-size: 16px;  background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);  border: 1px solid #e5a900;  color: #4E4D4B;  font-weight: bold;  cursor: pointer;  width: 47.5%;  border-radius: 5px;  margin-bottom:10px;  padding: 7px 0; } 

Meanwhile the code for the buttons when hovered is this:

 #btn_id:hover,#btn_name:hover,#btn_class:hover,#btn_tag:hover{  background: linear-gradient(#ffdd7f 5%, #ffbc00 100%); } 

And with this we’re set. The form will look like this:

Download the source code


This was an example of form submission using JavaScript.

www.webcodegeeks.com

The Submit Method

The syntax for the submit () method is:

document.forms[“nameofform”].submit();

The method must be called from within a function in your html program. You also need to assign an id to the form before the browser can recognize it. You can do this by assigning an ID attribute from within the form tab:

<form id='nameofform' action='formmail.pl'>

The submit() method can be called when a user clicks on a hyperlink, which is the most common, or an image. Let’s take a look at the code for both these scenarios:

Submitting a Form by Clicking on the Hyperlink

You can use the following code to submit a form when a hyperlink is clicked:

<script type="text/javascript"> function submitform() { document.forms["nameofform"].submit(); } </script> <form id="nameofform" action="submit-form.php"> Search: <input type='text' name='query'> <a href="javascript: submitform()">Submit</a> </form>

The above code will bring up a form with a single field called “Query” and a blank text box next to it. There will also be a submit hyperlink button which you can click to submit the data you enter in the blank text box.

Instead of a Hyperlink, you can use a clickable submit button (this is what most users are used to). To make a clickable submit button, remove the code that inserts the hyperlink “Submit” and replace it with the submit button:

<input type="submit" name="submitbutton" value="Submit" />

Here, the name is the identification tag that will be assigned to the submit button. The value field is the name that you want to appear on your button. You can make your “submit” button a go button by changing the value to “go”.

If you want the submit button to accept the data from your form, you can use the following line of code:

<form name="nameofform" action="html_form_action.asp" method="get"> First Name: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

This will allow the browser to fetch the data you have entered in the “first name” field in your form.

Submitting a Form by Clicking on the Form Submit Button

You can also use an image to accept the submission of data. You need to have an image you can use with you first. You will need to define the attributes of the image (height and width) before you can use it as the submit button.

The code to make an image the submit button is as follows:

<form name="nameofform" action="submit-form.ph"> Query: <input type='text' name='query'/> <input type="image" src="image.gif"/> </form>

Here, the “image.gif” will be the name of the image that will be present on the system. You can modify the attributes of the images with the following line of code:

<img src="image.gif" width="30" height="20" border="0" />

You may need to play around with the attributes a little before the image looks small enough to be a submit button.

blog.udemy.com

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

Сейчас мы поговорим о различных приемах работы сценариев 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">  <script><!--  function btnClick()  {  if(document.Test1.Sex[0].checked){  document.Test1.Sex[1].click();  }else{  document.Test1.Sex[0].click();  }  }  //-->  </script> </head> <body> <H1>Метод click группы переключателей</H1> <FORM NAME="Test1">  <INPUT TYPE="RADIO" NAME="Sex" VALUE ="Man" CHECKED>Мужской  <INPUT TYPE="RADIO" NAME="Sex" VALUE ="Woman">Женский  <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="this.value=this.value.toUpperCase()"></TD></TR>  <TR><TD><B>Имя:<B></TD>  <TD><INPUT NAME="Name" SIZE=20  onBlur="this.value=this.value.toUpperCase()"></TD></TR>  <TR><TD><B>Возраст:<B></TD>  <TD><INPUT NAME="Age" SIZE=3 VALUE="18"  onBlur="this.value=CheckAge(this.value)"  onFocus="this.select()"></TD></TR>  <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

Отправка данных формы происходит по нажатию на кнопку Submit. Часто при этом возникает задача проверить вначале данные на корректность и только в случае их правильности отсылать на сервер. В противном случае, следует вывести предупреждение об ошибке и вернуться к редактированию. Такая тактика называется «защита от дурака» и она не позволяет вводить заведомо неверные данные. Например, вы хотите от посетителя обязательно получить адрес электронной почты. Тогда во введенной строке должен содержаться символ @, который однозначно определяет, что это именно адрес, а не что иное, и не какой-нибудь адрес, а именно электронный. Также не должно быть пробелов и других недопустимых символов вроде русских букв. Только после того, как скрипт все проверит и даст добро, форму можно отправлять на сервер.

Для «ручной» отправки формы на сервер существует метод submit. Его использование таково (пример 1).

Пример 1. Использование метода submit

document.forms["имя формы"].submit() или
document.forms.имя формы.submit()

Проверку данных лучше всего оформить в виде отдельной функции и обращаться к ней при необходимости (пример 2). В данном случае создается функция validForm, которая проверяет, чтобы введенное в текстовом поле значение было больше нуля, но меньше десяти. При вводе текста или иного числа выводится предупреждение, сами данные формы отправляются только при корректно заданном числе.

Пример 2. Проверка данных формы

<html>
<body>
<head>
<script language="JavaScript">

function validForm(f) {
d = parseInt(f.num.value); // Преобразуем в целое число
if(!d || d < 1 || d > 10) alert("Что-то неправильно введено") // Выводим предупреждение
else f.submit() // Отправляем на сервер
}

</script>
</head>

<body>

<form action=/cgi-bin/add.cgi onSubmit="validForm(this); return false">

Введите число от 1 до 10<br>
<input type=text name=num>

<input type=submit value="Отправить">
</form>

</body>
</html>

В примере отправка данных происходит только после выполнения нашей собственной функции validForm. Чтобы не обращаться к форме через семейство forms, можно передать в качестве параметра ключевое слово this. Это гораздо короче и удобней, в самой функции теперь достаточно использовать f.submit() для отправки, где f — аргумент функции, указывающий на форму. Строку «return false» при вызове события onSubmit добавить надо обязательно. Она отвечает за то, чтобы данные не отправлялись на сервер после завершения работы функции validForm.


Еще один способ отправки данных формы на сервер с предварительной их проверкой заключается в использовании события onClick. В форму добавляется обычная кнопка, на которую это событие и <навешиваем> (пример 3).

Пример 3. Использование события onClick

<html>
<body>
<head>
<script language="JavaScript">

function validForm(f) {
d = parseInt(f.num.value); // Преобразуем в целое число
if(!d || d < 1 || d > 10) alert("Что-то неправильно введено") // Выводим предупреждение
else f.submit() // Отправляем на сервер
}

</script>
</head>

<body>

<form action=/cgi-bin/add.cgi onSubmit="return false">

Введите число от 1 до 10<br>
<input type=text name=num>

<input type=button value="Отправить" onClick="validForm(this.form)">
</form>

</body>
</html>

Событие onSubmit, которое указано в теге FORM вроде и не нужно, но оно выполняет определенную задачу. Данные формы можно отправить на сервер и нажатием на кнопку Enter клавиатуры, когда фокус находится на элементе формы. Тогда происходит отправка на сервер, минуя наше событие onClick и соответственно проверку данных. Чтобы это не случилось, добавляем строку onSubmit="return false".

После получения введенного в текстовом поле значения, идет проверка на то, что это число и что оно меньше десяти, но больше нуля. Только в этом случае запускается метод submit. Обратите внимание, в данном случае аргументом функции validForm служит ключевое слово this.form, а не this, как в примере 2.

www.i2r.ru

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


You May Also Like

About the Author: admind

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

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

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