Html Question posted in
Some basic documentation can be found here.

Html – How to find value of 3 inputs

I’ve made a form that pops up and now I want to store the input values in 3 separate values in the array const book.

The project will be a library app where you’ll ultimately be able to remove/add books, and it’s apart of The Odin Project’s curriculum.

Here is my repository: https://github.com/Rutchyy/library (focus around line 53 in the app.js file.)

const book = submit.addEventListener("click", (event) => {
    event.preventDefault();
    let name = newForm.firstChild.firstChild // How do I navigate to the title input?
    console.log(name)
})

And the HTML:

<form method="get" id="new-book-form">
            <div>
                <label for="title">Title</label>
                <input type="text" id="title" name="title">
            </div>
            <div>
                <label for="author">Author</label>
                <input type="text" id="author" name="author">
            </div>
            <div>
                <label for="pages">Pages</label>
                <input type="number" id="pages" name="pages">
            </div>
            <button id="create-book">Create Book</button>
        </form>
Tags:

3

Answers


  1. 0

    You could use FormData, you can post it directly or use Object.fromEntries() to create an object from it. To create an array from the input values, use [...formData.values()]:

    document.getElementById('new-book-form').addEventListener("submit", event => {
    
    event.preventDefault();
    
    const book = Object.fromEntries(new FormData(event.target));
    console.log(book);
    
    const arr = [...new FormData(event.target).values()];
    console.log(arr);
});
    <form method="get" id="new-book-form">
            <div>
                <label for="title">Title</label>
                <input type="text" id="title" name="title">
            </div>
            <div>
                <label for="author">Author</label>
                <input type="text" id="author" name="author">
            </div>
            <div>
                <label for="pages">Pages</label>
                <input type="number" id="pages" name="pages">
            </div>
            <button id="create-book">Create Book</button>
        </form>
    Login or Signup to reply.
  2. 0 
    submit.addEventListener("click", (event) => {
    event.preventDefault();
// book variable be edited afterwards
    let book = []
//select all inputs of the form
    document.querySelectorAll('#new-book-form input').forEach(e =>{
        book.push(e.value)
    })
    console.log(book)
})

    At first I created an empty array, then fetched all inputs of the form by querySelectorAll() which selects all elements matching css selector #new-book-form input, then for each of them, I inserted their value to the array.

    Hope it helps ^_^

    Login or Signup to reply.
  3. 0

    Try to use this into your javascript file , as it would be done easily

    const books = [];

        document.getElementById('create-book').addEventListener('click', (event) => {
        event.preventDefault();

        const title = document.getElementById('title').value;
        const author = document.getElementById('author').value;
        const pages = document.getElementById('pages').value;

        const newBook = { title, author, pages };
        books.push(newBook);

        console.log(books);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search