访问FormData值

Question

我有一个FormData对象,我javascript从这样的HTML形式创建.该FormData对象似乎没有很好的文档(它可能只是我搜索错误的东西!).

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

我的问题

FormData在发送之前如何访问此对象的不同输入值？例如.form.name使用名称访问输入到输入的值form.name.

Answer 1

看来你无法使用表单元素的值FormData.

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

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

var formElements = document.forms['myform'].elements['inputTypeName'].value;

Answer 2

首先,我认为不可能从您指定的表单中构建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 get方法的MDN文章

希望这可以帮助!

另请注意,如果要在chrome中对此进行测试,则必须启用实验性Web功能标记:

注意:对"追加"以外的方法的Chrome支持目前位于"启用实验性Web平台功能"标志的后面.

MDN页面; 在浏览器兼容性部分中

Answer 3

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");

Answer 4

这是从 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);

Answer 5

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

Answer 6

我的解决方案是for-of

\n\n

const formData = new FormData(document.getElementById('form'))\n\nfor (const [key, value] of formData) {\n  console.log('\xc2\xbb', key, value)\n}\n

\n

Answer 7

根据MDN：

实现 FormData 的对象可以直接用于 for...of 结构，而不是 entry()： 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)
}

Answer 8

我发现了一种将表单数据转换为对象的极其简单的方法：

  const formData = new FormData(evt.currentTarget)
  const formObject = Object.fromEntries(formData.entries()) // {}

请注意，对于多个条目（例如复选框）；你需要单独处理formData.getAll("favFruits")（例如）

const handleSubmit = (evt) => {
  evt.preventDefault()
  const formData = new FormData(evt.currentTarget)
  const formObject = Object.fromEntries(formData.entries())

  // caveat for multiple values
  formObject.favFruits = formData.getAll("favFruits")
  console.log(formObject)
}

<form onsubmit="handleSubmit(event)">
  <input type="text" value="James" name="firstName" required placeholder="First Name..." />
  <input type="text" name="lastName" value="Bond" required placeholder="Last Name..." />
  <label>
  <br />
  <h5>Fav Fruits</h5>
  <input type="checkbox" name="favFruits" value="watermelon" />
  Watermelon
  </label>
  <label>
  <input type="checkbox" name="favFruits" checked value="apple" />
  Apple
  </label>
  <label>
  <input type="checkbox" name="favFruits" checked value="orange" />
  Orange
  </label>
  <br />
  <br />
  <input type="submit" value="Submit" />
</form>