Javascript get form input type

Get HTML Form Data In Javascript (Simple Examples)

Welcome to a quick tutorial on how to get the HTML form data in Javascript. So you have an HTML form but want to do the processing in Javascript instead?

1. Create the HTML form as usual – Give the form an ID, and attach a name to the input fields.
   • Create a form data object, and feed the HTML form in as a parameter.
     • var form = document.getElementById(«demo»);
     • var data = new FormData(form);
   • Lastly, manually append more keys/values if required – data.append(«KEY», «VALUE»);

That covers the quick basics, but read on for more examples!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

JAVASCRIPT GET FORM DATA

All right, let us now get into the examples of how to get the form data in Javascript.

EXAMPLE 1) GET FORM DATA & AJAX POST

1. Create the HTML as usual.
2. Create a new FormData(HTML FORM) object, and submit it to the server “as usual”.

EXAMPLE 2) GET FORM DATA & URL PARAMS

• (A & B1) The “usual HTML form” and create var data = new FormData(HTML FORM) .
• (B2) Then, “convert” into var params = new URLSearchParams(data) .
• (B3) Attach the parameters to the end of the URL – «http://site.com?» + params.toString() , and submit the form.

EXAMPLE 3) MORE FORM DATA

• (A) Take note that the HTML form now has a “custom widget”.
• (B1) Since the “custom widget” is not the usual , var data = new FormData(FORM) will not automatically adapt data from it.
• (B2) To “fix” that, we can use data.append(«KEY», «VALUE») to manually add more data entries.
• (B3) Now, the FormData object is not some “black hole”. You put data in and have no idea what’s inside.
  • get(KEY) Returns the value of the specified KEY .
  • has(KEY) Checks if the dataset contains KEY .
  • key() Return all the keys in an array.
  • values() Return all the values in an array.
  • entries() Returns all the keys and values in an array.

  DOWNLOAD & NOTES

  Here is the download link to the example code, so you don’t have to copy-paste everything.

  SUPPORT

  600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

  EXAMPLE CODE DOWNLOAD

  Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

  EXTRA BITS & LINKS

  That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

  LINKS & REFERENCES

  INFOGRAPHIC CHEAT SHEET

  

  THE END

  Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

  Leave a Comment Cancel Reply

  Search

  Breakthrough Javascript

  

  Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

  Socials

  About Me

  

  W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

  Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

  Источник

  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