时间戳

首页 > 解决方案 > 使用 javascript 从表单中提取字段 ID 和文本

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

问题描述

我想用 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>

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

标签： javascripthtmljquery-selectors

解决方案

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

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

推荐阅读