Get submitted form values in javascript

FormData

В этой главе речь пойдёт об отправке HTML-форм: с файлами и без, с дополнительными полями и так далее. Объекты FormData помогут нам с этим. Как вы, наверняка, догадались по его названию, это объект, представляющий данные HTML формы.

let formData = new FormData([form]);

Если передать в конструктор элемент HTML-формы form , то создаваемый объект автоматически прочитает из неё поля.

Его особенность заключается в том, что методы для работы с сетью, например fetch , позволяют указать объект FormData в свойстве тела запроса body .

Он будет соответствующим образом закодирован и отправлен с заголовком Content-Type: multipart/form-data .

То есть, для сервера это выглядит как обычная отправка формы.

Отправка простой формы

Давайте сначала отправим простую форму.

Как вы видите, код очень компактный:

В этом примере серверный код не представлен, он за рамками этой статьи, он принимает POST-запрос с данными формы и отвечает сообщением «Пользователь сохранён».

Методы объекта FormData

С помощью указанных ниже методов мы можем изменять поля в объекте FormData :

• formData.append(name, value) – добавляет к объекту поле с именем name и значением value ,
• formData.append(name, blob, fileName) – добавляет поле, как будто в форме имеется элемент , третий аргумент fileName устанавливает имя файла (не имя поля формы), как будто это имя из файловой системы пользователя,
• formData.delete(name) – удаляет поле с заданным именем name ,
• formData.get(name) – получает значение поля с именем name ,
• formData.has(name) – если существует поле с именем name , то возвращает true , иначе false

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

Ещё существует метод set , его синтаксис такой же, как у append . Разница в том, что .set удаляет все уже имеющиеся поля с именем name и только затем добавляет новое. То есть этот метод гарантирует, что будет существовать только одно поле с именем name , в остальном он аналогичен .append :

Поля объекта formData можно перебирать, используя цикл for..of :

let formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Список пар ключ/значение for(let [name, value] of formData) < alert(`$= $`); // key1=value1, потом key2=value2 >

Отправка формы с файлом

Объекты FormData всегда отсылаются с заголовком Content-Type: multipart/form-data , этот способ кодировки позволяет отсылать файлы. Таким образом, поля тоже отправляются, как это и происходит в случае обычной формы.

 Картинка:   

Отправка формы с Blob-данными

Ранее в главе Fetch мы видели, что очень легко отправить динамически сгенерированные бинарные данные в формате Blob . Мы можем явно передать её в параметр body запроса fetch .

Но на практике бывает удобнее отправлять изображение не отдельно, а в составе формы, добавив дополнительные поля для имени и другие метаданные.

Кроме того, серверы часто настроены на приём именно форм, а не просто бинарных данных.

В примере ниже посылается изображение из и ещё несколько полей, как форма, используя FormData :

Пожалуйста, обратите внимание на то, как добавляется изображение Blob :

formData.append("image", imageBlob, "image.png");

Это как если бы в форме был элемент и пользователь прикрепил бы файл с именем «image.png» (3-й аргумент) и данными imageBlob (2-й аргумент) из своей файловой системы.

Сервер прочитает и данные и файл, точно так же, как если бы это была обычная отправка формы.

Итого

Объекты FormData используются, чтобы взять данные из HTML-формы и отправить их с помощью fetch или другого метода для работы с сетью.

Мы можем создать такой объект уже с данными, передав в конструктор HTML-форму – new FormData(form) , или же можно создать объект вообще без формы и затем добавить к нему поля с помощью методов:

• formData.append(name, value)
• formData.append(name, blob, fileName)
• formData.set(name, value)
• formData.set(name, blob, fileName)

1. Метод set удаляет предыдущие поля с таким же именем, а append – нет. В этом их единственное отличие.
2. Чтобы послать файл, нужно использовать синтаксис с тремя аргументами, в качестве третьего как раз указывается имя файла, которое обычно, при , берётся из файловой системы.

Источник

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.

  Источник

  How to Get HTML Form Fields on Submit Event in JavaScript?

  Let’s suppose you have the following HTML element:

  To get any field by its name or index (when a submit event is triggered), you can do any of the following:

  Accessing Form Fields via HTMLFormElement.elements on Submit Event

  When a submit event handler is attached to a element, event.target refers to the element itself. Therefore, you can access form fields by using their name or index on the HTMLFormElement.elements object (or the event.target.elements object in this case), for example, like so:

  This works because the HTMLFormElement.elements property actually returns an HTMLFormControlsCollection object, which allows accessing of all the form fields contained within the element by using the element’s name and/or index.

  The HTMLFormControlsCollection object also has the following methods for accessing form fields:

  • HTMLFormControlsCollection.namedItem(name) (or HTMLFormElement.elements.namedItem(name) );
  • HTMLFormControlsCollection.item(index) (or HTMLFormElement.elements.item(index) ).

  The main difference between the two — i.e. accessing the form fields directly on the HTMLFormControlsCollection object versus doing so via the above-mentioned methods — is the fact that the former would return undefined if the element doesn’t exist, while the latter would return null .

  Therefore, as an alternative, you can also access form fields via these methods as shown below:

  Directly Accessing Form Fields on Submit Event

  When a submit event handler is attached to a element, event.target refers to the element itself. Therefore, you can directly access the form fields by using their name or index directly on the event.target object, for example, like so:

  This might not be the best approach as properties can get mixed up with other attributes specified on the element. Instead, using form.elements property might be a better approach as it only returns the form fields contained within the element.

  Hope you found this post useful. It was published 14 Sep, 2022 . Please show your love and support by sharing this post.

  Источник

  Читайте также:  Python console color text