Home > Net >  How to display values from form inside of a div
How to display values from form inside of a div

Time：11-05

I am trying to create a Library and add information that is entered into my form (form is in popup window) to appear in a div (bookCard) within my grid. I was able to create an eventListener for the submit button and make my div (bookCard) appear. However, I am unable to display the input from my form on the bookCard div. How can I add to the function to make the inputs appear and display there when it is entered? Is there something I am missing within the addBookToLibrary function?

Thank you in advance for your help.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!----GitHub icon-->
  <script
  src="https://kit.fontawesome.com/4c536a6bd5.js"
  crossorigin="anonymous"></script>
    <!----------Font Below ---------------->
    <link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
    <link rel="stylesheet" href="styles.css">
   <link rel="icon" type="image/png" href="images/open-book.png"/>
    <title>My Library</title>
</head>
<body>

  <div >
    <h1>My Library</h1>
  </div>
<main class ="main-container">
  <div >
    <button id="addBook">Add Book</button>
  </div>
<div  id="booksGrid">
  <div  id="library-container"></div>
</div>
</main>
  <!-----Form information----->
  <div >
    <div 
    <form action="example.com/path"  id="popUpForm">
      <h3>add new book</h3>
      <input  type="text" id="title" placeholder="Title" required maxlength="100">
      <input type="author" id="author" placeholder="Author" required maxlength="100">
      <input type="number" id="pages" placeholder="Pages" required max="10000">
    <div >
      <label for="readOption">Have you read it?</label> 
      <input type="checkbox" id="readOption" name="readOption">
    </div>
      <button  type="submit" id="submit">Submit</button>
    </form>
  </div>
  </div>

  <div id="overlay"></div>
  <div id="invisibleDiv"></div>
 </body>
</html>

CSS

/*CSS RESET*/
* {
  margin:0;
  padding:0;
}


h1 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 8vh;
  color: #001D4A;
}

.head-box {
  background-color: #9DD1F1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20vh;
  border-bottom: 2px solid #e0f3ff;
}

h2 {
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 5vh;
  color: #001D4A;
}

h3 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 4vh;
  color: #001D4A;
}

button {
  height: 10vh;
  width: 20vh;
  min-width: 20vh;
  min-height: 10vh;
  font-size: 3vh;
  background-color: #27476E;
  border-radius: 22px;
  border-style: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  color:#ffffff;
}

button:hover {
  background-color: #192c44;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}

.body-box {
  margin: 3vh;
  display: flex;
  justify-content: center;
}

/* The pop up form - hidden by default */

.form-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.form-content {
  text-align: center;
  border-radius: 20px;
  width: 30vh; 
  height: auto;
  border: 3px solid #001D4A;
  padding: 20px;
  background-color: #9DD1F1;
  gap: 10px;
}

.form-container {
  min-width: 20vh;
  min-height: 50vh;
}

.isRead{
  display: flex;
  height: 30px;
  width: 100%;
  margin: 2px;
  align-items: center;
  justify-content: center;
}

label {
  font-family: poppins, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.5vh;
}

input {
  border-radius: 10px;
  height: 50px;
  margin: 3px;
  width: 100%;
  padding: 4px;
  background-color: #d0edff;
  border: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-size: 2.5vh;
}

#submit {
  margin-top: 4px;
  height: 20px;
  width: 100%;
  border-radius: 15px;
  color: #ffffff;
  border: none;
}

input[type=checkbox] {
    width: 20px;
    margin: 10px;
}

#invisibleDiv {
  position: fixed;
  height: 100%;
  width: 100%;
}

#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* BOOK CARD */

#library-container {
  display: none;
  height: 50vh;
  width: 50vh;
  border-radius: 15px;
  border: 5px solid #ffffff;
  background-color: #d0edff;
  flex-direction: column;
  justify-content: space-between;
  margin: 28px;
}

JS

class book {
  constructor(title, author, pages, read) {
      this.title = form.title.value;
      this.author = form.author.value;
      this.pages = form.pages.value   'pages';
      this.read = form.read.checked;
  }
  }
  
  //creates book from Book Constructor, adds to library
  let myLibrary = [];
  
  function addBookToLibrary(book) {
      const bookTitle = document.getElementById('title').value;          
      const bookAuthor = document.getElementById('author').value;
      const bookPages = document.getElementById('pages').value;

  }
  
  

  // User interface //
  const popUpForm = document.querySelector('.form-popup');
  const button = document.getElementById('addBook');
  const overlay = document.getElementById('overlay');
  const booksGrid = document.getElementById('booksGrid');
  const bookCard = document.querySelector('.library-container');
  const form = document.querySelector('.form-container');
  const submitBtn = document.getElementById('submit');
  
  // Form Pop Up function //
  document.getElementById('invisibleDiv').onclick = function()
  {
     popUpForm.style.display = "none"; 
     overlay.style.display = "none";
  };
  
  button.addEventListener("click", () => {
    popUpForm.style.display = "block";
    overlay.style.display = "block";
  });
  
  
  // Submit Button Event Listener (displays bookCard) //
  
  submitBtn.addEventListener("click", () => { 
    bookCard.style.display = "block";
    popUpForm.style.display = "none";
    overlay.style.display = "none";
    addBookToLibrary();
  });

CodePudding user response：

Check this out, it should help.

Good luck

<!-- https://codepen.io/bradtraversy/pen/OrmKWZ -->

OR

<!-- https://codepen.io/fun/pen/PPVwBY -->

CodePudding user response：

This is on-going, unfinish answer. The code in the question is put into live mode for investigation purposes. Any reader may try to edit/run to get a solution.

class book {
  constructor(title, author, pages, read) {
      this.title = form.title.value;
      this.author = form.author.value;
      this.pages = form.pages.value   'pages';
      this.read = form.read.checked;
  }
  }
  
  //creates book from Book Constructor, adds to library
  let myLibrary = [];
  
  function addBookToLibrary(book) {
      const bookTitle = document.getElementById('title').value;          
      const bookAuthor = document.getElementById('author').value;
      const bookPages = document.getElementById('pages').value;

  }
  
  

  // User interface //
  const popUpForm = document.querySelector('.form-popup');
  const button = document.getElementById('addBook');
  const overlay = document.getElementById('overlay');
  const booksGrid = document.getElementById('booksGrid');
  const bookCard = document.querySelector('.library-container');
  const form = document.querySelector('.form-container');
  const submitBtn = document.getElementById('submit');
  
  // Form Pop Up function //
  document.getElementById('invisibleDiv').onclick = function()
  {
     popUpForm.style.display = "none"; 
     overlay.style.display = "none";
  };
  
  button.addEventListener("click", () => {
    popUpForm.style.display = "block";
    overlay.style.display = "block";
  });
  
  
  // Submit Button Event Listener (displays bookCard) //
  
  submitBtn.addEventListener("click", () => { 
    bookCard.style.display = "block";
    popUpForm.style.display = "none";
    overlay.style.display = "none";
    addBookToLibrary();
  });
  /*CSS RESET*/
* {
  margin:0;
  padding:0;
}


h1 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 8vh;
  color: #001D4A;
}

.head-box {
  background-color: #9DD1F1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20vh;
  border-bottom: 2px solid #e0f3ff;
}

h2 {
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 5vh;
  color: #001D4A;
}

h3 {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 4vh;
  color: #001D4A;
}

button {
  height: 10vh;
  width: 20vh;
  min-width: 20vh;
  min-height: 10vh;
  font-size: 3vh;
  background-color: #27476E;
  border-radius: 22px;
  border-style: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-style: normal;
  color:#ffffff;
}

button:hover {
  background-color: #192c44;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}

.body-box {
  margin: 3vh;
  display: flex;
  justify-content: center;
}

/* The pop up form - hidden by default */

.form-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.form-content {
  text-align: center;
  border-radius: 20px;
  width: 30vh; 
  height: auto;
  border: 3px solid #001D4A;
  padding: 20px;
  background-color: #9DD1F1;
  gap: 10px;
}

.form-container {
  min-width: 20vh;
  min-height: 50vh;
}

.isRead{
  display: flex;
  height: 30px;
  width: 100%;
  margin: 2px;
  align-items: center;
  justify-content: center;
}

label {
  font-family: poppins, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.5vh;
}

input {
  border-radius: 10px;
  height: 50px;
  margin: 3px;
  width: 100%;
  padding: 4px;
  background-color: #d0edff;
  border: none;
  font-family: poppins, sans-serif;
  font-weight: 300;
  font-size: 2.5vh;
}

#submit {
  margin-top: 4px;
  height: 20px;
  width: 100%;
  border-radius: 15px;
  color: #ffffff;
  border: none;
}

input[type=checkbox] {
    width: 20px;
    margin: 10px;
}

#invisibleDiv {
  position: fixed;
  height: 100%;
  width: 100%;
}

#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* BOOK CARD */

#library-container {
  display: none;
  height: 50vh;
  width: 50vh;
  border-radius: 15px;
  border: 5px solid #ffffff;
  background-color: #d0edff;
  flex-direction: column;
  justify-content: space-between;
  margin: 28px;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!----GitHub icon-->
  <script
  src="https://kit.fontawesome.com/4c536a6bd5.js"
  crossorigin="anonymous"></script>
    <!----------Font Below ---------------->
    <link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
    <link rel="stylesheet" href="styles.css">
   <link rel="icon" type="image/png" href="images/open-book.png"/>
    <title>My Library</title>
</head>
<body>

  <div >
    <h1>My Library</h1>
  </div>
<main class ="main-container">
  <div >
    <button id="addBook">Add Book</button>
  </div>
<div  id="booksGrid">
  <div  id="library-container"></div>
</div>
</main>
  <!-----Form information----->
  <div >
    <div 
    <form action="example.com/path"  id="popUpForm">
      <h3>add new book</h3>
      <input  type="text" id="title" placeholder="Title" required maxlength="100">
      <input type="author" id="author" placeholder="Author" required maxlength="100">
      <input type="number" id="pages" placeholder="Pages" required max="10000">
    <div >
      <label for="readOption">Have you read it?</label> 
      <input type="checkbox" id="readOption" name="readOption">
    </div>
      <button  type="submit" id="submit">Submit</button>
    </form>
  </div>
  </div>

  <div id="overlay"></div>
  <div id="invisibleDiv"></div>
 </body>
</html>

Page link：https//www.codepudding.com/net/599301.html

Prev:How do I save user selected avatar in a variable using js or jquery
Next:Overriding antd component style for just one component
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding