Javascript document forms form name

So far, we have described a number of different topics, and now it’s time for an article about forms in JavaScript.

Forms, especially in combination with CSS and JavaScript, are providing a strong foundation for development of UI elements to interact with the user.

Forms in JavaScript

Handling forms in JavaScript from scratch.

The form markup and document.form(s):

Access to the form object:

Access to the field (element):

document.form[0].elements["el1"]; // another way document.test.el1;

Being inside of a form we can pass it to a function by this.form.

The checkbox input

Example — handling checkbox field type:

alert(document.forms.myform.cb.checked); // or document.forms.myform.elements["cb"].checked ? "yes" : "no";

Radio buttons

var f = document.forms.myform; var btn = f.elements["radio"][0];

We get an access to btn.value and btn.checked.

The radio1 property of this form points to a list of all the fields in the radio1 group, so the reference will look like this:

document.forms.myform1.radio1.length;

For each item in this group can be referenced using square brackets, e.g.:

document.forms.myform1.radio1[0]; // or through the item() method: var f1 = document.forms.myform1; f1.radio1.item(0);

So if you need to find out if the first field (index = 0) in the radio1 group in myform1 form is marked, you should write:

document.forms.myform1.radio1[0].checked // or document.forms.myform1.radio1.item(0).checked

Value — get and set value.

In general the case is simple: the value of fields can be obtained using .value property, for example:
document.forms[0].elements[1].value.

In a similar way, we can set (dynamically change) the value for the form field.

Example — setting the value of a form field in JavaScript:

document.forms['myform1'].username.value = 'John';

Selection list

Following code gives index of selected item, or -1 if nothing selected:

var f = document.forms.myform; var i = f.elements["list1"].selectedIndex;

We get access to properties: value , text (the text), and options (an array).

Example — another way:

var x_s = document.forms.NameOfForm.myListName.selectedIndex; alert(x_s);

References to selection lists can be written in various formats:

document.forms.registerForm.elements["birthday[day]"].selectedIndex;

In modern browsers there is a shortcut to selected item:

var f = document.forms.myform; f.elements["myList"].value;

However, for maximum compatibility it is best to write:

f.elemetns["myList"].options[f.elements["myList"].selectedIndex].value;

The textarea

To the textarea type field called text1, we refer using the code:

document.forms.myform1.text1.value;

Disabled i readOnly

Objects representing the elements of the form (e.g. “text” input), can be turned off or set to “read only”, so that their modification would be impossible.

Setting disabled = true turns off this field, but also changes its appearance. This can be avoided by using the readOnly attribute.

More about form objects

The total number of forms (in the document) is obtained by reading the property length:

var number_of_forms = document.forms.length;

An access to particular forms:

document.forms["form_name"] // or document.forms.form_name // or document.forms[form_index]

Properties of the Form object

– elements – an array containing elements of the form,

– length – a number of form elements,

– name – a value of the attribute name (form name),

– acceptCharset – attribute accept-charset, the list of supported code pages,

– action – value of the action parameter, specify where you want to send data from a form,

– enctype – the method of encoding data for the POST method,

– method – mode of sending data to the server,

– target – a value for target parameter, e.g. determine the frame to which you want to send data.

Methods

– reset() – resets the values of form fields,

– submit() – sends the form.

Events

onreset – when the Reset button is pressed,

onsubmit – when the Submit button is pressed (send form).

Summary

That’s all when it comes to the basic processing of the form fields of various type in JavaScript, and the extraction of values.

In the near future we will describe support for forms using JS frameworks and excellent HTML5 forms.

Posted in JavaScript, Practice, Tips, Tutorials Tags: cross-browser, document, event, events, examples, forms, JavaScript, Object Oriented Programming, objects, OOP, UI

Basics of AJAX

JavaScript Frameworks — foreword

A few words about blog

Welcome to the javascript-html5-tutorial.com — a blog aimed at sharing knowledge about JavaScript, AJAX, HTML5 and related. We wanted to create the place, where you can find as many as possible topics related to JavaScript programming, including modern aspects of this language.

.forms

Возвращает живую коллекцию всех форм, которые есть на странице.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

forms — это поле объекта document . Оно хранит коллекцию всех элементов , которые есть на текущей странице.

Коллекция доступна только для чтения.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Вызывается обращением к свойству объекта document . Так можно получить коллекцию всех форм:

 const collection = document.forms const collection = document.forms

Как пользоваться

Скопировать ссылку «Как пользоваться» Скопировано

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

   Промокод   .  Почта   .  Ваш номер    form> label for="promocode">Промокодlabel> input id="promocode" type="text" name="promocode" placeholder="WIN-1234" required> button type="submit">Применитьbutton> form> . form id="subscriptionFormId"> label for="email">Почтаlabel> input id="email" type="email" name="email" placeholder="email@example.com" required> button type="submit">Подписатьсяbutton> form> . form id="loginFormId" name="loginFormName"> label for="phone">Ваш номерlabel> input id="phone" type="tel" name="phone" placeholder="776-2323" required> button type="submit">Отправить код подтвержденияbutton> form>

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

Формы, у которых указаны атрибуты id или name , можно получить по значениям этих атрибутов. В остальных случаях получить форму можно по индексу, который совпадает с порядком описания форм на странице.

Доступ к формам

Скопировать ссылку «Доступ к формам» Скопировано

Первая форма в примере выше не имеет атрибутов. Единственный способ обращения к ней — через её индекс в коллекции:

 document.forms[0] document.forms[0]

У второй формы задан атрибут id , а значит, обращаться можно и по значению атрибута, и по индексу:

 document.forms['subscriptionFormId']document.forms.subscriptionFormIddocument.forms[1] document.forms['subscriptionFormId'] document.forms.subscriptionFormId document.forms[1]

Третья форма содержит как атрибут id , так и name . У нас появляется возможность получить форму ещё и по имени, указанному в атрибуте name :

 // По имени:document.forms['loginFormName']document.forms.loginFormName // По id:document.forms['loginFormId']document.forms.loginFormId // По индексу:document.forms[2] // По имени: document.forms['loginFormName'] document.forms.loginFormName // По id: document.forms['loginFormId'] document.forms.loginFormId // По индексу: document.forms[2]

Атрибуты имени и идентификатора не конфликтуют, позволяя обращаться к форме и так, и так.

В случае, если элементов на странице нет, коллекция будет доступной, но пустой. Её длина будет равна нулю.

По аналогии со свойством length у массивов, можно получить общее количество форм на странице, запросив значение длины коллекции:

 document.forms.length document.forms.length

Взаимодействие с полями

Скопировать ссылку «Взаимодействие с полями» Скопировано

Элементы коллекции document . forms имеют тип HTML Form Element и фактически являются ссылками на соответствующие элементы форм на странице.

Например, чтобы получить номер телефона в форме логина, мы напишем:

 const phone = document.forms.loginFormName.phone.value const phone = document.forms.loginFormName.phone.value

Выключим кнопку отправки для промокода:

 document.forms[0].querySelector('[type="submit"]').disabled = true document.forms[0].querySelector('[type="submit"]').disabled = true

Или даже вызовем интерактивную валидацию формы подписки:

 document.forms.subscriptionFormId.reportValidity() document.forms.subscriptionFormId.reportValidity()

Другими словами, работа с формой и её полями в этом случае ничем не отличается от взаимодействия с DOM-элементом формы, запрошенным по селектору.

Читайте подробнее об этом в статье «Работа с формами».

Как понять

Скопировать ссылку «Как понять» Скопировано

Все элементы на странице отслеживаются браузером в реальном времени и доступны в специальном поле объекта document . В любой момент, из любого нашего скрипта, независимо от контекста.

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

Так как свойство form возвращает коллекцию, то можно пройтись по всем формам циклом. Это может быть полезно для глобальных операций на странице. Например, для сбора аналитики или отключения отправки форм из-за потери связи с сервером.

Ещё один плюсик в копилку использования тега 🙂

На практике

Скопировать ссылку «На практике» Скопировано

Владислав Чичужко советует

Скопировать ссылку «Владислав Чичужко советует» Скопировано

🛠 По коллекции можно пройтись методами, предусмотренными для массивов, но сперва необходимо обернуть её в метод Array . from ( ) или использовать цикл for . . . of :

 Array.from(document.forms).forEach((form) =>  console.log(form)>) for (const form of document.forms)  console.log(form)> Array.from(document.forms).forEach((form) =>  console.log(form) >) for (const form of document.forms)  console.log(form) >

🛠 Формы, которым задан атрибут name , также попадают и в сам объект document . К ним можно обращаться напрямую, в обход коллекции document . forms :

 document.myFormName document.myFormName

Источник

Javascript document forms form name