有没有更简单的方法用纯js获取formData？

Question

我的html结构如下，一个table嵌套在表单中，input或select中的option中的一些信息将通过[发送=23=].

<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，验证可以获取到form中的所有数据。

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

这应该适用于所有输入元素和 Select 元素。如果您有多个表单，请通过 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

此代码将 return 对象包含我们在表单

中拥有的所有键和值

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

结果：

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

有没有更简单的方法用纯js获取formData？

Is there a simpler way to get formData with pure js?

javascript

form-data