Creating new object instances and pushing them to an array in plain Javascript

Question

I'm trying to create a form that when submitted, creates a new object with the input values, and then stores that object in an array.

For some reason, the array is "resetting" and not saving the objects.

let myLibrary = []

function Book(title,author,pages,read) {
 this.title = title
 this.author = author
 this.pages = pages
 this.read = read
 myLibrary.push(this)
}


function checkForm(){
 let name = document.querySelector('input[name="title"]').value
 let author = document.querySelector('input[name="author"]').value
 let pages = document.querySelector('input[name="pages"]').value
 let read = document.querySelector('input[name="read"]').checked
  new Book(name,author,pages,read)
document.getElementById('library').innerText = JSON.stringify(myLibrary)
}

const submit = document.getElementById('btn1')
submit.addEventListener("click",checkForm);

<input name='title' />
<input name='author' />
<input name='pages' />
<input name='read' />

<button id='btn1'>Click me! </button>
<div >Library:</div>
<div id='library'></div>

Can you share your `html` as well? I'm unable to reproduce, and with my `html` it seems to work just fine, check my answer below. — Luís Ramalho, Apr 10 '20 at 23:37
Is your form reloading the page? please provide html on your question... — Mosia Thabo, Apr 10 '20 at 23:38
Here is the rest of the code: https://jsfiddle.net/xdgmjz54/1/ — heyslevin, Apr 10 '20 at 23:58
@heyslevin, yes, you're just missing preventing the default submission of the form, check my answer below for a snippet with your code. — Luís Ramalho, Apr 11 '20 at 00:02

score 2 · Answer 1 · answered Apr 10 '20 at 23:41

2

You are listening for a click event on the submit button, however the submit button also submits the form. Forms will naturally cause a refresh if the default "submit" event is not prevented.

Instead you could listen to your forms submit event and prevent it:

// Query select the form and
form.addEventListener('submit', function(e){
        e.preventDefault();
        checkForm();
});

answered Apr 10 '20 at 23:41

Chief koshi

257
3
7

This worked well. Thought the button was doing nothing now, until I added the console.log suggested by Luís Ramalho. Thanks for the help! – heyslevin Apr 11 '20 at 00:14

Luís Ramalho · Accepted Answer · 2020-04-11T00:13:10.293

As you have a form in your html, you'll have to prevent its default submission event which results in a reload of the page with preventDefault(). You could, for example, change your checkForm() and add the e.preventDefault() there to prevent the form from being submitted.

let myLibrary = []

function Book(title, author, pages, read) {
  this.title = title
  this.author = author
  this.pages = pages
  this.read = read
}

function addtoLibrary(title, author, pages, read) {
  let book = new Book(title, author, pages, read)
  myLibrary.push(book)
}


let table = document.querySelector(".table");

myLibrary.forEach(function(e) {
  table.innerHTML += `<tr><td>${e.title}</td>
       <td>${e.author}</td>
       <td>${e.pages}</td>
       <td>${e.read}</td>
      </tr>
      `
});


// Selectors
let add = document.querySelector("#add")
let submit = document.querySelector("#submit")


function checkForm(e) {
  e.preventDefault(); // prevent the form from being submitted
  let name = document.querySelector('input[name="title"]').value
  let author = document.querySelector('input[name="author"]').value
  let pages = document.querySelector('input[name="pages"]').value
  let read = document.querySelector('input[name="read"]').checked
  addtoLibrary(name, author, pages, read)
  console.log(myLibrary);
}

submit.addEventListener("click", checkForm);

html,
body {
  height: 100%;
}

* {
  font-family: Graphik Regular;
}

ul {
  list-style-type: none;
}

table,
th,
td {
  border-collapse: collapse;
  text-align: left;
  border: 1px solid black;
}

table {
  width: 100%;
}

td,
th {
  height: 50px;
  padding: 10px;
  width: 200px;
  min-width: 100px;
}

th {
  background-color: gray;
  margin-bottom: 50px;
}

.headers {
  margin-bottom: 5px;
}

button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 30px;
}

.pop-container {
  text-align: center;
  /* display: none;*/
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

form {
  background-color: gray;
}

input {
  font-size: 20px;
  width: 300px;
  margin-bottom: 5px;
}

<!DOCTYPE html>

<meta charset="UTF-8">

<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  </stylesheet>
  <script type="text/javascript" src="http://livejs.com/live.js"></script>
</head>

<body>

  <div class="pop-container">
    <form id="bookquery">
      <input type="text" name="title" id="title" placeholder="Title"></br>
      <input type="text" name="author" placeholder="Author"></br>
      <input type="text" name="pages" placeholder="Pages"></br>
      <p>Have you read it?<input type="checkbox" placeholder="Title" name="read"></p>
      </br>
      <button id="submit">Submit</button>
    </form>
  </div>

  <table class="headers">
    <th>Title</th>
    <th>Author</th>
    <th>Pages</th>
    <th>Read</th>
  </table>


  <table class="table tstyle">
  </table>

  <button id="add">Add new book</button>


  <script src="script.js"></script>
</body>

</html>

function checkForm(e) {
  e.preventDefault(); // prevent the form from being submitted
  let name = document.querySelector('input[name="title"]').value
  let author = document.querySelector('input[name="author"]').value
  let pages = document.querySelector('input[name="pages"]').value
  let read = document.querySelector('input[name="read"]').checked
  addtoLibrary(name, author, pages, read)
}

You're right, thanks this worked perfectly. Spent a painful amount of time not understanding why the javascript was not working. Now I see why. — heyslevin, Apr 11 '20 at 00:11

score 1 · Answer 3 · answered Apr 11 '20 at 00:02

The above answers didn't quite work for me so here is a simplified, fully working example. As a general guide to getting things like this to work I always try to simplify as much as possible.

index.html

<html>
  <header></header>
  <body>
    <div>
        <form id="myForm">
            <label for="title">title:</label><br>
            <input type="text" id="title" name="title" value="title"><br>
            <button id="submit">Submit</button>
        </form>
    </div>
    <script type="text/javascript" src="functions.js"></script>
  </body>
</html>

functions.html

let myLibrary = [];

function Book(title) {
  this.title = title;
  myLibrary.push(this);
}


function checkForm(){
  let title = document.querySelector('input[name="title"]').value;
  new Book(title);
  myLibrary.forEach(function(element) {
    console.log(element);
  });
}

document.getElementById("myForm").addEventListener(
  'submit',
  function(e) {
    e.preventDefault();
    checkForm();
  }
);

I'll leave it to you to add back in the other fields on the Book object.

score 0 · Answer 4 · answered Apr 10 '20 at 23:37

I am not sure because I've tried to illustrate that your code actually stores the object. It's either that your form refreshes the page... that might be the cause but as far as the code you've provided is concerned, everything works as expected.

let myLibrary = []

function Book(title,author,pages,read) {
 this.title = title
 this.author = author
 this.pages = pages
 this.read = read
 myLibrary.push(this)
}

function checkForm(name,author,pages,read)
{
  new Book(name,author,pages,read)
}

checkForm("Chris","Jerry","56","65");
checkForm("Sean","John","56","65");

// Both Objects are still stored...
console.log(myLibrary);

Creating new object instances and pushing them to an array in plain Javascript

4 Answers4