Javascript 如何在刷新时重新填充表单中的复选框并将表单值发布到页面？_Javascript_Php_Ajax

Javascript 如何在刷新时重新填充表单中的复选框并将表单值发布到页面？

javascript php ajax

Javascript 如何在刷新时重新填充表单中的复选框并将表单值发布到页面？,javascript,php,ajax,Javascript,Php,Ajax,我使用ajax脚本在页面刷新或发送到另一个页面然后再返回时重新填充页面上的复选框。脚本工作正常，因为页面刷新后仍将选中复选框我遇到的问题是，这些复选框用作过滤器。因此，当单击时，它会发布到页面上，我的php脚本会将每个值放入一个字符串中，用于我的查询。刷新页面时，复选框保持选中状态，但不会将值发布到页面。如何让这个Ajax脚本在重新填充页面刷新上的复选框后发布表单的值以下是Ajax脚本： <script src="http://ajax.googleapis.com/ajax/libs

我使用ajax脚本在页面刷新或发送到另一个页面然后再返回时重新填充页面上的复选框。脚本工作正常，因为页面刷新后仍将选中复选框

我遇到的问题是，这些复选框用作过滤器。因此，当单击时，它会发布到页面上，我的php脚本会将每个值放入一个字符串中，用于我的查询。刷新页面时，复选框保持选中状态，但不会将值发布到页面。如何让这个Ajax脚本在重新填充页面刷新上的复选框后发布表单的值

以下是Ajax脚本：

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

和html表单

 <form id="form" method="post" action="">
<input type="checkbox" name="2kandunder" class="checkbox" id="1" onchange="$('#form').submit();" <?=(isset($_POST['2kandunder'])?' checked':'')?>/> $2000 And Under   

<input type="checkbox" name="2kto4k" class="checkbox" id="2" onchange="$('#form').submit();" <?=(isset($_POST['2kto4k'])?' checked':'')?>/> $2001 To $4000

<input type="checkbox" name="4kandup"  class="checkbox" id="3" onchange="$('#form').submit();" <?=(isset($_POST['4kandup'])?' checked':'')?>/> $4001 And Up

在存储cookie时，还可以在PHP中使用cookie信息来重新填充查询过滤器和表单上的复选框

<?php

    $checkboxes = array('checkbox1' => false, 'checkbox2' => false, 'checkbox3' => false, 'checkbox4' => false, );

    if (isset($_COOKIE['elementValues'])) {
        /* 
            Cookie values are stored like JSON
        */
        $raw = json_decode($_COOKIE['elementValues'], true); //cast to array
        var_dump($raw);
        foreach($raw as $input_name => $value) {
            if (isset($checkboxes[$input_name])) {
                $checkboxes[$input_name] = $value; //true/false
            }
        }
    }

    var_dump($checkboxes);


    if (isset($_POST["checkbox1"]) || $checkboxes['checkbox1']) {
        $arguments[] = "AND `2kandunder` = 'yes'";
    }
    if (isset($_POST["checkbox2"]) || $checkboxes['checkbox2']) {
        $arguments[] = "AND `2kto4k` = 'yes'";
    }
    if (isset($_POST["checkbox3"]) || $checkboxes['checkbox3']) {
        $arguments[] = "AND 4kandup = 'yes'";
    }

    $str = '';
    if(!empty($arguments)) {
        $str = implode(' ',$arguments);
    }

    echo 'QUERY FILTER : ' . $str;
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Checkbox state - Coookies</title>
    </head>
    <body>
        <form action="#" method="POST">
            <?php
                foreach($checkboxes as $input_name => $checked) {
                    echo '<input type="checkbox" id="'.$input_name.'" name="'.$input_name.'"'.($checked?' checked':'').' />';
                }
            ?>
            <input type="submit" />
        </form>


        <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: '/' })
          }

          $(":checkbox").on("change", function(){
            updateButtonStatus();
            updateCookie();
          });

          $("button").on("click", function() {
            handleButtonClick(this);
            updateCookie();
          });

          $.cookie.json = true;
        </script>
    </body>
</html>

只需使用$_COOKIE['elementValues']访问在PHP中创建的COOKIE，即可在页面上重建过滤器load@darkbee谢谢你的回复。如果我能让它工作，这将是完美的。我回显了$_COOKIE['elementValues'，它显示：2kandunder:true，2kto4k:false，4kandup:false。因此，我在php中添加了以下内容：如果$_COOKIE[2kandunder]=true{$arguments[]=和2kandunder='yes'；}我走对了吗？这会将它放入字符串中，但无论它是false还是true，它始终在查询中。你能给我一个简单的例子，说明如何将它添加到我现有的ifisset$\u POST php中吗？如果你的javascript放在body close标记后面或$document.ready中，效果会很好。@manta很抱歉我不知道，但我不确定我是否能理解。你是说$'form'。提交；如果放置正确，是否应该工作？我有ajax，至少我认为它的ajax脚本就在结束body标记之后。我试图添加$form.submit；就在重新填充元素之后；试图让它提交我的表单，但它会导致页面闪烁并转到“未找到页面”。我对$document.ready一无所知，在我现有的ajax脚本中找不到它？working fiddle:

$('#form').submit();

<?php

    $checkboxes = array('checkbox1' => false, 'checkbox2' => false, 'checkbox3' => false, 'checkbox4' => false, );

    if (isset($_COOKIE['elementValues'])) {
        /* 
            Cookie values are stored like JSON
        */
        $raw = json_decode($_COOKIE['elementValues'], true); //cast to array
        var_dump($raw);
        foreach($raw as $input_name => $value) {
            if (isset($checkboxes[$input_name])) {
                $checkboxes[$input_name] = $value; //true/false
            }
        }
    }

    var_dump($checkboxes);


    if (isset($_POST["checkbox1"]) || $checkboxes['checkbox1']) {
        $arguments[] = "AND `2kandunder` = 'yes'";
    }
    if (isset($_POST["checkbox2"]) || $checkboxes['checkbox2']) {
        $arguments[] = "AND `2kto4k` = 'yes'";
    }
    if (isset($_POST["checkbox3"]) || $checkboxes['checkbox3']) {
        $arguments[] = "AND 4kandup = 'yes'";
    }

    $str = '';
    if(!empty($arguments)) {
        $str = implode(' ',$arguments);
    }

    echo 'QUERY FILTER : ' . $str;
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Checkbox state - Coookies</title>
    </head>
    <body>
        <form action="#" method="POST">
            <?php
                foreach($checkboxes as $input_name => $checked) {
                    echo '<input type="checkbox" id="'.$input_name.'" name="'.$input_name.'"'.($checked?' checked':'').' />';
                }
            ?>
            <input type="submit" />
        </form>


        <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: '/' })
          }

          $(":checkbox").on("change", function(){
            updateButtonStatus();
            updateCookie();
          });

          $("button").on("click", function() {
            handleButtonClick(this);
            updateCookie();
          });

          $.cookie.json = true;
        </script>
    </body>
</html>