您可以在 javascript 中从 event 属性或“this”关键字访问 HTML 表单数据吗？-解网

问：

我知道您可以轻松地从以下表单中获取数据：

function getData(event) {
        event.preventDefault();
      const inpt = document.getElementById("inpt").value;
        return inpt;
}

//OR

function getData(event) {
        event.preventDefault();
      const inpt = document.getElementById('form').elements[0].value;
        return inpt;
}

<form id="form" onsubmit="getData(event)">
      <input id="inpt" type="text"></input>
</form>

我想知道的是，如果不使用“getElementBy...”，是否可以通过事件属性或关键字达到相同的值。任何类型或任何 querySelector。this

javascript html 表单 dom-events this

总是。他们比他们值得的麻烦更多。他们在范围内做愚蠢的事情。他们依赖于全球。它们迫使您将 JS 从 JS 文件中移出并移入 HTML 属性。你放在那里的任何远程复杂的 JS 都需要 HTML 编码。他们在范围内做愚蠢的事情（值得一提两次）。

答：

1赞 James 7/14/2022 #1

由于事件侦听器是在窗体上设置的，因此窗体元素可用作

event.target

因此，文本字段值可以通过以下方式访问

event.target.elements[0].value

表单元素也在提交处理程序中，因此您也可以这样做this

this.elements[0].value.

如果为所有表单元素分配名称属性，则在表单提交事件中，可以使用 FormData API 获取其数据。我相信这不适用于 IE 或其他较旧的浏览器（检查浏览器兼容性）。
表单数据：https://developer.mozilla.org/en-US/docs/Web/API/FormData#browser_compatibility
Object.fromEntries（）：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries#browser_compatibility

<form id="form" onsubmit="getData()">
      <input name="input1" id="inpt" type="text"></input>
      <input name="input2" id="NotNeededForThis" type="text"></input>
</form>

function getData(event) {
        event.preventDefault();
        const formData = new FormData(event.target);
        const formObject = Object.fromEntries(data.entries());
        return formObject;
}

这将返回对象：

{
    input1: "whatever the value was",
    input2: "whatever the value was"
}

0赞 EZRA KIPYEGON 12/24/2022 #3

您可以直接通过事件访问输入的值。例如，在函数中访问名为“input1”的输入字段的数据：

function getData(event){
     //format event.target.nameOfInput.value
     //for the input field with the name input1
     let inp1 = event.target.input1.value;
     //for the input field with the name input2
     let inp2 = event.target.input2.value;
     //
     console.log( inp1 , inp2)
}

上一个：将类函数添加到动态生成的按钮 JS/HTML

下一个：单击时显示类属性值

您可以在 javascript 中从 event 属性或“this”关键字访问 HTML 表单数据吗？

Can you access a HTML form data from the event property, or a "this" keyword, in javascript?

评论

评论