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

Question

我有一个 HTML 输入表单，用于将数据写入我的 Google 电子表格。我想为电子表格列分配标题名称。为此，我需要获取所有输入字段的 name 属性。

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

Answer 1

此代码假定您要获取的 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>

Answer 2

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.js 组合使用的小形式非常适合我使用。 #contact 是表单 ID...

Answer 3

使用 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;
}

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

Get all input field names from an HTML form with code

html

javascript

web-applications

getelementsbytagname

google-apps-script