获取 HTML 表单值答案

【问题标题】：Getting HTML form values获取 HTML 表单值
【发布时间】：2011-04-02 14:24:46
【问题描述】：

如何获取 HTML 表单的值以传递给 JavaScript？

这是正确的吗？我的脚本有两个参数，一个来自文本框，一个来自下拉框。

<body>
<form name="valform" action="" method="POST">

Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type: <select name="cardtype" id="cardtypeid">
  <option value="visa">Visa</option>
  <option value="mastercard">MasterCard</option>
  <option value="discover">Discover</option>
  <option value="amex">Amex</option>
  <option value="diners">Diners Club</option>
</select><br/>
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />
</body>

【问题讨论】：

“HTML 代码中表单的值”到底是什么意思？
问题很清楚
@laurentngu 问题是他的意思是“of 一个 HTML 表单的值”，意思是 of 许多值中的一个值，还是他的意思是“整个 HTML 表单的值”，意思是一个大的“序列化”值中的所有值
问题很清楚......但显然传递表单的值没有多大意义。
节点表示，虽然在 2010 年这里的答案相当复杂，但自从 Object.entries 登陆 JS 以来，stackoverflow.com/a/66407161/740553 一直是这个问题的“获取所有表单值”解释的真正答案。

标签： javascript html

【解决方案1】：

HTML：

<input type="text" name="name" id="uniqueID" value="value" />

JS：

var nameValue = document.getElementById("uniqueID").value;

【讨论】：

@shorty876：你自己测试过吗？ o_0 这将是确定您是否做对的好方法。
是的，但它只返回一个真/假，我不确定如何确定该函数是否被调用。因此，您可以提供帮助。
我试过了，但nameValue 是默认值，而不是用户输入的值。
为什么是name="name"，如果它根本没有ID怎么办？
@bluejayke 还有其他 javascript 方法可以从 HTML 标记中获取数据，例如 getElementsByClassName。在这种情况下，“名称”只是一个通用属性占位符。

【解决方案2】：

如果您想检索表单值（例如那些将使用 HTTP POST 发送的值），您可以使用：

JavaScript

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
  // console.log(pair[0] + ': ' + pair[1]);
}

表单序列化 (https://code.google.com/archive/p/form-serialize/)

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

【讨论】：

您的第一个示例 FormData 本身没有做任何事情。您仍然需要从表单中获取值。
我认为这是不正确的。如果在初始化 FormData 时指定了一个表单元素，那么它将正确检索值。 codepen.io/kevinfarrugia/pen/Wommgd
FormData 对象本身并不是值。您仍然需要调用并遍历 FormData.entries() 才能检索这些值。此外，FormData.entries() 在 Safari、Explorer 或 Edge 中不可用。 developer.mozilla.org/en-US/docs/Web/API/FormData
在浏览器兼容性方面是正确的，但是有polyfills。关于遍历formData.entries()，这取决于您要查找的内容。如果您正在寻找单个字段的值，您可以使用formData.get(name)。参考：get().
是的，我无法让 FormData 在 Chrome 上输出任何内容。

【解决方案3】：

这是来自 W3Schools 的示例：

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}

可以在here找到演示。

【讨论】：

只是一个警告，如果有人想要获取其他类型输入（例如单选按钮或复选框）的选定值，这不会做你想要的。
我不得不将 var obj = {}; 更改为 var obj = [];。
@Sean 为什么它不适用于单选按钮？它们也出现在 elements 属性下
@bluejayke 代码将循环遍历所有单选按钮输入，并将 LAST 单选按钮的“值”保存到 obj，无论选择哪一个。此处演示了该问题（选择“选项 1”）w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW

【解决方案4】：

document.forms 将在您的页面上包含一组表单。您可以遍历这些表单以找到您想要的特定表单。

var form = false;
var length = document.forms.length;
for(var i = 0; i < length; i++) {
    if(form.id == "wanted_id") {
        form = document.forms[i];
    }
}

每个表单都有一个元素数组，然后您可以循环查找所需的数据。您还应该能够按名称访问它们

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);

【讨论】：

为什么没有先提到较短的方法？ =-D
@ArturKlesun 我猜这是因为十年前我开始输入答案的时候，OP 还没有更新，所以我编写了 for 循环来处理大多数情况。我想当时我也在确保浏览器与 IE7 的兼容性，因为我们没有今天更好的环境。

【解决方案5】：

我发现这是最优雅的解决方案。

function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  const formProps = Object.fromEntries(formData);
}

【讨论】：

这个函数是如何从 HTML 中调用的？
@Radek 示例：const loginForm = document.getElementById("login-form"); loginForm.addEventListener("submit", handleSubmit);
工作就像一个魅力，你钉了它！ @DedaDev
这不适用于带有数组字段的表单。想象一下多个<input name="categories[]">，这只会捕获最后一个值。

【解决方案6】：

这是https://stackoverflow.com/a/41262933/2464828的开发示例

考虑

<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
    <input name="formula">
</form>

假设我们要检索名称formula 的输入。这可以通过在onsubmit 字段中传递event 来完成。然后我们可以使用FormData 通过引用SubmitEvent 对象来检索这种精确形式的值。

const check = (e) => {
    const form = new FormData(e.target);
    const formula = form.get("formula");
    console.log(formula);
    return false
};

然后上面的 JavaScript 代码会将输入的值打印到控制台。

如果要迭代值，即获取所有值，请参阅https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

【讨论】：

太棒了！这正是我所需要的。谢谢。
这应该是答案！谢谢！

【解决方案7】：

我这里的 5 美分，使用 form.elements，它允许您通过 it's name 查询每个字段，而不仅仅是通过迭代：

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;

【讨论】：

我应该注意，元素名称是区分大小写的。 form.elements['cardtype'].value 和 form.elements['CardType'].value 不一样。

【解决方案8】：

扩展 Atrur Klesun 的想法...如果您使用 getElementById 访问表单，则可以通过其名称访问它。一行：

document.getElementById('form_id').elements['select_name'].value;

我将它用于单选按钮并且效果很好。我想这里是一样的。

【讨论】：

【解决方案9】：

几个易于使用的表单序列化器，具有良好的文档。

按照 Github 星级排序，

【讨论】：

你真的需要一个完整的数组吗？

【解决方案10】：

这是您问题的答案。

您可以使用this.<<name of the field>>.value 将表单字段的值传递给函数。

并且还将输入提交更改为按钮提交。从表单调用函数。

<body>
   <form name="valform" method="POST" onsubmit="isValidCreditCard(this.cctextbox.value, this.cardtype.value)">
   Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
   Card Type: 
   <select name="cardtype" id="cardtypeid">
      ...
   </select>
   <br/>
   <button type="submit">Verify Credit Card</button>
</body>

从技术上讲，您可以使用document.getElementById("cctextboxid") 在您的函数中执行此操作。但他的解决方案是简洁明了的代码。

【讨论】：

非常干净的解决方案！

【解决方案11】：

我知道这是一篇旧帖子，但也许其他人可以使用它。

// use document.form["form-name"] to reference the form
const ccForm = document.forms["ccform"];

// bind the onsubmit property to a function to do some logic
ccForm.onsubmit = function(e) {

  // access the desired input through the var we setup
  let ccSelection = ccForm.ccselect.value;
  console.log(ccSelection);

  e.preventDefault();
}

<form name="ccform">
  <select name="ccselect">
    <option value="card1">Card 1</option>
    <option value="card2">Card 2</option>
    <option value="card3">Card 3</option>
  </select>
  <button type="submit">Enter</button>
</form>

【讨论】：

【解决方案12】：

请尝试更改代码如下：

<form
   onSubmit={e => {
     e.preventDefault();
     e.stopPropagation();

     const elements = Array.from(e.currentTarget);

     const state = elements.reduce((acc, el) => {
       if (el.name) {
         acc[el.name] = el.value;
       }

       return acc;
     }, {});

     console.log(state); // {test: '123'}
   }}
>
   <input name='test' value='123' />
</form>

【讨论】：

【解决方案13】：

在没有任何库的情况下序列化表单的快速解决方案

function serializeIt(form) {
  return (
    Array.apply(0, form.elements).map(x => 
      (
        (obj => 
          (
            x.type == "radio" ||
            x.type == "checkbox"
          ) ?
            x.checked ? 
              obj
            : 
              null
          :
            obj
        )(
          {
            [x.name]:x.value
          }
        )
      )
    ).filter(x => x)
  );
}

function whenSubmitted(e) {
  e.preventDefault()
  console.log(
    JSON.stringify(
      serializeIt(document.forms[0]),
      4, 4, 4
    )
  )
}

<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>

<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>

<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>

【讨论】：

【解决方案14】：

<form id='form'>
    <input type='text' name='title'>
    <input type='text' name='text'>
    <input type='email' name='email'>
</form>

const element = document.getElementByID('#form')
const data = new FormData(element)
const form = Array.from(data.entries())
/*
form = [
    ["title", "a"]
    ["text", "b"]
    ["email", "c"]
]
*/
for (const [name, value] of form) {
    console.log({ name, value })
    /*
    {name: "title", value: "a"}
    {name: "text", value: "b"}
    {name: "email", value: "c"}
    */
}

【讨论】：

【解决方案15】：

<script>
var inputs = document.getElementById("form_id_here").elements;
    for (i = 0; i < inputs.length; i++) {
      if (inputs[i].type === "text" || inputs[i].type === "textarea") {
        console.log(inputs[i].value); // Get value of input tag which you have entered.
      }
    }
</script>

【讨论】：

【解决方案16】：

上面的一些答案不适合具有多个同名字段的表单，例如multiple <input name="categories[]">，所以我很快就完成了。

function getFormValues(form) {
  const formData = new FormData(form);
  return Array.from(formData.entries()).reduce((prev, [inputName, val]) => {
    return {
      ...prev,
      [inputName]: inputName.endsWith('[]')
        ? prev[inputName]
          ? [...prev[inputName], val]
          : [val]
        : val,
    };
  }, {});
}

// alternative if you don't like reducers and nested ternary statements
function getFormValues(form) {
  const formData = new FormData(form);
  const values = {};
  for (const [inputName, val] of formData.entries()) {
    if (inputName.endsWith('[]')) {
      values[inputName] = values[inputName] ? [...values[inputName], val] : [val];
    } else {
      values[inputName] = val;
    }
  }
  return values;
}

// then attach this to form submit 
function onSubmit(e) {
   e.preventDefault();
   const values = getFormValues(e.target);
   // etc...
}

values 给出类似{ "single": "something", "categories[]": ["one", "two"] }

【讨论】：

【解决方案17】：

<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;

【讨论】：