Javascript get element by name form

HTMLFormElement

This interface also inherits properties from its parent, HTMLElement . HTMLFormElement.elements Read only A HTMLFormControlsCollection holding all form controls belonging to this form element. HTMLFormElement.length Read only A long reflecting the number of controls in the form. HTMLFormElement.name A string reflecting the value of the form’s name HTML attribute, containing the name of the form. HTMLFormElement.method A string reflecting the value of the form’s method HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set. HTMLFormElement.target A string reflecting the value of the form’s target HTML attribute, indicating where to display the results received from submitting the form. HTMLFormElement.action A string reflecting the value of the form’s action HTML attribute, containing the URI of a program that processes the information submitted by the form. HTMLFormElement.encoding or HTMLFormElement.enctype A string reflecting the value of the form’s enctype HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two properties are synonyms. HTMLFormElement.acceptCharset A string reflecting the value of the form’s accept-charset HTML attribute, representing the character encoding that the server accepts. HTMLFormElement.autocomplete A string reflecting the value of the form’s autocomplete HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser. HTMLFormElement.noValidate A boolean value reflecting the value of the form’s novalidate HTML attribute, indicating whether the form should not be validated. Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (e.g. a form with an input named action will have its action property return that input instead of the form’s action HTML attribute).

Instance methods

This interface also inherits methods from its parent, HTMLElement . checkValidity() Returns true if the element’s child controls are subject to constraint validation and satisfy those constraints; returns false if some controls do not satisfy their constraints. Fires an event named invalid at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false . reportValidity() Returns true if the element’s child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user. requestSubmit() Requests that the form be submitted using the specified submit button and its corresponding configuration. reset() Resets the form to its initial state. submit() Submits the form to the server.

Deprecated methods

HTMLFormElement.requestAutocomplete() Deprecated Triggers a native browser interface to assist the user in completing the fields which have an autofill field name value that is not off or on . The form will receive an event once the user has finished with the interface, the event will either be autocomplete when the fields have been filled or autocompleteerror when there was a problem.

Events

Listen to these events using addEventListener() , or by assigning an event listener to the oneventname property of this interface. formdata The formdata event fires after the entry list representing the form’s data is constructed. reset The reset event fires when a form is reset. submit The submit event fires when a form is submitted.

Usage notes

Obtaining a form element object

To obtain an HTMLFormElement object, you can use a CSS selector with querySelector() , or you can get a list of all of the forms in the document using its forms property. Document.forms returns an array of HTMLFormElement objects listing each of the forms on the page. You can then use any of the following syntaxes to get an individual form: document.forms[index] Returns the form at the specified index into the array of forms. document.forms[id] Returns the form whose ID is id . document.forms[name] Returns the form whose name attribute’s value is name .

Accessing the form’s elements

You can access the list of the form’s data-containing elements by examining the form’s elements property. This returns an HTMLFormControlsCollection listing all of the form’s user data entry elements, both those which are descendants of the and those which are made members of the form using their form attributes. You can also get the form’s element by using its name attribute as a key of the form , but using elements is a better approach—it contains only the form’s elements, and it cannot be mixed with other attributes of the form .

Issues with Naming Elements

• will take precedence over . This means that form.id will not refer to the form’s id, but to the element whose name is » id «. This will be the case with any other form properties, such as or .
• will render the form’s elements collection inaccessible. The reference form.elements will now refer to the individual element.

To avoid such problems with element names:

• Always use the elements collection to avoid ambiguity between an element name and a form property.
• Never use » elements » as an element name.

If you are not using JavaScript, this will not cause a problem.

Elements that are considered form controls

The elements included by HTMLFormElement.elements and HTMLFormElement.length are the following:

No other elements are included in the list returned by elements , which makes it an excellent way to get at the elements most important when processing forms.

Examples

Creating a new form element, modifying its attributes, then submitting it:

const f = document.createElement("form"); // Create a form document.body.appendChild(f); // Add it to the document body f.action = "/cgi-bin/some.cgi"; // Add action and method attributes f.method = "POST"; f.submit(); // Call the form's submit() method 

Extract information from a element and set some of its attributes:

form name="formA" action="/cgi-bin/test" method="post"> p>Press "Info" for form details, or "Set" to change those details.p> p> button type="button" onclick="getFormInfo();">Infobutton> button type="button" onclick="setFormInfo(this.form);">Setbutton> button type="reset">Resetbutton> p> textarea id="form-info" rows="15" cols="20">textarea> form> script> function getFormInfo()  // Get a reference to the form via its name const f = document.forms["formA"]; // The form properties we're interested in const properties = [ "elements", "length", "name", "charset", "action", "acceptCharset", "action", "enctype", "method", "target", ]; // Iterate over the properties, turning them into a string that we can display to the user const info = properties .map((property) => `$property>: $f[property]>`) .join("\n"); // Set the form's to display the form's properties document.forms["formA"].elements["form-info"].value = info; // document.forms["formA"]['form-info'].value would also work > function setFormInfo(f)  // Argument should be a form element reference. f.action = "a-different-url.cgi"; f.name = "a-different-name"; > script> 

Submit a into a new window:

doctype html> html lang="en-US"> head> meta charset="utf-8" /> title>Example new-window form submissiontitle> head> body> form action="test.php" target="_blank"> p> label>First name: input type="text" name="firstname" />label> p> p> label>Last name: input type="text" name="lastname" />label> p> p> label>input type="password" name="pwd" />label> p> fieldset> legend>Pet preferencelegend> p> label>input type="radio" name="pet" value="cat" /> Catlabel> p> p> label>input type="radio" name="pet" value="dog" /> Doglabel> p> fieldset> fieldset> legend>Owned vehicleslegend> p> label >input type="checkbox" name="vehicle" value="Bike" />I have a bikelabel > p> p> label >input type="checkbox" name="vehicle" value="Car" />I have a carlabel > p> fieldset> p>button>Submitbutton>p> form> body> html> 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Источник

HTML DOM Document getElementsByName()

The getElementsByName() method returns a collection of elements with a specified name.

The getElementsByName() method returns a live NodeList.

NodeList

A NodeList is an array-like collection (list) of nodes.

The nodes in the list can be accessed by index. The index starts at 0.

The length Poperty returns the number of nodes in the list.

See Also:

Syntax

Parameters

Return Value

Type	Description
Object	A NodeList Object. A collection of elements with the specified name. The elements are sorted as they appear in the document.

More Examples

Check all elements with type=»checkbox» that have the name «animal»:

const collection = document.getElementsByName(«animal»);
for (let i = 0; i < collection.length; i++) if (collection[i].type == "checkbox") collection[i].checked = true;
>
>

Browser Support

document.getElementsByName() is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник