在表单提交时匿名表单输入答案

【问题标题】：Anonymize Form Inputs on Form Submit在表单提交时匿名表单输入
【发布时间】：2020-06-04 09:39:44
【问题描述】：

我正在尝试匿名化所有表单输入，并且只为输入的数据保存 1 或 0，或者不保存。为什么？该表格是一项心理学研究的一部分，其中唯一感兴趣的是受访者是否输入了任何内容。

我已设置onsubmit = "anonymize()" 并尝试了以下代码：

function anonymize() {

   var formFields = ["name", "age", "location"];
   formFields.forEach(loop);

   function loop(field) {
     if (field.value.length > 0) {
      document.getElementsByName(field).value = 1;
     }
 }
}

表单 id/name 是“name”、“age”、“location”。我尝试了“按 ID 获取”和“按名称获取”。我为每个表单输入字段设置了相同的名称和 ID。

有人知道我可以做些什么来让它工作吗？

谢谢！

【问题讨论】：

标签： javascript html forms input

【解决方案1】：

函数循环中的params字段是一个字符串，所以“field.value.length”语句没有意义

【讨论】：

【解决方案2】：

您正在循环遍历字符串数组，而不是表单字段。

   var formFields = ["name", "age", "location"];
   formFields.forEach(loop);

   function loop(field) {
     console.log(field) // "name"
     console.log(typeof field) // "string"
     console.log(field.value) // undefined

     if (field.value.length > 0) { // Error can't read length of undefined
      document.getElementsByName(field).value = 1;
     }
   }

所以field.value.length 应该给你一个错误，因为field.value 是未定义的并且字段只是一个字符串。

这是一个使用 form.elements 的解决方案，不需要您搜索 DOM 元素

$form.onsubmit = function anonymize (evt) {
   const { elements } = evt.target
   ;["name", "age", "location"].forEach(name => {
     elements[name].value = elements[name].value.length ? 1 : ''
   })
}

<form id="$form" action="https://httpbin.org/post" method="POST">
  <input name="name" placeholder="Name">
  <input name="age" placeholder="Age">
  <input name="location" placeholder="Location">
  <input name="Favorite food" placeholder="Favorite food">
  <input type="submit">
</form>

【讨论】：