代码之家  ›  专栏  ›  技术社区  ›  Monnt

如何查找3个输入的值

  •  -1
  • Monnt  · 技术社区  · 1 年前

    我已经制作了一个弹出的表单,现在我想将输入值存储在数组中的3个单独的值中 const book .

    该项目将是一个图书馆应用程序,您最终可以在其中删除/添加书籍,它是奥丁项目课程的一部分。

    这是我的存储库: https://github.com/Rutchyy/library (关注中的第53行 app.js 文件

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

    以及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>
    
    3 回复  |  直到 1 年前
        1
  •  1
  •   Amirhosein    1 年前
    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)
    })
    

    一开始我创建了一个空数组,然后通过 querySelectorAll() 它选择与css选择器匹配的所有元素 #new-book-form input ,然后我为他们每个人插入了 value 到阵列。

    希望有帮助^_^

        2
  •  1
  •   Alexander Nenashev    1 年前

    你可以使用 FormData ,您可以直接发布或使用 Object.fromEntries() 从中创建对象。要从输入值创建数组,请使用 [...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>
        3
  •  0
  •   Patel Divykumar    1 年前

    试着在javascript文件中使用它,因为这样做很容易

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