FormData获取表单,发现有些字段没有获取到,
使用 new FormData(formElement) 创建一个 FormData 对象,它会自动收集表单中的所有输入字段数据(包括文本框、文件输入、选择框等)
获取表单的代码:
var mainstr = new FormData(document.getElementById("inputInfoForm"));
FormData 会自动收集 表单中所有具有 name 属性的可提交元素,但不会收集 没有 name 属性的元素。
示例如下:
<form id="inputInfoForm">
<input type="text" name="username" value="张三">
<input type="text" value="李四"> <!-- 没有 name,不会被 FormData 收集 -->
<input type="password" name="password" value="123456">
<textarea name="bio">这是简介</textarea>
<select name="gender">
<option value="male" selected>男</option>
<option value="female">女</option>
</select>
<input type="file" name="profilePic">
</form>
<script>
var formElement = document.getElementById("inputInfoForm");
var formData = new FormData(formElement);
for (let pair of formData.entries()) {
console.log(pair[0] + ": " + pair[1]);
}
</script>
输出
username: 张三
password: 123456
bio: 这是简介
gender: male
profilePic: (文件对象,若选择了文件)
注意: value=“李四” 的输入框没有 name,所以它不会出现在 FormData 里!
如何手动添加没有 name 的元素?
如果某个输入框没有 name,但你仍然想把它加入 FormData,可以使用 append() 方法:
formData.append("customField", document.querySelector("input[type='text']").value);