如何向表单数据对象添加或追加额外的名称-值对？

Question

如何将数组添加到该对象的最后一个：

const formElment = document.querySelector(".form");

formElment.addEventListener("submit", (event) => {
  event.preventDefault();

  var array = [];
  var checkboxes = document.querySelectorAll("input[type=checkbox]:checked");

  for (var i = 0; i < checkboxes.length; i++) {
    array.push(checkboxes[i].value);
    console.log(checkboxes[i].id);
  }

  const formData = new FormData(formElment);
  const data = Object.fromEntries(formData);
  
  console.log(data);

});

我使用

eventlistner

来获取表单数据和 checkbox=checked。所以现在我想将那些选定的复选框 ID 添加到对象的末尾并通过 API 发送。

Answer 1

您可以在使用 FormData 和 Object.fromEntries 创建

data

后添加复选框值。

请注意，复选框元素不应具有 name 属性 - 那么它们不会包含在 formData 对象中。

const formElment = document.forms.form01;

formElment.addEventListener("submit", (event) => {
  event.preventDefault();

  let checkboxes = event.target.checkboxes.elements;

  let formData = new FormData(formElment);
  let data = Object.fromEntries(formData);
  data.checkboxes = [...checkboxes]
                      .filter(input => input.checked)
                      .map(input => input.value);
  console.log(data);
});

fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: inline;
}

<form name="form01">
  <input type="text" name="something" value="Testing 1 2 3">
  <fieldset name="checkboxes">
    <input type="checkbox" value="1">
    <input type="checkbox" value="2">
    <input type="checkbox" value="3">
  </fieldset>
  <button>Submit</button>
</form>

Answer 2

const formElment = document.querySelector(".form");

formElment.addEventListener("submit", (event) => {
  event.preventDefault();

  var array = [];
  var checkboxes = document.querySelectorAll("input[type=checkbox]:checked");
  let idobj = {}
  for (var i = 0; i < checkboxes.length; i++) {
    array.push(checkboxes[i].value);
    console.log(checkboxes[i].id);
    idobj[`id${checkboxes[i].id}`] = checkboxes[i].id    
  }
  
  const formData = new FormData(formElment);
  const data = Object.fromEntries(formData);
  Object.assign(data, idobj)
  
  console.log(data);

});

我为 id

let idobj = {}

创建了一个新对象，并添加了所有 id

idobj[

id${checkboxes[i].id}

] = checkboxes[i].id

。 根据我的理解，你想将 id 添加到

data

对象，所以我这样做了 通过编写代码

Object.assign(data, idobj)

Answer 3

为什么 [OP] 不首先查阅

FormData

上的文档，例如 MDN 的文档。人们立即发现

FormData

的设计有很多助手，例如

set

或

append

。

由于OP没有提供任何示例代码，我们要讨论的场景假设存在作为表单一部分的表单控件和与自己的表单元素无关的表单控件。

为了将后面的名称-值对附加到与表单元素相关的表单数据对象，必须仅针对不属于表单的元素。

可以通过组合已被查询的元素的节点列表来实现这一点。

[type="checkbox"]:checked

，必须额外检查和过滤每个控制节点是否属于表单元素......例如...

[...document.querySelectorAll('[type="checkbox"]:checked')]
  .filter(elm => elm.form === null)

...但是人们也可以想出一个涵盖这种情况的选择器...例如...

const selectCheckedCheckboxWhichIsNotPartOfAForm =
  '[type="checkbox"]:checked:where(:not(:is(form [type="checkbox"])))';

剩下的唯一事情就是

append

将每个匹配的控制节点的名称-值对与表单相关的表单数据对象进行匹配。

...可执行示例代码...

function handleSubmit(evt) {
  evt.preventDefault()

  const elmForm = evt.target;
  const formData = new FormData(elmForm);

  const selectCheckedCheckboxWhichIsNotPartOfAForm =
    '[type="checkbox"]:checked:where(:not(:is(form [type="checkbox"])))';

  document
    .querySelectorAll(selectCheckedCheckboxWhichIsNotPartOfAForm)
    .forEach(elm => formData.append(elm.name, elm.value));

  console.log({
    formDataObject: Object.fromEntries(formData)
  });
}
document
  .querySelector('form')
  .addEventListener('submit', handleSubmit);

body { margin: 0; }
form, fieldset { width: 45%; }
form fieldset { width: 100%; }
[type="submit"] { margin: 4px 0 0 2px; }

.as-console-wrapper { left: auto!important; bottom: 0; top: 8px; width: 50%; min-height: 100%; }

<fieldset>
  <legend>
    <strong>No-Form</strong> Data
  </legend>

  <label>
    <span>
      foo check
    </span>
    <input type="checkbox" name="foo" value="foo">
  </label>
  <label>
    <span>
      bar check
    </span>
    <input type="checkbox" name="bar" value="bar" checked>
  </label>
</fieldset>

<form>
  <fieldset>
    <legend>Form Data</legend>

    <label>
      <span>
        baz value
      </span>
      <input type="text" name="baz" value="baz">
    </label>

    <div>
      <label>
        <span>
          bizz check
        </span>
        <input type="checkbox" name="bizz" value="bizz" checked>
      </label>
      <label>
        <span>
          booz check
        </span>
        <input type="checkbox" name="booz" value="booz">
      </label>
    </div>
  </fieldset>

  <button type="submit">Submit</button>
</form>

Answer 4

我认为你可以将数组的值添加到 FormData 中。

formData.append("checkedValues", array.join(","));

然后您可以将表单发布到 API。

参考：https://developer.mozilla.org/en-US/docs/Web/API/FormData/append