Javascript getting values from form

Как получить данные из формы js

Чтобы получить данные из формы, можно воспользоваться объектом FormData . Этот объект содержит метод get() , с помощью которого можно извлечь данные по имени.

 id="form1">  type="text" name="name" value="John">  type="text" name="surname" value="Smith">  type="submit">  

Для получения данных, навешивается обработчик отправки формы и внутри него извлекаются данные:

const formElement = document.getElementById('form1'); // извлекаем элемент формы formElement.addEventListener('submit', (e) =>  e.preventDefault(); const formData = new FormData(formElement); // создаём объект FormData, передаём в него элемент формы // теперь можно извлечь данные const name = formData.get('name'); // 'John' const surname = formData.get('surname'); // 'Smith' >); 

Источник

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.

  Источник

  Читайте также:  Как открывать приложение через python