Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3
Created February 4, 2019 16:16
Show Gist options
  • Save prof3ssorSt3v3/52ebd432bb7b8a155985a2f82509541d to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/52ebd432bb7b8a155985a2f82509541d to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Putting User Input into JS Objects</title>
<style>
.formBox{
padding: 0.5rem 2rem;
}
</style>
</head>
<body>
<form>
<div class="formBox">
<label for="title">Movie</label>
<input type="text" id="title" placeholder="Title"/>
</div>
<div class="formBox">
<label for="yr">Year</label>
<input type="number" id="yr" placeholder="Year"/>
</div>
<div class="formBox">
<button id="btn">Click to Add</button>
</div>
<div id="msg">
<pre></pre>
</div>
</form>
<script>
let movies = [];
// example {id:1592304983049, title: 'Deadpool', year: 2015}
const addMovie = (ev)=>{
ev.preventDefault(); //to stop the form submitting
let movie = {
id: Date.now(),
title: document.getElementById('title').value,
year: document.getElementById('yr').value
}
movies.push(movie);
document.forms[0].reset(); // to clear the form for the next entries
//document.querySelector('form').reset();
//for display purposes only
console.warn('added' , {movies} );
let pre = document.querySelector('#msg pre');
pre.textContent = '\n' + JSON.stringify(movies, '\t', 2);
//saving to localStorage
localStorage.setItem('MyMovieList', JSON.stringify(movies) );
}
document.addEventListener('DOMContentLoaded', ()=>{
document.getElementById('btn').addEventListener('click', addMovie);
});
</script>
</body>
</html>
@ichie-Ozor
Copy link

please how do i validate if all the fields in the form is filled in before it can be submitted. thank you

@prof3ssorSt3v3
Copy link
Author

@ichie-Ozor
Copy link

ichie-Ozor commented Jan 18, 2022 via email

@prof3ssorSt3v3
Copy link
Author

This video - https://www.youtube.com/watch?v=gL8M9Sl5QLs is about uploading data with fetch.

I have a full playlist on how fetch / AJAX works.

It is important to note that you can't upload directly to a database. You can use fetch to send an HTTP Request that can include files or data. There needs to be a server-side script (API) that handles whatever you are sending and it will be responsible for putting things into the server-side database.

@amandakoster
Copy link

Jeez, thanks so much! I have been using React for so long I forgot how to use Vanilla! How would you access that state object elsewhere in the app? For example, 2 inputs to capture (ex.) string1 and string2, add that to a user object (done, tutorial above) and then access that object for another api call?

@prof3ssorSt3v3
Copy link
Author

If you are talking about the movies array - in this simple example it is just a global variable.
This isn't a production ready code base though, just an illustration of some concepts for my students.
I have other videos on finite state machines, and what a reducer is - https://www.youtube.com/watch?v=TOhUqDGNFtA that help students understand the vanilla JS behind React.

@amandakoster
Copy link

amandakoster commented Feb 3, 2022

Thank you! The video reference was helpful. I like how simple and short your videos are. Very helpful!

@miriambej
Copy link

great lesson! could you please tell me how to store the form in cache API instead of localStorage? Thank you!

@prof3ssorSt3v3
Copy link
Author

Cache API stores files, not data. You would have to create a file, and write your data to that file, then save the file.

Cache API video - https://www.youtube.com/watch?v=Gu0t2EW2kfU

@PeeKay26
Copy link

Hello I'm getting the following error:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at HTMLDocument.<anonymous> (index.html:216:43) (anonymous) @ index.html:216

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment