Save user form input data in a JavaScript object
Рет қаралды 37,916
Жыл бұрын👉 Source code: openjavascript.info/2022/10/0...
💬 Like to chat JS/webdev? Say hello on our new community forum: forum.openjavascript.info
⚡ 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.net/b3dMek
Back-End Developer Professional Certificate: imp.i384100.net/gbYorg
iOS Developer Professional Certificate: imp.i384100.net/Jr7qj2
Meta Android Developer Professional Certificate: imp.i384100.net/oeYnGo
Meta Database Engineer Professional Certificate: imp.i384100.net/BX7KGB
Website: openjavascript.info
Twitter: / openjavascript
@OpenJavaScript Жыл бұрын
Thanks for watching! 👉 Source code: openjavascript.info/2022/10/03/save-user-form-input-data-in-a-javascript-object/
@raven.4815 10 ай бұрын
Exactly what I was looking for! Thank you so so much!
@buvaneswari8461 10 ай бұрын
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!
@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!
@sh9vch9nk0 3 ай бұрын
Veryyyy useful, helped me a lot! Thank you for this clear tutorial 💗💗
@MrBrady95 2 ай бұрын
Awesome, thanks!
@mansnotprot1544 2 ай бұрын
Thank you so much! :)
@jackepner9984 11 ай бұрын
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!
@abunurullah2340 7 ай бұрын
Very interesting..........thanks, bro................
@marcopel83 Жыл бұрын
This is gold! thanks a lot
@OpenJavaScript Жыл бұрын
Welcome, glad you liked the video!
@homecookingwithnaturalspic8398 Жыл бұрын
thanks a lot for this tutorial
@OpenJavaScript Жыл бұрын
You're welcome, I'm glad you found it useful!
@viniciusm.m.7822 Жыл бұрын
Nice explanation, bro! Thanks!
@OpenJavaScript Жыл бұрын
You're welcome!
@fakharany 7 ай бұрын
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 ?
@SuperNorban Жыл бұрын
thanks. hi from argentina!
@OpenJavaScript Жыл бұрын
Hi! :)
@oldmanlogan1646 Жыл бұрын
awesome content, thx a lot!
@OpenJavaScript Жыл бұрын
You're welcome!
@user-nl3fc6is6b 9 ай бұрын
can any clear me one thing do we need to link confirm.html or else not
@alinaeem9016 10 ай бұрын
where are the credentials stored??
@pratibhabade2430 11 ай бұрын
can we use any other keywords or properties instead of and ? 6:18
@larryjasontueno9016 9 ай бұрын
How does the entries overright what was alreadt there
@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: kzfaq.info/get/bejne/rpaGlsyYvJ_PfmQ.html
@walidnazmifordigitization5204 Жыл бұрын
Brilliant
@OpenJavaScript Жыл бұрын
Thanks, glad you liked it!
@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.
@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: kzfaq.info/get/bejne/pa53ocR2l6i1iKM.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"});
@amitpmit Жыл бұрын
thank you
@OpenJavaScript Жыл бұрын
You are welcome :)
@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.
@untrusted0 9 ай бұрын
is it possible to edit whats inside the object?
@Cuber1771 2 ай бұрын
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";
@lucky_bus 9 ай бұрын
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.
ZeroLife
Рет қаралды 15 М.