javascript 如何使用vanilla js在一个页面中获取多个表单的输入值？

isr3a4wc 于 2023-02-21 发布在 Java

关注(0)|答案(1)|浏览(114)

我有一个包含多个表单元素的div。如何通过按Enter键获得用户提交的表单的输入值？假设用户可以在容器中附加更多表单。因此，我需要通过按Enter键获得用户提交的表单的输入值。
以下是标记：

<div class="forms-container">
    <form class="form">
        <input type="text" name="firstName">
        <input type="text" name="lastName">
    </form>
    <form class="form">
        <input type="text" name="age">
        <input type="number" name="phone">
    </form>
    <form class="form">
        <input type="text" name="address">
        <input type="text" name="address2">
    </form>
</div>

JavaScript

来源：https://stackoverflow.com/questions/75510623/how-to-get-input-values-of-multiple-form-in-a-single-page-using-vanilla-js

1条答案

按热度按时间

m1m5dgzv1#

几件事：
1.应该只有一个表单 Package 所有输入，并且它应该有一个唯一的ID。
1.任何没有结束标记的HTML元素都必须有结束斜杠。
1.你需要某种按钮来接受输入，有很多方法可以在点击按钮时运行函数;下面是一种方法。

document.getElementById("submitButton").addEventListener("click", (event) => {
    event.preventDefault()
    processForm()
})

function processForm() {
    var formData = Object.fromEntries(new FormData(document.querySelector('#myForm')).entries())
    console.log("Form data is: ", formData)
}

<form id="myForm" class="form">
    <input type="text" name="firstName" />
    <input type="text" name="lastName" />
    <input type="text" name="age" />
    <input type="number" name="phone" />
    <input type="text" name="address" />
    <input type="text" name="address2" />
    <input id="submitButton" type="submit" value="Submit" />
</form>

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 如何使用vanilla js在一个页面中获取多个表单的输入值？

1条答案

相关问题

热门标签

最新问答