【问题标题】:Keep Checkboxes checked after failed form submission表单提交失败后保持复选框处于选中状态
【发布时间】:2017-05-12 21:20:49
【问题描述】:

我已经查看了许多类似的问题,但在提交和验证后我仍然无法保留我的复选框选择。我将复选框设置为数组,我需要以这种方式保留它们以便稍后提交到我的数据库。我知道我的数组正在被填充,因为我在最后做了一些调试,而我的内爆“字符串版本”包含了它应该包含的数组数据。

PHP 验证代码(与我的数组有关的部分)。

    <?php
    // define variables and set to empty values
    $serviceAttendedErr = $serviceAttendedErrClass = $firstNameErr = $firstNameErrClass = $lastNameErr = $lastNameErrClass = $emailErr = $genderErr = $websiteErr = $checkedTermsErr = "";
    $name = $email = $gender = $classes = $myDateTime = $course = $checkedTerms = $successMessage = $string_version_serviceAttended = "";
    $serviceAttended = [];
    //$errors = 0;

    if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $myDateTime = date('m/d/Y g:i a');
    //$errors = $_POST["submit"]; // Resetting this variable for each submit of the form

    // making sure someone doesn't just add white spaces into the input field to bypass the validation
    $firstName = test_input($_POST["firstName"]);
    $lastName = test_input($_POST["lastName"]);

    if (!empty($_POST["serviceAttended"])){
        $serviceAttended = $_POST["serviceAttended"];
        //Making a string version of the above array so it can be used for debug on the screen
        $string_version_serviceAttended = implode(',', $serviceAttended);
    }

    // Checking to make sure at least one service button has been chosen, 
    // can also specify a particular one is needed as well (see isChecked Function)
        if(isChecked('serviceAttended','')) { 
            $serviceAttendedErrClass = " alert alert-success";
        } else { 
            $serviceAttendedErr = " <h5>Please Choose At Least One!</h5>";
            $serviceAttendedErrClass = " alert alert-danger";
        }

HTML 复选框(注意:我使用引导程序进行格式化)

<div class="form-group row">

        <div class="col-12 card card-block requiredIcon <?php echo $serviceAttendedErrClass; ?>">
            <div class = "text-danger offset-5"><?php echo $serviceAttendedErr;?></div>
            <div class="btn-group offset-1" data-toggle="buttons" for="serviceAttended[]">

                <label class="form-check-label text-left mx-2">When Did You Attended?</label>

                <label class="col-2 btn btn-secondary btn-responsive not-active">   
                    <input name="serviceAttended[]" type="checkbox" value="8am" <?php if(isset($serviceAttended) && is_array($serviceAttended) && in_array('8am', $serviceAttended)) echo 'checked="checked"'; ?> > 8:00 AM
                </label>
                <label class="col-2 btn btn-secondary btn-responsive not-active">
                    <input name="serviceAttended[]" type="checkbox" value="930am" <?php if(isset($_POST['serviceAttended']) && is_array($_POST['serviceAttended']) && in_array('930am', $_POST['serviceAttended'])) echo 'checked="checked"'; ?> > 9:30 AM
                </label>
                <label class="col-2 btn btn-secondary btn-responsive not-active">
                    <input name="serviceAttended[]" type="checkbox" value="11am" <?php if(isset($_POST['serviceAttended']) && is_array($_POST['serviceAttended']) && in_array('11am', $_POST['serviceAttended'])) echo 'checked="checked"'; ?> > 11:00 AM
                </label>
                <label class="col-2 btn btn-secondary btn-responsive not-active">
                    <input name="serviceAttended[]" type="checkbox" value="other" <?php if(isset($_POST['serviceAttended']) && is_array($_POST['serviceAttended']) && in_array('other', $_POST['serviceAttended'])) echo 'checked="checked"'; ?> > Other
                </label>
            </div>

        </div>

    </div>

如您所见,我已经尝试了分配给 $serviceAttended 的变量和原始的 _$POST['serviceAttended']。但我得到相同的结果。

我在我的内联 PHP 语句中缺少什么以使按钮/复选框在提交和验证后保持选中状态?

我已经尝试了您下面的所有解决方案,但似乎没有一个有效。也许这不是内联 php 的问题。也许它与 php 引导交互有关。无论如何,我在下面包含了整个 html 表单。

<!DOCTYPE HTML>  
<html lang="en">
<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Optional meta tags --> 
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">

    <script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->


$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>



<style>



.btn-responsive {
    white-space: normal !important;
    word-wrap: break-word;
}

.requiredIcon  {  
     background: url(https://cdn0.iconfinder.com/data/icons/fugue/icon/asterisk-small.png) no-repeat;
     background-position:right top;
}


:required  {  
     background: url(https://cdn0.iconfinder.com/data/icons/fugue/icon/asterisk-small.png) no-repeat;
     background-position:right top;
}


</style>



<?php
// define variables and set to empty values
$serviceAttendedErr = $serviceAttendedErrClass = $firstNameErr = $firstNameErrClass = $lastNameErr = $lastNameErrClass = $emailErr = $genderErr = $websiteErr = $checkedTermsErr = "";
$name = $email = $gender = $classes = $myDateTime = $course = $checkedTerms = $successMessage = $string_version_serviceAttended = "";
$serviceAttended = [];
//$errors = 0;

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$myDateTime = date('m/d/Y g:i a');
//$errors = $_POST["submit"]; // Resetting this variable for each submit of the form

// making sure someone doesn't just add white spaces into the input field to bypass the validation
$firstName = test_input($_POST["firstName"]);
$lastName = test_input($_POST["lastName"]);

if (!empty($_POST["serviceAttended"])){
    $serviceAttended = $_POST["serviceAttended"];
    //Making a string version of the above array so it can be used for debug on the screen
    $string_version_serviceAttended = implode(',', $serviceAttended);
}

// Checking to make sure at least one service button has been chosen, 
// can also specify a particular one is needed as well (see isChecked Function)
    if(isChecked('serviceAttended','')) { 
        $serviceAttendedErrClass = " alert alert-success";
    } else { 
        $serviceAttendedErr = " <h5>Please Choose At Least One!</h5>";
        $serviceAttendedErrClass = " alert alert-danger";
    } 

// First Name Checks
    if (empty($firstName)){
        $firstNameErr = " (Required!)";
        $firstNameErrClass = " alert alert-danger";

//      $errors = 1;
    }else {
        $firstName = test_input($firstName);
        $firstNameErrClass = " alert alert-success";
    }   

// Last Name Checks 
    if (empty($lastName)){
        $lastNameErr = " (Required!)";
        $lastNameErrClass = " alert alert-danger";

//      $errors = 1;
    }else {
        $lastName = test_input($lastName);
        $lastNameErrClass = " alert alert-success";
    }   

// Email Address Checks 
    if (empty($_POST["email"])) {
        $emailErr = "Email is required";
//      $errors = 1;
    }else {
        $email = test_input($_POST["email"]);
        // check if e-mail address is well-formed
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $emailErr = "Invalid email format"; 
//          $errors = 1;
        }
    }
    if (empty($_POST["course"])) {
        $course = "";
    }else {
        $course = test_input($_POST["course"]);
    }
    if (empty($_POST["classes"])) {
        $classes = "";
    }else {
        $classes = test_input($_POST["classes"]);
    }
    if (!isset($_POST["gender"])){  
        $genderErr = "Gender is required";
//      $errors = 1;
    }else {
        $gender = test_input($_POST["gender"]);
    }
    if (empty($_POST["subject"])) {
        $subjectErr = "You must select 1 or more";
//      $errors = 1;
    }else {
        $subject = $_POST["subject"];   
    }

    if (!isset($_POST["checkedTerms"])){
        $checkedTermsErr = "You must accept the Terms of use";
//      $errors = 1;
    }else {
        $checkedTerms = test_input($_POST["checkedTerms"]); 
    }

//  if($errors == 0){
//      $successMessage ="Form Submitted Successfully..."; // IF no errors
//  }
}

// Function to remove useless info from the inputs
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

function isChecked($chkname,$value) { 
    if(!empty($_POST[$chkname]) && !empty($value)) {
        foreach($_POST[$chkname] as $chkval) { 
            if($chkval == $value) { 
                return true; 
            } 
        } 
    }else {
        if(!empty($_POST[$chkname])) {  
            return true; 
        }
    }
    return false; 
}

// Original "isChecked()" function
//function isChecked($chkname,$value) { 
//  if(!empty($_POST[$chkname])) {
//      foreach($_POST[$chkname] as $chkval) { 
//          if($chkval == $value) { 
//              return true; 
//          } 
//      } 
//  } 
//  return false; 
//}


?>








</head>
<body>
<div class="container-fluid">

    <div class="row">

        <!-- Use the container for testing screen size only. Remove it later -->
        <div class="container">
            <div class="hidden-lg-down"><span class="badge badge-default">xl</span></div>
            <div class="hidden-md-down hidden-xl-up"><span class="badge badge-default">lg</span></div>
            <div class="hidden-sm-down hidden-lg-up"><span class="badge badge-default">md</span></div>
            <div class="hidden-xs-down hidden-md-up"><span class="badge badge-default">sm</span></div>
            <div class="hidden-xs hidden-sm-up"><span class="badge badge-default">xs</span></div>
        </div>
    </div>

    <div class="row">

        <div class="col-4 offset-4 text-center">
            <h2>Header Text</h2>
        </div>

    </div>

    <form class="form-horizontal" role="form" method = "POST" action = "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

        <div class="form-group row">

            <div class="col-12 card card-block requiredIcon <?php echo $serviceAttendedErrClass; ?>">
                <div class = "text-danger offset-5"><?php echo $serviceAttendedErr;?></div>
                <div class="btn-group offset-1" data-toggle="buttons" for="serviceAttended">

                    <label class="form-check-label text-left mx-2">When Did You Attended?</label>

                    <label class="col-2 btn btn-secondary btn-responsive not-active">   
                        <input name="serviceAttended[]" type="checkbox" value="8am" <?php if(isset($_POST['serviceAttended']) && in_array('8am', $_POST['serviceAttended'])) echo 'checked="checked"'; ?> > 8:00 AM
                    </label>
                    <label class="col-2 btn btn-secondary btn-responsive not-active">
                        <input name="serviceAttended[]" type="checkbox" value="930am" <?php if(isset($_POST['serviceAttended']) && in_array('930am', $_POST['serviceAttended'])) echo 'checked="checked"'; ?> > 9:30 AM
                    </label>
                    <label class="col-2 btn btn-secondary btn-responsive not-active">
                        <input name="serviceAttended[]" type="checkbox" value="11am" <?php if(isset($_POST['serviceAttended']) && in_array('11am', $_POST['serviceAttended'])) echo 'checked="checked"'; ?> > 11:00 AM
                    </label>
                    <label class="col-2 btn btn-secondary btn-responsive not-active">
                        <input name="serviceAttended[]" type="checkbox" value="other" <?php if(isset($_POST['serviceAttended']) && is_array($_POST['serviceAttended']) && in_array('other', $_POST['serviceAttended'])) echo 'checked="checked"'; ?> > Other
                    </label>
                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-2 card card-block">

                <label class="form-check-label py-2">Button Column</label>

                <div class="btn-group-vertical" data-toggle="buttons" for="inputMemberStatus">


                    <label class=" btn btn-secondary btn-responsive not-active">
                        <input name="inputMemberStatus" id="optionOne" name="optionOne" type="radio"> Option One
                    </label>

                    <label class=" btn btn-secondary btn-responsive not-active">
                        <input name="inputMemberStatus" id="optionTwo" name="optionTwo" type="radio"> Option Two
                    </label>

                    <label class=" btn btn-secondary btn-responsive not-active">
                        <input name="inputMemberStatus" id="optionThree" name="optionThree" type="radio"> Option Three
                    </label>

                    <label class=" btn btn-secondary btn-responsive not-active">
                        <input name="inputMemberStatus" id="optionFour" name="optionFour" type="radio"> Option Four
                    </label>

                    <label class=" btn btn-secondary btn-responsive not-active">
                        <input name="inputMemberStatus" id="optionFive" name="optionFive" type="radio"> Option Five
                    </label>

                </div>

            </div>

            <div class="col-10 card card-block">

                <label class="form-check-label py-2">My Contact Information</label>       

                <div class="form-group row" id="userNameInfo">

                    <div class="col-md-6">
                        <input class="form-control <?php echo $firstNameErrClass; ?>" id="firstName" name="firstName" type="text" placeholder="First Name <?php echo $firstNameErr;?>" <?php if (!empty($_POST['firstName'])) {echo "value=\"" . $firstName . "\"";} ?> required="required">
<!--                            <div class = "text-danger">* <?php echo $firstNameErr;?></div> -->
                    </div>
                    <div class="col-md-6">
                        <input class="form-control <?php echo $lastNameErrClass; ?>" id="lastName" name="lastName" type="text" placeholder="Last Name <?php echo $lastNameErr;?>" <?php if (!empty($_POST['lastName'])) {echo "value=\"" . $lastName . "\"";} ?> required="required">
<!--                            <div class = "text-danger">* <?php echo $lastNameErr;?></div> -->
                    </div>

                </div>


                <!-- This Code Section Not Used at this time
                <div class="form-group row px-3" data-toggle="button">

                    <label class="form-check-label">
                        <input name="updateMyInfo" class="form-check-input" type="button" value="Please Update My Information" data-toggle="collapse" data-target="#userAddressInfo">
                    </label>

                </div>


                <div class="collapse" id="userAddressInfo">
        -->

                <div id="userAddressInfo">

                    <div class="form-group addressInfo row">

                        <div class="col-12">
                            <input class="form-control" id="userAddress1" name="userAddress1" type="text" placeholder="Address Line 1">
                        </div>
                        <div class="col-12">
                            <input class="form-control" id="userAddress2" name="userAddress2" type="text" placeholder="Address Line 2">
                        </div>
                        <div class="col-4">
                            <input class="form-control" id="userCity" name="userCity" type="text" placeholder="City">
                        </div>
                        <div class="col-4">
                            <select class="form-control" id="userState" name="userState" placeholder="State">
                                <option value="  ">State</option>
                                <option value="AL">Alabama</option>
                                <option value="AK">Alaska</option>
                                <option value="AZ">Arizona</option>
                                <option value="AR">Arkansas</option>
                                <option value="CA">California</option>
                                <option value="CO">Colorado</option>
                                <option value="CT">Connecticut</option>
                                <option value="DE">Delaware</option>
                                <option value="DC">District Of Columbia</option>
                                <option value="FL">Florida</option>
                                <option value="GA">Georgia</option>
                                <option value="HI">Hawaii</option>
                                <option value="ID">Idaho</option>
                                <option value="IL">Illinois</option>
                                <option value="IN">Indiana</option>
                                <option value="IA">Iowa</option>
                                <option value="KS">Kansas</option>
                                <option value="KY">Kentucky</option>
                                <option value="LA">Louisiana</option>
                                <option value="ME">Maine</option>
                                <option value="MD">Maryland</option>
                                <option value="MA">Massachusetts</option>
                                <option value="MI">Michigan</option>
                                <option value="MN">Minnesota</option>
                                <option value="MS">Mississippi</option>
                                <option value="MO">Missouri</option>
                                <option value="MT">Montana</option>
                                <option value="NE">Nebraska</option>
                                <option value="NV">Nevada</option>
                                <option value="NH">New Hampshire</option>
                                <option value="NJ">New Jersey</option>
                                <option value="NM">New Mexico</option>
                                <option value="NY">New York</option>
                                <option value="NC">North Carolina</option>
                                <option value="ND">North Dakota</option>
                                <option value="OH">Ohio</option>
                                <option value="OK">Oklahoma</option>
                                <option value="OR">Oregon</option>
                                <option value="PA">Pennsylvania</option>
                                <option value="RI">Rhode Island</option>
                                <option value="SC">South Carolina</option>
                                <option value="SD">South Dakota</option>
                                <option value="TN">Tennessee</option>
                                <option value="TX">Texas</option>
                                <option value="UT">Utah</option>
                                <option value="VT">Vermont</option>
                                <option value="VA">Virginia</option>
                                <option value="WA">Washington</option>
                                <option value="WV">West Virginia</option>
                                <option value="WI">Wisconsin</option>
                                <option value="WY">Wyoming</option>
                            </select>
                        </div>
                        <div class="col-4">
                            <input class="form-control" id="userZip" name="userZip" type="text" placeholder="Zip Code">
                        </div>

                        <div class="row col-12 py-2">
                            <!-- For Row Spacing use ONLY -->
                        </div>

                        <div class="col-12">
                            <input class="form-control" id="userEmail" name="userEmail" type="text" placeholder="E-Mail">
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="row card card-block">


            <div class="form-group">

                <div class="col-12">
                    <textarea class="form-control" id="userComment" name="userComment" placeholder="Comments" rows="5"></textarea>
                </div>

            </div>

        </div>

        <div class="row card card-block">

            <div class="form-group">

                <div class="col-6 offset-3 text-center py-4">
                    <button class="btn btn-primary">Submit</button>
                </div>

            </div>

        </div>

    </form>
</div>







</br>
</br>
<?php
echo "<h3>Your given values are as :</h3>";
echo ("<p>Your Date Applied is: $myDateTime</p>");
echo ("<p>Your Service Attended is: "); if(!empty($string_version_serviceAttended)){ echo ("$string_version_serviceAttended</p>");}
echo ("<p>Your First Name is: "); if(!empty($firstName)){ echo ("$firstName</p>");}
echo ("<p>Your Last Name is: "); if(!empty($lastName)){ echo ("$lastName</p>");}

//echo ("<p> your email address is: $email</p>");
//echo ("<p>Your class time at: $course</p>");
//echo ("<p>your class info: $classes </p>");
//echo ("<p>your gender is: $gender</p>");
//echo ("<p>your Terms Checked: $checkedTerms</p>");

?>








<!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


    <!-- Placed at the end of the document so the pages load faster -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="ie10-viewport-bug-workaround.js"></script>


</body>
</html>

请注意: 我正在沿着表单添加验证。所以表单本身是完整且功能齐全的,但大部分表单检查仍然不完整。

【问题讨论】:

  • 你的意思是复选框的默认状态应该被选中吗?
  • 试试我的答案@Akintunde
  • @caclark 待编辑:stackoverflow.com/review/suggested-edits/16104617 是您原始代码的一部分,但粘贴时遇到问题?希望您没有留下问题,您需要回复 cmets 和给出的答案。
  • 我不确定待处理的编辑来自何处。我只有原帖。

标签: php html forms checkbox


【解决方案1】:

您只需要在复选框中添加一个条件来检查复选框是否已选中,如果已选中则将其标记为已选中

<input type="checkbox" name="checkboxname" value="value" <?php if(isset($_POST['checkboxname'])) echo "checked='checked'"; ?>  />

【讨论】:

  • 如何处理多个同名复选框?
  • @Fred-ii- 因为从我这边看,我没有看到 OP 提供的任何 html 表单。所以不确定 Amit 从哪里得到该表格,因为 OP 甚至没有发表评论,我们会从 cmets 那里说它
  • @MasivuyeCokile 好的。好吧,我会检查一下它是否是 OP 原始代码的一部分(或不是)。如果不是,我会回滚并建议进行编辑的人。
  • @MasivuyeCokile 这个"&gt; When Did You Attended? &gt; 8:00 AM &gt; 9:30 AM &gt; 11:00 AM &gt; Other(通常)是未缩进代码的标志。如有疑问(在编辑之前),请自己进入“编辑模式”,您会看到未缩进的代码;-)
【解决方案2】:

正如你提到的复选框是数组使用in_array('2',$_POST['checkboxname']) 像这样

<input type="checkbox" name="serviceAttended[]" value="2" <?php if(isset($_POST['checkboxname']) && in_array('2',$_POST['checkboxname'])) echo "checked='checked'"; ?>  />

<input type="checkbox" name="serviceAttended[]" value="3" <?php if(isset($_POST['checkboxname']) && in_array('3',$_POST['checkboxname'])) echo "checked='checked'"; ?>  />

【讨论】:

  • 这是创新的。 +1
  • “这是创新的。+1” - @Akintunde 什么 +1?这里没有赞成票。
【解决方案3】:

只需为您的复选框元素分配键,如下所示:

<div class="form-group row">
    <div class="col-12 card card-block requiredIcon <?php echo $serviceAttendedErrClass; ?>">
        <div class = "text-danger offset-5"><?php echo $serviceAttendedErr;?></div>
        <div class="btn-group offset-1" data-toggle="buttons" for="serviceAttended[]">

            <label class="form-check-label text-left mx-2">When Did You Attended?</label>

            <label class="col-2 btn btn-secondary btn-responsive not-active">   
                <input name="serviceAttended[0]" type="checkbox" value="8am" <?php if(isset($_POST['serviceAttended'][0])) echo 'checked="checked"'; ?> > 8:00 AM
            </label>
            <label class="col-2 btn btn-secondary btn-responsive not-active">
                <input name="serviceAttended[1]" type="checkbox" value="930am" <?php if(isset($_POST['serviceAttended'][1])) echo 'checked="checked"'; ?> > 9:30 AM
            </label>
            <label class="col-2 btn btn-secondary btn-responsive not-active">
                <input name="serviceAttended[2]" type="checkbox" value="11am" <?php if(isset($_POST['serviceAttended'][2])) echo 'checked="checked"'; ?> > 11:00 AM
            </label>
            <label class="col-2 btn btn-secondary btn-responsive not-active">
                <input name="serviceAttended[3]" type="checkbox" value="other" <?php if(isset($_POST['serviceAttended'][3])) echo 'checked="checked"'; ?> > Other
            </label>
        </div>
    </div>
</div>

【讨论】:

  • 阿米特:你所做的待定编辑:stackoverflow.com/review/suggested-edits/16104617 是他们原始代码的一部分,还是你添加的?我现在无法确定,因为它还不能在修订版中看到。
  • 好的,阿米特,谢谢。另一位认为不是这样的成员拒绝了该编辑。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多