从带有代码的HTML表单中获取所有输入字段名称

Get all input field names from an HTML form with code

本文关键字：输入 字段 获取 表单 代码 HTML      更新时间：2023-10-17

我有一个HTML输入表单，可以将数据写入谷歌电子表格。我想为电子表格列指定标题名称。为此，我需要获取所有输入字段的name属性。

如何从HTML表单中的每个输入标记中获取name属性？

此代码假设您想要获得的HTML输入标记已经具有name属性。您可以通过标签名称获得所有INPUT元素，标签名称为"INPUT"；输入"；。然后循环它们，测试哪些输入元素具有name属性，并获得名称属性设置：

<html>
<body>
<p>Inputs:</p>
  <input type="text" value="coffee" name="beverage">
  <input type="text" value="Chef salad" name="salad">
  <input type="text" value="Beef" name="mainCourse">
  <input type="text" value="Cake" name="desert">
<p>Click the button to display the value of the inputs</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  var arrayOfInputNames,elmts,L;
  elmts = document.getElementsByTagName("input");
  
  console.log("elmts: " + elmts);
  console.log("Number of inputs: " + elmts.length);
  arrayOfInputNames = [];
  L = elmts.length;
  for (var i = 0; i < L; i++) {
    console.log("i: " + i);
    console.log("value: " + elmts[i].name);
    
    arrayOfInputNames.push(elmts[i].name);
  }
  console.log(arrayOfInputNames);
  document.getElementById("demo").innerHTML = arrayOfInputNames;
}
</script>
</body>
</html>

使用如下所示的javascript获取所有字段名称及其相应值

var serializeForm = (formElement) => {
    const formData = {};
    const inputs = formElement.elements;  
    for (let i = 0; i < inputs.length; i++) {
      if(inputs[i].name!=="")
          formData[inputs[i].name] = inputs[i].value;
    }
    return formData;
}

let data  = [];
$.each($('#contact :input'),(ind, value) => {
  if (value.tagName !== 'BUTTON') {
    if (value.value === "") {
      alert("Empty Value");
      data = null;
      return false;
    } else {
      data.push(value.id+":"+value.value);
    }
  }
});

很适合我在与node组合的小表单中使用#联系人是表单ID…

相关文章：