【问题标题】:validate/echo checkboxes in php form验证/回显 php 表单中的复选框
【发布时间】:2016-06-25 14:44:08
【问题描述】:

第一次使用带有复选框的 PHP 表单。这些方法都适用于我的其他输入,但我显然不明白如何处理数组。我想在刷新/提交时检查复选框,因此用户不必重新做,我正在尝试验证所有表单值以防止注入。

这是输入:

<div>
  <p>
    <input type="checkbox" name="project[]" id="project-type1" value="type1" <?php if ((isset($project)) && (in_array( 'type1', $project))) {echo 'checked="checked"';} ?>/>Type 1</p>
  <p>
    <input type="checkbox" name="project[]" id="project-type2" value="type2" <?php if ((isset($project)) && (in_array( "type2", $project))) {echo 'checked="checked"';} ?>/>Type 2</p>
  <p>
    <input type="checkbox" name="project[]" id="project-type3" value="type3" <?php if ((isset($project)) && (in_array( "type3", $project))) {echo 'checked="checked"';} ?>/>Type 3</p>
  <p>
    <div class="error" id="error-project">
      <?php if (isset($err_project)) { echo $err_project; } ?>
      <?php if (isset($err_project2)) { echo $err_project2; } ?>
    </div>
  </p>
</div>

在这里,我正在尝试修剪、清理和回显复选框数据:

if (isset($_POST['project'])) { 
  $trimmed_project = array_map('trim', ($_POST['project'])); 
  $project = filter_var($trimmed_project, FILTER_SANITIZE_STRING); }

在这里,我确认只允许提交字母、空格和逗号:

if ( !(preg_match('/^([A-Za-z\ \,]+)$/', $project)) ) : $err_project2 = "
<p>Project Type value is invalid.</p>"; endif;

有人可以帮我指出正确的方向吗?

【问题讨论】:

  • 仅供参考-代码片段功能仅适用于您可以在此页面上运行的 HTML/JavaScript/CSS...即-不是不完整的代码示例,当然也不是 PHP。

标签: php forms validation checkbox


【解决方案1】:

您将无法使用 PHP 在页面重新加载时保持复选框处于选中状态;但是,您可以使用 jquery 和 cookie 来解决这个问题。您可以使用下面的示例代码并将其用于您的需要。某些浏览器不允许离线 cookie,因此如果您正在测试此离线使用 IE,它应该可以工作。这样您就可以玩转它并找出最适合您的方式。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Persist checkboxes</title>
    <style>
    button{
      margin-top:8px;
    }
    </style>
  </head>

  <body>
    <div>
      <label for="option1">Option 1</label>
      <input type="checkbox" id="option1">
    </div>
    <div>
      <label for="option2">Option 2</label>
      <input type="checkbox" id="option2">
    </div>
    <div>
      <label for="option3">Option 3</label>
      <input type="checkbox" id="option3">
    </div>

    <button>Check all</button>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>


    <script>
      function handleButtonClick(button){
        if ($(button).text().match("Check all")){
          $(":checkbox").prop("checked", true)
        } else {
          $(":checkbox").prop("checked", false)
        };
        updateButtonStatus();
      }
      function updateButtonStatus(){
        var allChecked = $(":checkbox").length === $(":checkbox:checked").length;
        $("button").text(allChecked? "Uncheck all" : "Check all");
      }
      function updateCookie(){
        var elementValues = {};
        $(":checkbox").each(function(){
          elementValues[this.id] = this.checked;
        });
        elementValues["buttonText"] = $("button").text();
        $.cookie('elementValues', elementValues, { expires: 7, path: '/' })
      }
      function repopulateFormELements(){
        var elementValues = $.cookie('elementValues');
        if(elementValues){
          Object.keys(elementValues).forEach(function(element) {
            var checked = elementValues[element];
            $("#" + element).prop('checked', checked);
          });
          $("button").text(elementValues["buttonText"])
        }
      }
      $(":checkbox").on("change", function(){
        updateButtonStatus();
        updateCookie();
      });
      $("button").on("click", function() {
        handleButtonClick(this);
        updateCookie();
      });
      $.cookie.json = true;
      repopulateFormELements();
    </script>

【讨论】:

  • 这很好用 - 谢谢!对于可能遇到我这种情况的其他人,我要补充的唯一一点是——这个表单位于 WordPress 站点中,我正在使用 wp_enqueue_script 函数来注册 jQuery。单独使用它是行不通的;但是如果我在表单本身中包含 jQuery 脚本的路径,那么它就可以工作。我将不得不调查 WP enqueued 脚本是否存在外部/包含文件的问题。再次感谢 - 非常感谢。我自己会花很长时间才能偶然发现这个解决方案。
猜你喜欢
  • 2012-10-01
  • 2020-08-11
  • 1970-01-01
  • 2018-10-26
  • 2014-08-27
  • 2010-10-01
  • 1970-01-01
  • 2019-03-01
  • 2017-05-04
相关资源
最近更新 更多