To get the HTML form data in Javascript:<\/p>\n
- \n
- Create the HTML form as usual – Give the form an ID, and attach a name to the input fields.\n
- \n
<form id=\"demo\"><\/code><\/li>\n<input name=\"name\"><\/code><\/li>\n<\/ul>\n<\/li>\n- Create a form data object, and feed the HTML form in as a parameter.\n
- \n
var form = document.getElementById(\"demo\");<\/code><\/li>\nvar data = new FormData(form);<\/code><\/li>\n<\/ul>\n<\/li>\n- Lastly, manually append more keys\/values if required –
data.append(\"KEY\", \"VALUE\");<\/code><\/li>\n<\/ol>\n<\/div>\nThat covers the quick basics, but read on for more examples!<\/p>\n
<\/p>\n
<\/div>\n<\/p>\n
TLDR – QUICK SLIDES<\/h2>\n
[web_stories_embed url=”https:\/\/code-boxx.com\/web-stories\/how-to-get-html-form-data-in-javascript\/” title=”How To Get HTML Form Data In Javascript” poster=”https:\/\/code-boxx.com\/wp-content\/uploads\/2021\/11\/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]<\/p>\n
Fullscreen Mode – Click Here<\/a><\/p>\n
<\/p>\n
TABLE OF CONTENTS<\/h2>\n
\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-file-text.svg\")
JS Get Form Data<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-download.svg\")
Download & Notes<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-plus-square.svg\")
Extra Bits & Links<\/a><\/div>\n![](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-thumbs-up.svg\")
The End<\/a><\/div>\n<\/div>\n<\/p>\n
<\/div>\n<\/p>\n
\nJAVASCRIPT GET FORM DATA<\/h2>\n
<\/p>\nAll right, let us now get into the examples of how to get the form data in Javascript.<\/p>\n<\/div>\n
<\/p>\n
EXAMPLE 1) GET FORM DATA & AJAX POST<\/span><\/h3>\n
1-basic-post.html<\/div>\n<!-- (A) HTML FORM -->\r\n<form id=\"demoA\" onsubmit=\"return doForm()\">\r\n <input type=\"text\" name=\"name\" required value=\"Jon Doe\">\r\n <input type=\"email\" name=\"email\" required value=\"jon@doe.com\">\r\n <input type=\"submit\" value=\"Go!\">\r\n<\/form>\r\n \r\n<!-- (B) JS PROCESSING -->\r\n<script>\r\nfunction doForm () {\r\n \/\/ (B1) FORM DATA - AUTO GET ALL FIELDS FROM \"#DEMOA\"\r\n var data = new FormData(document.getElementById(\"demoA\"));\r\n\r\n \/\/ (B2) AJAX FETCH\r\n fetch(\"SERVER-SCRIPT\", { method:\"post\", body:data })\r\n .then(res => res.text())\r\n .then(txt => console.log(txt))\r\n .catch(err => console.error(err));\r\n \r\n \/\/ (B3) PREVENT DEFAULT FORM SUBMIT\r\n return false;\r\n}\r\n<\/script><\/code><\/pre>\nThis is the “complete example” of the above introduction snippet. All we need is to:<\/p>\n
- \n
- Create the HTML
<form><\/code> as usual.<\/li>\n- Create a
new FormData(HTML FORM)<\/code> object, and submit it to the server “as usual”.<\/li>\n<\/ol>\n<\/p>\n
<\/div>\n<\/p>\n
EXAMPLE 2) GET FORM DATA & URL PARAMS<\/span><\/h3>\n
2-basic-params.html<\/div>\n<!-- (A) HTML FORM -->\r\n<form id=\"demoB\" onsubmit=\"return doForm()\">\r\n <input type=\"text\" name=\"name\" required value=\"Joe Doe\">\r\n <input type=\"email\" name=\"email\" required value=\"joe@doe.com\">\r\n <input type=\"submit\" value=\"Go!\">\r\n<\/form>\r\n \r\n<!-- (B) JS PROCESSING -->\r\n<script>\r\nfunction doForm () {\r\n \/\/ (B1) FORM DATA - AUTO GET ALL FIELDS FROM \"#DEMOB\"\r\n var data = new FormData(document.getElementById(\"demoB\"));\r\n \r\n \/\/ (B2) TO URL PARAMS\r\n var params = new URLSearchParams(data).toString();\r\n \r\n \/\/ (B3) AJAX FETCH\r\n fetch(\"SERVER-SCRIPT?\" + params)\r\n .then(res => res.text())\r\n .then(txt => console.log(txt))\r\n .catch(err => console.error(err));\r\n\r\n \/\/ (B4) OR REDIRECT - MIGHT AS WELL JUST SUBMIT THE FORM?\r\n \/\/ location.href = \"SERVER-SCRIPT?\" + params;\r\n \r\n \/\/ (B5) PREVENT DEFAULT FORM SUBMIT\r\n return false;\r\n}\r\n<\/script><\/code><\/pre>\nThis is an alternative for the folks who want to do
GET<\/code> instead ofPOST<\/code> –<\/p>\n- \n
- (A & B1)<\/strong> The “usual HTML form” and create
var data = new FormData(HTML FORM)<\/code>.<\/li>\n- (B2)<\/strong> Then, “convert” into
var params = new URLSearchParams(data)<\/code>.<\/li>\n- (B3)<\/strong> Attach the parameters to the end of the URL –
\"http:\/\/site.com?\" + params.toString()<\/code>, and submit the form.<\/li>\n<\/ul>\n<\/p>\n
<\/div>\n<\/p>\n
EXAMPLE 3) MORE FORM DATA<\/span><\/h3>\n
3-append-more.html<\/div>\n<!-- (A) HTML FORM -->\r\n<form id=\"demoC\" onsubmit=\"return doForm()\">\r\n <input type=\"text\" name=\"name\" required value=\"Joy Doe\">\r\n <input type=\"email\" name=\"email\" required value=\"joy@doe.com\">\r\n <div id=\"birthday\">12 Mar 2077<\/div>\r\n <input type=\"submit\" value=\"Go!\">\r\n<\/form>\r\n \r\n<!-- (B) JS PROCESSING -->\r\n<script>\r\nfunction doForm () {\r\n \/\/ (B1) FORM DATA - AUTO GET ALL FIELDS FROM \"#DEMOC\"\r\n var data = new FormData(document.getElementById(\"demoC\"));\r\n \r\n \/\/ (B2) MANUALLY APPEND MORE\r\n data.append(\"birthday\", document.getElementById(\"birthday\").innerText);\r\n data.append(\"gender\", \"female\");\r\n data.append(\"key\", \"value\");\r\n \r\n \/\/ (B3) FORM DATA YOGA\r\n data.delete(\"key\");\r\n var name = data.get(\"name\"); \/\/ Joy Doe\r\n var hasEmail = data.has(\"email\"); \/\/ true\r\n for (let k of data.keys()) { console.log(k); }\r\n for (let v of data.values()) { console.log(v); }\r\n for (let [k, v] of data.entries()) { console.log(k, v); }\r\n \r\n \/\/ (B4) PREVENT DEFAULT FORM SUBMIT\r\n return false;\r\n}\r\n<\/script><\/code><\/pre>\nOne last example to address a few common concerns.<\/p>\n
- \n
- (A)<\/strong> Take note that the HTML form now has a “custom
<div id=\"birthday\"><\/code> widget”.<\/li>\n- (B1)<\/strong> Since the “custom widget” is not the usual
<input><\/code>,var data = new FormData(FORM)<\/code> will not automatically adapt data from it.<\/li>\n- (B2)<\/strong> To “fix” that, we can use
data.append(\"KEY\", \"VALUE\")<\/code> to manually add more data entries.<\/li>\n- (B3)<\/strong> Now, the
FormData<\/code> object is not some “black hole”. You put data in and have no idea what’s inside.\n- \n
get(KEY)<\/code> Returns the value of the specifiedKEY<\/code>.<\/li>\nhas(KEY)<\/code> Checks if the dataset containsKEY<\/code>.<\/li>\nkey()<\/code> Return all the keys in an array.<\/li>\nvalues()<\/code> Return all the values in an array.<\/li>\nentries()<\/code> Returns all the keys and values in an array.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/p>\n
<\/div>\n<\/p>\n
\nDOWNLOAD & NOTES<\/h2>\n
<\/p>\nHere is the download link to the example code, so you don’t have to copy-paste everything.<\/p>\n<\/div>\n
<\/p>\n
SORRY FOR THE ADS...<\/span><\/h3>\r\n
But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a \"paid scripts\" business, and I don't \"block people with Adblock\". Every little bit of support helps.<\/p>\r\n\r\n
Buy Me A Coffee<\/a> Code Boxx eBooks<\/a><\/p>\n
<\/p>\n
EXAMPLE CODE DOWNLOAD<\/span><\/h3>\n
Click here for the source code on GitHub gist<\/a>, 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.<\/p>\n
<\/p>\n
\nEXTRA BITS & LINKS<\/h2>\n
<\/p>\nThat’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.<\/p>\n<\/div>\n
<\/p>\n
LINKS & REFERENCES<\/span><\/h3>\n
- \n
- Get Element By Id<\/a> – MDN<\/li>\n
- Form Data<\/a> – MDN<\/li>\n
- Submit Form Without Reloading<\/a> – Code Boxx<\/li>\n
- Display Message After Form Submit<\/a> – Code Boxx<\/li>\n<\/ul>\n
<\/p>\n
INFOGRAPHIC CHEAT SHEET<\/span><\/h3>\n
![\"\"](\"https:\/\/code-boxx.com\/wp-content\/uploads\/2022\/03\/JS-form-data-20230305-sm-R.webp\")
<\/a>Get HTML Form Data In Javascript (Click To Enlarge)<\/span><\/figcaption><\/figure>\n <\/p>\n
\nTHE END<\/h2>\n
<\/p>\nThank 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!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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? To get the HTML form data in Javascript: Create the HTML form as usual – Give the form an ID, and attach a name to […]<\/p>\n","protected":false},"author":1,"featured_media":20777,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[18,15],"tags":[],"class_list":["post-676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","category-js"],"_links":{"self":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts\/676"}],"collection":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/comments?post=676"}],"version-history":[{"count":0,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts\/676\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/media\/20777"}],"wp:attachment":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/media?parent=676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/categories?post=676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/tags?post=676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Form Data<\/a> – MDN<\/li>\n
- (B1)<\/strong> Since the “custom widget” is not the usual
- (B2)<\/strong> Then, “convert” into
- Create a