如何发送依赖的 html 表单字段？

Question

<form>
    <input name="checkbox" type="checkbox"></input>
    <input name="value" type="text"></input>

    <input name="checkbox" type="checkbox"></input>

    <input name="value" type="text"></input>
... 
</form>

用户输入一个短语并指示它是否是正确答案。有没有办法在发送它们时将它们组合成唯一的对，这样它们就不会在服务器上混淆？

目前，我是这样解决的：打开时，启动一个脚本，该脚本通过复选框和文本的被动性运行，并将文本字段和复选框的值组合成一个以“^”分隔的字符串。问题是用户输入可以是任何东西，而且它看起来像一个可怕的拐杖。

Answer 1

分组-

name

要将两个（复选框和输入）键值对分组，它们应该具有相同的可识别特征。您可以为每个组提供 ID，并在配对的键中使用它来显示它们的连接。

示例：

<form>
  <div>
    <input name="is-answer-1" type="checkbox">
    <input name="answer-1">
  </div>
  <div>
    <input name="is-answer-2" type="checkbox">
    <input name="answer-2">
  </div>
  <div>
    <input name="is-answer-3" type="checkbox">
    <input name="answer-3">
  </div>
</form>

---

如果您的后端是 PHP，您可能需要按如下方式格式化您的组：

<form>
  <div>
    <input name="group[0][is-answer]" type="checkbox">
    <input name="group[0][answer]">
  </div>
  <div>
    <input name="group[1][is-answer]" type="checkbox">
    <input name="group[1][answer]">
  </div>
  <div>
    <input name="group[2][is-answer]" type="checkbox">
    <input name="group[2][answer]">
  </div>
</form>

这会自动以预期格式将数据提供为（关联）数组。

使用 JSON

如果您不需要以下提交导航，您还可以以 JSON 形式发送表单数据，例如通过 Fetch API。

JSON 是一种数据传输格式，几乎得到普遍支持。您可能希望手动构建 JSON 以更好地控制结构，而不是天真地将数据收集为数组。

示例：

const form = document.forms[0];
form.addEventListener("submit", evt => {
  evt.preventDefault(); // Do not submit-and-navigate; we "submit" manually
  
  // Collect form data as desired:
  const data = Array.from(form.elements)
    .filter(el => el.nodeName !== "BUTTON")
    .reduce((acc, el, i) => {
      const groupIndex = Math.floor(i / 2);
      const group = (acc[groupIndex] ??= {});

      if (i % 2 === 0) {
        // Checkbox
        group.isAnswer = el.checked;
      } else {
        // Input
        group.text = el.value;
      }
      return acc;
    }, []);
  
  // Convert to JSON
  const json = JSON.stringify(data);
  
  // See the JSON
  console.log(json);
  
  // Send (example):
  // fetch("http://example.com", { body: json });
});

<form>
  <div>
    <input type="checkbox">
    <input>
  </div>
  <div>
    <input type="checkbox">
    <input>
  </div>
  <div>
    <input type="checkbox">
    <input>
  </div>
  
  <button>Send</button>
</form>

注意：该示例手动构造表单数据，而浏览器需要

name

属性。

使用字段顺序

注意：这只是为了完整起见。一般来说，我推荐 JSON 或第一种方法。

表单字段按树形顺序发送。这意味着（假设所有字段均已发送），第一个 is-answer (

checkbox

) 和第一个文本 (

value

) 值相关，第二个 is-answer 和第二个文本值等。

但仅发送 checked 复选框，这意味着未选中的复选框值将被删除，通过移动以下值来破坏顺序。

为了防止“不是答案”值被丢弃，必须发送“垃圾”值。

<select>

可能有两个选项，例如复选框。此外，始终发送

<select>

的值，这使其成为可行的替代方案。

示例：

<form>
  <div>
    <select name="is-answer">
      <option value="false">Is not answer</option>
      <option value="true">Is answer</option>
    </select>
    <input name="text">
  </div>
  <div>
    <select name="is-answer">
      <option value="false">Is not answer</option>
      <option value="true">Is answer</option>
    </select>
    <input name="text">
  </div>
  <div>
    <select name="is-answer">
      <option value="false">Is not answer</option>
      <option value="true">Is answer</option>
    </select>
    <input name="text">
  </div>
</form>