Save user form input data in a JavaScript object

👉 Source code: openjavascript...
💬 Like to chat JS/webdev? Say hello on our new community forum: forum.openjava...
⚡ Looking for high-performance, afforable web hosting? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to save user input from a HTML form in a JavaScript object using the native FormData() object constructor. Also covered is how to pass the form data to another page of the form via localStorage.
#javascript #html #formdata #htmlforms #webdevelopment
🔔 Subscribe for more tutorials just like this: / @openjavascript
⚡ NEW: Web development courses from Meta Inc. ⚡
Front-End Developer Professional Certificate: imp.i384100.ne...
Back-End Developer Professional Certificate: imp.i384100.ne...
iOS Developer Professional Certificate: imp.i384100.ne...
Meta Android Developer Professional Certificate: imp.i384100.ne...
Meta Database Engineer Professional Certificate: imp.i384100.ne...
Website: openjavascript...
Twitter: / openjavascript

[@OpenJavaScript]

Thanks for watching!
👉 Source code: openjavascript.info/2022/10/03/save-user-form-input-data-in-a-javascript-object/

[@MantraMantis]

I was stuck on this concept for hours and your tutorial really helped me. Thank you.

[@OpenJavaScript]

That's great to hear, glad you found the video useful!

[@jackepner9984]

Thanks for the video, but would be amazing if you could tack on a section that is more real-world applicable, where instead of saving the object to local storage, it's passed to a backend server using proper routing. Thank you!

[@buvaneswari8461]

Thank you so much sir
You just plunged into the topic

[@perorbem]

Thanks so much for this tutorial! I'd been struggling with this for a while, so it helped a ton :)

[@OpenJavaScript]

That's great!

[@raven.4815]

Exactly what I was looking for! Thank you so so much!

[@sh9vch9nk0]

Veryyyy useful, helped me a lot! Thank you for this clear tutorial 💗💗

[@fakharany]

Thank for the great video, Now I was wondering can I use this method in my website to store contact us form data in a text file (s) to check later for message from web visitors who wishes to communicate with me ?

[@moyomi8713]

this helped!

[@homecookingwithnaturalspic8398]

thanks a lot for this tutorial

[@OpenJavaScript]

You're welcome, I'm glad you found it useful!

[@abunurullah2340]

Very interesting..........thanks, bro................

[@SuperNorban]

thanks. hi from argentina!

[@OpenJavaScript]

Hi! :)

[@marcopel83]

This is gold! thanks a lot

[@OpenJavaScript]

Welcome, glad you liked the video!

[@ashkanahmadi]

Interesting approach thanks. As far as I know, it's not best practice to store any personal information locally in the cookie or local storage.

[@OpenJavaScript]

Yes, to optimize security it's probably best to send data to the server.
But another possibility I didn't discuss in the video is to use the same technique but using sessionStorage. This way, the data is immediately deleted when the user leaves your site.

[@MrBrady95]

Awesome, thanks!

[@mansnotprot1544]

Thank you so much! :)

[@viniciusm.m.7822]

Nice explanation, bro!
Thanks!

[@OpenJavaScript]

You're welcome!

[@oldmanlogan1646]

awesome content, thx a lot!

[@OpenJavaScript]

You're welcome!

[@alinaeem9016]

where are the credentials stored??

[@walidnazmifordigitization5204]

Brilliant

[@OpenJavaScript]

Thanks, glad you liked it!

[@qual1481]

Hey man great video, just wondering is it possible to do this exact thing but instead of going to a new page i can retrieve it on the same page? Cus im making a single page app with angular and need to do something like this, thanks.

[@OpenJavaScript]

Sure, you can save the data to localStorage and then retrieve it on the same page.
This other video I made may be useful for you where I go into more detail on localStorage/sessionStorage: ruclips.net/video/x0VcigW9kN0/видео.html

[@xtreemz247]

hi, Great video man. Is it possible to save the data to notepad on disk of the PC?

[@OpenJavaScript]

Yes, you can start a client-side download of data you hold in JavaScript.
First, though, you need to get your data inside a blob (a data container). In your case, you'll want to get it in string format first which I'm doing below using JSON.stringify():
For the downloading of the blob itself, I created a tutorial you can follow to do that: ruclips.net/video/oHGnaE2BQXo/видео.html
const obj = {prop1: "val", prop2: "val"};
const json = JSON.stringify(obj, null, 4); // (options add indentation for readability)
const blob = new Blob([json], {type: "text/plain"});

[@user-lj2ce5wu6i]

How would you implement this but instead of using local storage, it will be through sqlite

[@OpenJavaScript]

Hi Karla, good quesiton, I haven't actually created a tutorial on using SQLite yet but I will keep this problem and topic in mind for a future video.

[@amitpmit]

thank you

[@OpenJavaScript]

You are welcome :)

[@larryjasontueno9016]

How does the entries overright what was alreadt there

[@user-nl3fc6is6b]

can any clear me one thing do we need to link confirm.html or else not

[@pratibhabade2430]

can we use any other keywords or properties instead of and ? 6:18

[@MinusC24]

yeah cus he's just using the tags to display it

[@lucky_bus]

Shouldn't you be using the 'for' attribute with 'id' of the input, rather than the 'name' . It's strange but you use neither the 'id', nor the 'name', just some random 'for' values.

[@untrusted0]

is it possible to edit whats inside the object?

[@Cuber1771]

Sorry i'm late but yes you can:
document.getElementByID('ID').innerHTML = "New text";
You can also edit things like the link, image, or source by changing what's after the dot:
document.getElementByID('ID').src = "New source";