防止表单提交后重新加载页面后复选框值移动

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 ， optionb选中optiona和optionb值。

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

如果这很重要，我正在使用WordPress。 :)

一些澄清：

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

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

一次，我将这些值存储在$_SESSION['userpref'] ，它们似乎发生了变化。 换句话说，数组变成[1，1，0]或[1，1]之类的东西，并且没有第三个值表示未选中的复选框。

因此，无需在重新加载时选中第一个和第三个复选框。 浏览器检查第一个和第二个。 第三个复选框保持未选中状态。

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

Answer 1

我认为userpref abc => userpref （8件事）

你必须提交userpref optiona + optionb + OptionC中=> “ABC”，如“010”

所以，我认为你使用

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

你可以的。

<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();
}

Answer 2

像这样测试您的值：

<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 3

问题在于，您正在尝试根据从浏览器提交的索引获取相应的“打开/关闭”复选框。 因此，当您仅选择复选框索引0和2时会发生什么？ 仅将提交那2个，类似于userpref[]=optiona&userpref[]=optionc ，现在您在数组中只有2个位置，那么将选择前2个复选框！

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

要说明的另一点是，如果未选中任何复选框，则以下行将成为问题： $_SESSION['userpref'] = $_POST['userpref']; 。

祝好运！！