在表单提交页面重新加载后阻止复选框值移位

Question

我创建了一个表单，在出现错误时重新加载，并在成功提交的情况下转到其他页面。

我不希望用户在出现错误时一次又一次地填充所有值，因此我将它们存储在会话变量中并在表单中填充它们。

这是表单的HTML：

<form action="preference.php" method="post">
<input id="optiona-cb" name="userpref[]" type="checkbox" value="optiona" <?php if((isset($_SESSION['userpref'][0]) && $_SESSION['userpref'][0])) { echo 'checked'; } ?>/>
<label for="optiona-cb">optiona</label>
<input id="optionb-cb" name="userpref[]" type="checkbox" value="optionb" <?php if((isset($_SESSION['userpref'][1]) && $_SESSION['userpref'][1])) { echo 'checked'; } ?>/>
<label for="optionb-cb">optionb</label>
<input id="optionc-cb" name="userpref[]" type="checkbox" value="optionc" <?php if((isset($_SESSION['userpref'][2]) && $_SESSION['userpref'][2])) { echo 'checked'; } ?>/>
<label for="optionc-cb">optionc</label>
... More Input Fields
</form>

这是来自preference.php的代码：

$_SESSION['userpref'] = $_POST['userpref'];
$_SESSION['user_login'] = $_POST['user_login'];
$_SESSION['user_email'] = $_POST['user_email'];
.. More code

在页面重新加载时，正确填充username和email值。但是，复选框值会移动。例如，如果用户仅检查optionc，则会在重新加载时检查值optiona。类似地，如果用户检查optiona和optionc，则检查值optiona和optionb。

换句话说，勾选的复选框中的“漏洞”会在页面重新加载时填充。如何确保复选框值不会移动以填充空值？

如果重要的话，我正在使用WordPress。 :)

一些澄清：

复选框值存储在userpref[]中，并使用$_POST['userpref']访问。我不知道浏览器如何使用$_POST传递有关已选中复选框的信息。

假设用户检查第一个和第三个复选框。还假设userpref[]为每个选中的复选框存储1，为每个未选中的复选框存储0。在这种情况下，该值将为[1,0,1]。

有一次，我将这些值存储在$_SESSION['userpref']中，它们似乎有所改变。换句话说，数组变为类似[1,1,0]或类似[1,1]，没有第三个值意味着未选中复选框。

因此，不要在重新加载时检查第一个和第三个复选框。浏览器检查第一个和第二个。第三个复选框仍未选中。

我的问题是，我该怎么做才能确保复选框保留其检查取消选中状态，并且它不会移动以填充“漏洞”或“0”。

Answer 1

像这样测试你的价值观：

<input id="optiona-cb" name="userpref[]" type="checkbox" value="optiona" 
  <?php if (in_array('optiona', $_SESSION['userpref'])) echo 'checked' ?> />

说明：

您不能依赖[0]或[1]等数字索引，因为正如您所注意到的（并且有人评论过），只有选中的复选框才会发送到服务器。因此，例如，如果没有检查第一个，但第二个是，$_SESSION['userpref'][0]将引用第二个（因为它是第一个检查）。

Answer 2

我认为userpref abc => 000,001,010,011,100,101,110,111（8件事）

你应该提交qazxsw poi options + options + options =>“abc”，例如“010”

所以，我认为你使用

userpref

你可以这样。

substr($_POST['userpref'], 0, 1), 
substr($_POST['userpref'], 1, 1),
substr($_POST['userpref'], 2, 1)

Answer 3

问题是，您正试图根据从浏览器提交的索引来获取复选框的相应“开/关”。那么，当你只选择复选框索引0和2时会发生什么？只有那两个会被提交，像

<input id="userpref" name="userpref" type="hidden" />
handleSubmit() {
    //...

    const a = $("#optiona").prop("checked") ? "1" : "0";
    const b = $("#optionb").prop("checked") ? "1" : "0";
    const c = $("#optionc").prop("checked") ? "1" : "0";
    $("#userpref").val(a+b+c);

    //...
    window.document.forms[0].submit();
}

，现在你只有2个位置在阵列中，然后前2个复选框将被选中！

基本上，它不是正确匹配，因此您应该根据复选框值进行验证。

另一个要点是，如果没有选中任何复选框，则以下行将成为问题userpref[]=optiona&userpref[]=optionc。

祝好运！！