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

如何查找3个输入的值

css html javascript

-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 年前

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 到阵列。

希望有帮助^_^

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>

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