Question

我有用于获取元素数组的js脚本：

var inputs = '';
var form_name=document.getElementById("my_form");

for ( var i=0; i < form_name.elements.length; i++ ) {
 var input_name = form_name.elements[i].name;
 var input_value = form_name.elements[i].value;
 inputs += input_name + '=' + input_value + '&';
}

来自HTML表单：

<form action="" method="post" id="my_form">
   <input type="text" name="input_1">
   <input type="text" name="input_2">
</form>

但是使用该脚本，我无法从带有<div></div>标签的表单中获取元素数组：

<div><form action="" method="post" id="my_form_with_divs">
    <div><input type="text" name="input_1"></div>
    <div><input type="text" name="input_2"></div>
</form></div>

脚本无法从my_form_with_divs获取输入名称和值。

如何从my_form_with_divs表单中获取元素数组？

Answer 1

您的Javascript似乎正在寻找错误的元素。

var form_name=document.getElementById("my_form"); //Incorrect
var form_name=document.getElementById("my_form_with_divs");

但是您可以测试以下代码段。

var inputs = '';
var form_name = document.getElementById("my_form_with_divs");

for ( var i=0; i < form_name.elements.length; i++ ) {
 var input_name = form_name.elements[i].name;
 var input_value = form_name.elements[i].value;
 console.log(input_name);
 console.log(input_value);
 inputs += input_name + '=' + input_value + '&';
}

console.log(inputs);

<div><form action="" method="post" id="my_form_with_divs">
    <div><input type="text" name="input_1"></div>
    <div><input type="text" name="input_2"></div>
</form></div>

Answer 2

给所有输入一个类，以便您可以使用document.getElementsByClassName进行选择。

<div><form action="" method="post" id="my_form_with_divs">
    <div><input type="text" name="input_1" class="inputs" value="testvalue1"></div>
    <div><input type="text" name="input_2" class="inputs" value="testvalue2"></div>
</form></div>
<script>
var inputs = document.getElementsByClassName("inputs");

for (var i=0; i < inputs.length; i++ ) {
 console.log("Name: "+inputs[i].name+" Value: "+inputs[i].value);
}
</script>

Answer 3

我会在输入中使用id或类，因此您可以像这样直接访问它们：

<div><form action="" method="post" id="my_form_with_divs">
    <div><input id="input_1" type="text" name="input_1"></div>
    <div><input class="input_2" type="text" name="input_2"></div>
</form></div>

// javascript
var input_1 = document.getElementById('#input_1').value;
var input_2 = document.getElementsByClassName("input_2");
input_2 = input_2[0]; // this may not be the exact code, but this is the idea.

在纯JavaScript中使用类的唯一不好的事情是，即使只有一个或使用索引，您也必须遍历它们以获取值。不好，ID更容易，但是页面中的ID过多会降低性能。尽管有一些ID，您应该没事。

Answer 4

我可能会使用FormData对象，并让它找出表单中的所有元素。您只需要给它表单元素即可。

var formData = new FormData( document.getElementById('my_form_with_divs') );
var text = '';

formData.forEach(function(value, key){
   if ( text ) text += '&';
   text += key +'='+ value;
});

console.log( text );

<div><form action="" method="post" id="my_form_with_divs">
    <div><input type="text" name="input_1" value="x"></div>
    <div><input type="text" name="input_2" value="y"></div>
    <div>
        <select name="gender">
          <option>Male</option>
          <option selected>Other</option>
          <option>Male</option>
        </select>
    </div>
</form></div>

js使用<div>标签从表单获取输入值

4 个答案: