Question

我的html结构如下，表格嵌套在表格中，input或option中的select的一些信息将通过ajax发送。

<form>
<table>
    <tr>
        <td>date</td>
        <td><input class="data" type='text' name="date"></td>
    </tr>
    <tr>
        <td>type</td>
        <td>
        <select id="type" name="type">
            <option value="word">word</option>
            <option value="phase">phrase</option>
            <option value="sentence">sentence</option>
            <option value="grammar">grammar</option>
        </select>
    </td>
    </tr>
    <tr>
        <td>content</td>
        <td><textarea  class="data" name='content' cols="80" rows="8"></textarea></td>
    </tr>
    <tr>
        <td>meaning</td>
        <td><textarea  class="data" name='meaning' cols="80" rows="8"></textarea></td>
    </tr>
    <tr>
        <td>source</td>
        <td><input class="data" type="text" name="source"></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" value="submit" id="submit"></td>
    </tr>
</table>
</form>

我使用以下代码获取formData，已验证表单中的所有数据都可以获取。

var elements = document.getElementsByClassName("data");
var formData = new FormData(); 

for(var i = 0; i < elements.length; i++)
{
    formData.append(elements[i].name, elements[i].value);
}

var mySelect = document.getElementById("type");
var index = mySelect.selectedIndex;
var svalue = mySelect.options[index].value;
var sname = "type";
formDate.append(sname,svalue);

这里的行有点长，我想要更多小的js代码。
使用纯js（而不是jQuery）获取formData的更简单方法吗？

Answer 1

只需将整个表单传递给对象。

var formData = new FormData( document.querySelector("form") )

Answer 2

这应该适用于所有输入元素和选择元素。如果您有多个表单，请按ID获取表单。谢谢。如果有任何错误，请通知我。通过手机打字。

var elements = document.getElementsByTagName("form");

var formData = new FormData(); 
var ipts = elements.querySelector('input, select');
for(var ipt of ipts)
{
    formData.append( ipt.name, ipt.value );
}

Answer 3

此代码将返回带有我们所有形式的键和值的对象

var formData = Object.fromEntries(new FormData(document.querySelector('form')).entries());

结果：

{ key_1: value_1, key_2: value_2, key_3: value_3, ... }

有没有一种简单的方法来使用纯js获取formData？

3 个答案: