Generating fresh object instances and adding them to an array using vanilla JavaScript

Question

Generating fresh object instances and adding them to an array using vanilla JavaScript

I'm currently working on a form that should generate a new object with the input values upon submission, and then add that object to an array.

However, I've noticed that the array seems to be "resetting" itself and not retaining the saved 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>

javascript arrays constructor push

Answer 1

Answer №1

To avoid your form from automatically refreshing when the submit button is clicked, you need to listen for the submit event on the form itself and prevent its default behavior. This can be achieved by using the following code snippet:

// Select the form element
form.addEventListener('submit', function(e) {
    e.preventDefault();
    checkForm();
});

Answer 2

To avoid your form from automatically refreshing when the submit button is clicked, you need to listen for the submit event on the form itself and prevent its default behavior. This can be achieved by using the following code snippet:

// Select the form element
form.addEventListener('submit', function(e) {
    e.preventDefault();
    checkForm();
});

Answer 3

Answer №2

To prevent the default submission event of a form in your html, you can use the method preventDefault(). Modify your checkForm() function by adding e.preventDefault() to stop 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)
}

Answer 4

To prevent the default submission event of a form in your html, you can use the method preventDefault(). Modify your checkForm() function by adding e.preventDefault() to stop 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)
}

Answer 5

Answer №3

None of the previous solutions worked for me, so I decided to provide a simplified example that actually works. In order to make things work smoothly, I always opt for simplifying 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 up to you to reintroduce the other fields in the Book object.

Answer 6

None of the previous solutions worked for me, so I decided to provide a simplified example that actually works. In order to make things work smoothly, I always opt for simplifying 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 up to you to reintroduce the other fields in the Book object.

Answer 7

Answer №4

It's uncertain because I've attempted to demonstrate that your code effectively saves the object. It is possible that your form is causing a page refresh... which could be the culprit. However, based on the provided code, everything seems to be functioning as intended.

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);

Answer 8

It's uncertain because I've attempted to demonstrate that your code effectively saves the object. It is possible that your form is causing a page refresh... which could be the culprit. However, based on the provided code, everything seems to be functioning as intended.

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);

Generating fresh object instances and adding them to an array using vanilla JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Focus is lost on React input after typing the initial character

Designing a popup using Angular, CSS, and Javascript that is capable of escaping the limitations of its parent div

Html content overlapping div rather than being stacked vertically

The Cascading of Bootstrap Card Designs

Is there a way for me to delay sending an immediate response until the asynchronous loop has completed?

Issues with Bootstrap Contact Form submission

By turning off the autosave feature in WordPress, you can prevent the Confirm Navigation window from popping up when exiting an unsaved page

Generate a Vue Component in real-time with a click of a button

Initiate ajaxForm submission again if necessary

Using JavaScript to trigger wake on LAN directly from a web browser

What is causing my conditional operator to malfunction?

Learn how to dynamically display an image if the original one fails to load by utilizing the image component available in Next.js

Sending props to a component without causing it to render(Note: This is

Is there a way to retrieve the ID of an input field dynamically using jQuery when a button is clicked, and then store it in

Manipulating CSS Class Properties Using JavaScript

What could be the cause of a JSON string only returning the final object when evaluated?

The mysterious case of the vanishing close button on Curator.io's mobile

The client side isn't providing the JSON data

How can I retrieve checkbox data from a database using PHP and jQuery?

Implementing an ES6 class in a next.js application: A step-by-step guide