Question

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

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

Answer 1

例如，如果所有输入都有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 x = document.getElementsByTagName("input");

  console.log("x: " + x);
  console.log("Number of inputs: " + x.length);

  var arrayOfInputNames = [];

  for (var i = 0; i < x.length; i++) {
  //for(key in x) {
    console.log("i: " + i);
    console.log("value: " + x[i].name);

    arrayOfInputNames.push(x[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);
    }
  }
});

适用于我在节点组合中使用的小表格。 #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表单中获取所有输入字段名称

3 个答案: