<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>
用户输入一个短语并指示它是否是正确答案。有没有办法在发送它们时将它们组合成唯一的对,这样它们就不会在服务器上混淆?
目前,我是这样解决的:打开时,启动一个脚本,该脚本通过复选框和文本的被动性运行,并将文本字段和复选框的值组合成一个以“^”分隔的字符串。问题是用户输入可以是任何东西,而且它看起来像一个可怕的拐杖。
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 形式发送表单数据,例如通过 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>