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

Question

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

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

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

text: Email
id: "user_email"

我可以用下面的代码来完成：

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

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

我正在尝试：

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

可以通过

从您的代码片段中检索所有表单

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 property which returns HTMLCollection of all the child nodes, so you may traverse that (e.g. with 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 工作正常

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

Extract fields ids and text from a form using javascript

javascript

html

jquery-selectors