代码之家 › 专栏 › 技术社区 › Luis Ramon Ramirez Rodriguez

使用java脚本从表单中提取字段id和文本

jquery-selectors html javascript

Luis Ramon Ramirez Rodriguez · 技术社区 · 5 年前

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

例如,对于以下网站: https://freeditorial.com/en/register

我希望每个文本框都有id和文本。对于第一个,这将是:

text:电子邮件
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>

但我没有找到一种可靠的方法来提取它。

0 回复 | 直到 5 年前

Yevhen Horbunkov 5 年前

您可能会从中受益 FormData() API .

有了它,你只需要建立 formData 对象与 表单数据() 构造函数:

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

将其所有条目提取到键数组中( name 属性 <input> 节点)值对:

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 归还的财产 HTMLCollection 在所有子节点中,您可以遍历它(例如,使用 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)
})

<表单id=“myForm”><输入id=“user_role_ids”name=“user[role_ids]”type=“hidden”value=“2”><div class=“控制组”><标签=“user_email”>电子邮件</标签><div class=“controls”><输入类型=“text”值=“”name=“user[email]”id=“user_email”></div></div><span id=“errormeail”class=“rightCol error”></span><div class=“控制组”><标签=“user_name”>姓名</标签><div class=“controls”><输入id=“user_name”name=“user[name]”size=“30”type=“text”></div></div><div class=“控制组”><标签=“user_last_name”>姓氏</标签><div class=“controls”><输入id=“user_last_name”name=“user[last_name]”size=“30”type=“text”></div></div><div class=“控制组”><标签=“user_username”>您发布的名称</标签><div class=“controls”><输入类型=“text”值=“”name=“user[用户名]”id=“user_username”></div></div><div class=“控制组”><标签=“user_country_code”>国家</标签><div class=“controls”><选择id=“user_country_id”name=“user[country_id]”><选项值=“”>国家</选项><选项值=“3”>阿富汗</选项><选项值=“6”>阿尔巴尼亚</选项><输入类型=“提交”/></form>

Nymphetamine 5 年前

从您的代码片段中,所有表单都可以通过以下方式检索

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

Mindaugas Kurlys 5 年前

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

const a=document.getElementById(“user_email”)

那么a.id和a.innerValue就可以正常工作了