39

我有一个 FormData 对象，我javascript从HTML这样的表单中创建它。该FormData对象似乎没有很好的记录（它可能只是我搜索错误的东西！）。

var form = new FormData(document.getElementById("form"));

我的问题

FormData在发送该对象之前，如何访问该对象的不同输入值？例如。form.name访问以 name 输入到输入中的值form.name。

4

11 回答 11

26

您似乎无法使用FormData.

该FormData对象允许您编译一组键/值对以使用 XMLHttpRequest 发送。它主要用于发送表单数据，但可以独立于表单使用以传输键控数据。如果表单的编码类型设置为“multipart/form-data”，则传输的数据与表单的 submit() 方法用于发送数据的格式相同。

但是，您可以使用像这样的简单 Javascript 来实现它

var formElements = document.forms['myform'].elements['inputTypeName'].value;
于 2013-09-04T05:59:23.500 回答
23

首先，我认为不可能从您指定的表单中构建 FormData 对象，并使用已接受答案中描述的方法从表单中获取值——这更像是一个附录！

看起来您可以从 FormData 对象中获取一些数据：

var formData = new FormData();
formData.append("email", "test1@test.com");
formData.append("email", "test2@test.com");
formData.get("email");

这将只返回该键的第一项，在这种情况下，它将返回“test1@test.com”，以获取所有电子邮件地址，请使用以下代码

formData.getAll("email")

另请参阅：关于 formdata 获取方法的 MDN 文章。

于 2015-04-29T16:48:26.060 回答
16

FormData.get将在一小部分浏览器中执行您想要的操作 - 查看浏览器兼容性图表以了解哪些（目前只有 Chrome 50+ 和 Firefox 39+）。鉴于这种形式：

<form id="form">
  <input name="inputTypeName">
</form>

您可以通过以下方式访问该输入的值

var form = new FormData(document.getElementById("form"));
var inputValue = form.get("inputTypeName");
于 2016-06-05T20:36:54.430 回答
10

根据MDN：

实现 FormData 的对象可以直接在 for...of 结构中使用，而不是 entries()：for (var p of myFormData) 等价于 for (var p of myFormData.entries())

因此，您可以像这样访问 FormData 值：

var formData = new FormData(myForm);

for (var p of formData) {
    let name = p[0];
    let value = p[1];

    console.log(name, value)
}
于 2019-04-25T13:56:38.107 回答
8

只是从@Jeff Daze 添加到先前的解决方案 - 您可以使用该FormData.getAll("key name")函数从对象中检索所有数据。

于 2016-03-03T17:46:39.360 回答
8

这是从 FormData 中检索键值对的解决方案：

var data = new FormData( document.getElementById('form') );
data = data.entries();              
var obj = data.next();
var retrieved = {};             
while(undefined !== obj.value) {    
    retrieved[obj.value[0]] = obj.value[1];
    obj = data.next();
}
console.log('retrieved: ',retrieved);
于 2017-03-10T10:28:58.333 回答
6

我的解决方案for-of

const formData = new FormData(document.getElementById('form'))

for (const [key, value] of formData) {
  console.log('»', key, value)
}
于 2020-05-20T19:50:27.413 回答
3

它会起作用的

let form = document.querySelector("form");
let data = new FormData(form)
formObj = {};
for (var pair of data.entries()) {
  formObj[pair[0]] = pair[1]
}
console.log(formObj)

于 2019-11-12T07:37:47.523 回答
1

如果您要做的是获取 FormData 的内容或附加到它，这就是您应该使用的：

假设您要上传这样的图像：

<input type="file" name="image data" onChange={e => 
uploadPic(e)} />

关于更改处理函数：

const handleChange = e => {
    // Create a test FormData object since that's what is needed to save image in server

   let formData = new FormData();

    //adds data to the form object

    formData.append('imageName', new Date.now());
    formData.append('imageData', e.target.files[0]);

}

append：向创建的 formData 对象添加一个条目，其中 imageData 是键，e.target.files[0] 是属性

您现在可以将此包含图像数据的 imageData 对象发送到您的服务器进行处理

但是要确认这个 formData 是否有值，一个简单的 console.log(formData)/ 不会这样做，你应该做的是：

//don't forget to add this code to your on change handler 
function
for (var value of formData.values()) {
   console.log(value); 
}

//我希望这能解释我的答案，它适用于 vanilla JavaScript 和 React.js ...提前感谢您的支持

于 2020-02-25T19:16:43.643 回答
0

另一个解决方案：
HTML：

<form>
<input name="searchtext"  type="search" >'
<input name="searchbtn" type="submit" value="" class="sb" >
</form>

JS：

$('.sb').click( function() {
    var myvar=document.querySelector('[name="searchtext"]').value;
    console.log("Variable value: " + myvar);
});
于 2018-01-07T16:07:40.483 回答
0

使用runarberg/formsquare库 ( ) 的简单 HTML5 方式（表单到对象npm i --save formsquare）：

import formsquare from "formsquare";

const valuesObject = formsquare.filter((el) => !el.disabled).parse(document.getElementById('myForm'));
//=> {"foo": "bar"}

https://github.com/runarberg/formsquare

于 2020-02-08T18:16:55.267 回答