使用 javascript 从表单中提取字段 ID 和文本

Question

我想用 JS 制作一个简单的应用程序来识别表单字段 其中包括字段的 id 及其对应的文本。

例如，对于以下站点：https://freeditorial.com/en/register

我想要每个文本框的 id 和文本。对于第一个，这将是：

文本：电子邮件
id：“user_email”

我可以使用以下代码：

form = document.getElementsByClassName("control-group")
form[0].innerText
form[0].querySelector("input").id

问题在于，这取决于类名，每个站点都可以更改。 有没有办法从表单中获取相同的数据？

我正在尝试：

var site_forms =  document.forms

如果我检查表单的文本，数据似乎就在那里：

site_forms[0].innerText

这是其中的一部分：

<input id="user_role_ids" name="user[role_ids]" type="hidden" value="2">
<div class="control-group">
  <label for="user_email">Email</label>
  <div class="controls">
    <input type="text" value="" name="user[email]" id="user_email">
  </div>
</div>
<span id="erroremail" class="rightCol error"></span>
<div class="control-group">
  <label for="user_name">Name</label>
  <div class="controls">
    <input id="user_name" name="user[name]" size="30" type="text">
  </div>
</div>
<div class="control-group">
  <label for="user_last_name">Last Name</label>
  <div class="controls">
    <input id="user_last_name" name="user[last_name]" size="30" type="text">
  </div>
</div>
<div class="control-group">
  <label for="user_username">Name by which you publish</label>
  <div class="controls">
    <input type="text" value="" name="user[username]" id="user_username">
  </div>
</div>
<div class="control-group">
  <label for="user_country_code">Country</label>
  <div class="controls">
  <select id="user_country_id" name="user[country_id]">
    <option value="">Country</option>
    <option value="3">Afghanistan</option>
    <option value="6">Albania</option>

但我没有找到可靠的提取方法。

Answer 1

可以从您的代码 sn-p 中检索所有表单

document.forms

然后可以选择具体形式，例如第一种形式document.forms[0]。

下一步是检索表单输入并获取它们的names or values：

document.forms[0].querySelectorAll('input')[0].value
document.forms[0].querySelectorAll('input')[0].name

// or iterate over form inputs
[...document.forms[0].querySelectorAll('input')].forEach(input => {
  console.log(input.name);
  console.log(input.value);
});

Answer 2

您可能会受益于FormData() API。

这样，您只需使用 FormData() 构造函数构建 formData 对象：

const myForm = document.getElementById('myForm'),
      formData = new FormData(myForm)

将其所有条目提取到键数组中（<input> 节点的name 属性）值对：

const formEntries = [...formData.entries()]

或对象：

const formEntries = Object.fromEntries(formData.entries())

或者您可以使用get() 方法获取单个值并将必要的键作为参数传递。

以下是该方法的快速演示：

const form = document.getElementById('myForm')

form.addEventListener('submit', e => {
  e.preventDefault()
  const formData = new FormData(form),
        formEntries = Object.fromEntries(formData.entries())
  console.log(formEntries)
})

<form id="myForm"><input id="user_role_ids" name="user[role_ids]" type="hidden" value="2"><div class="control-group"><label for="user_email">Email</label><div class="controls"><input type="text" value="" name="user[email]" id="user_email"></div></div><span id="erroremail" class="rightCol error"></span><div class="control-group"><label for="user_name">Name</label><div class="controls"><input id="user_name" name="user[name]" size="30" type="text"></div></div><div class="control-group"><label for="user_last_name">Last Name</label><div class="controls"><input id="user_last_name" name="user[last_name]" size="30" type="text"></div></div><div class="control-group"><label for="user_username">Name by which you publish</label><div class="controls"><input type="text" value="" name="user[username]" id="user_username"></div></div><div class="control-group"><label for="user_country_code">Country</label><div class="controls"><select id="user_country_id" name="user[country_id]"><option value="">Country</option><option value="3">Afghanistan</option><option value="6">Albania</option><input type="submit" /></form>

如果出于某种原因，您需要对表单的子输入（对应的 DOM 节点及其属性）进行更多低级访问，您可以选择返回 @ 的 HTMLFormElement.elements 属性987654337@ 的所有子节点，所以你可以遍历它（例如使用Array.prototype.reduce() 方法）来建立一个键值对对象：

const formData = [...form.elements].reduce((r,{name,value}) => 
   (value && (r[name]=value),r),{})

您也可以查看演示：

const form = document.getElementById('myForm')

form.addEventListener('submit', e => {
  e.preventDefault()
  const formData = [...form.elements].reduce((r,{name,value}) => (value && (r[name]=value),r),{})
  console.log(formData)
})

<form id="myForm"><input id="user_role_ids" name="user[role_ids]" type="hidden" value="2"><div class="control-group"><label for="user_email">Email</label><div class="controls"><input type="text" value="" name="user[email]" id="user_email"></div></div><span id="erroremail" class="rightCol error"></span><div class="control-group"><label for="user_name">Name</label><div class="controls"><input id="user_name" name="user[name]" size="30" type="text"></div></div><div class="control-group"><label for="user_last_name">Last Name</label><div class="controls"><input id="user_last_name" name="user[last_name]" size="30" type="text"></div></div><div class="control-group"><label for="user_username">Name by which you publish</label><div class="controls"><input type="text" value="" name="user[username]" id="user_username"></div></div><div class="control-group"><label for="user_country_code">Country</label><div class="controls"><select id="user_country_id" name="user[country_id]"><option value="">Country</option><option value="3">Afghanistan</option><option value="6">Albania</option><input type="submit" /></form>

Answer 3

您为什么不尝试获取输入的直接 id 并定位其值？

const a = document.getElementById("user_email")

然后 a.id 和 a.innerValue 工作正常