javascript - 隐藏的密码字段不显示 php javascript

Question

我有以下代码，目的是在选择受密码保护的测验时，显示密码输入字段。但是，如果测验没有密码保护(结果==0)，那么测验密码的输入框将被隐藏。

然而，现在的代码会一直隐藏它，即使测验确实有密码也是如此。

有什么建议吗？

** index.php 中的相关 PHP 代码**

    $("#quiz_form").change(function () {
           /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
           var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
           var dataString = "level=" + allbooks; /* STORE THAT TO A DATA STRING */

           $.ajax({ /* THEN THE AJAX CALL */
   type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
   url: "get-quiz-by-level.php", /* PAGE WHERE WE WILL PASS THE DATA */
   dataType: "json",
   data: dataString, /* THE DATA WE WILL BE PASSING */
   success: function success(result) {

       /* GET THE TO BE RETURNED DATA */
       var option = "";
       result
           .sort(function(a, b) {
               return a.quiz_name.localeCompare(b.quiz_name);
           })
           .forEach(function (quiz, i) {
               option += "<option value=\"" + quiz.id + "\">" + quiz.quiz_name + "</option>";
               if (i == 0 && quiz.password_quiz != 0) {
                   $("#thequizpassword").attr('required', true).removeAttr('disabled').show();
               } else if (i == 0 && quiz.password_quiz == 0) {
                   $("#thequizpassword").removeAttr('required').attr('disabled', true).hide();
               }
           });
       $("#got_quiz").show().html(option);
   }
});
       });
       $("#got_quiz").change(function () {
           /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
           var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
           var dataString = "quiz=" + allbooks; /* STORE THAT TO A DATA STRING */
           $.ajax({ /* THEN THE AJAX CALL */
               type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
               url: "check_quiz_pass.php", /* PAGE WHERE WE WILL PASS THE DATA */
               data: dataString, /* THE DATA WE WILL BE PASSING */
               success: function success(result) {
                   /* GET THE TO BE RETURNED DATA */
                   if (result == 0) {
                       $("#thequizpassword").removeAttr('required').attr('disabled', true).hide();
                   } else {
                       $("#thequizpassword").attr('required', true).removeAttr('disabled').show();
                   }

               }
           });
       });

index.php 中的 HTML 生成(显示)代码

            <form id="myForm" name="onlyForm" action="quiz.php" class="home"  method="POST">
                <select name="quiz_level" id="quiz_form" class="form-control">
                    <option disabled selected="true">-- Select The level of your Test --</option>
                    <option value="Beginner">Beginner</option>
                    <option value="Intermediate">Intermediate</option>
                    <option value="Advanced">Advanced</option>
                </select>
<select  class="form-control" name="quiz" id="got_quiz" style="display:none;"> <!--onchange="showUser(this.value)"-->


  </select>
  <input type="password" name="quiz_password" placeholder="Enter Quiz Password" style="display:none;" autocomplete="placeholder_password" required/>

最后，在 quiz.php 中更改代码 以阻止 chrome 自动填充(这首先导致了问题)。

 //Getting the questions from DB here
    $m_questions_from_DB = mysqli_query($con,"SELECT * FROM questions WHERE quiz_id='$final_quiz_ID'
                                ");

        while (mysqli_num_rows($m_questions_from_DB)<1) {
            $user_msg = 'Hey, weird, but it seems there are no questions in this quiz!';
            header('location: index.php?user_msg='.$user_msg.'');
            exit();
        }
        if($_POST['consent'] != 1){
            $user_msg = 'Hey, You have to consent first to begin the quiz!';
            header('location: index.php?user_msg='.$user_msg.'');
            exit();
        }else if(($_POST['class_name'] == "non" && !empty($_POST['school_pin'])) || ($_POST['class_name'] != "non" && empty($_POST['school_pin']))){
            if($_POST['class_name'] == "non"){ echo "aakakakak"; }
            $user_msg = 'Hey, You have to insert correct school pin and choose your class'.$_POST['school_pin'].$_POST['class_name'];
            header('location: index.php?user_msg='.$user_msg.'');
            exit();

        }elseif($quiz_pass != '0' && !empty($_POST['quiz_password']) && $_POST['quiz_password'] != $quiz_pass){
            $user_msg = 'Hey, Enter a correct Quiz password';
            header('location: index.php?user_msg='.$user_msg.'');
            exit(); 


        }elseif($quiz_pass != '0' && !empty($_POST['quiz_password']) && $_POST['quiz_password'] != $quiz_pass){
            $user_msg = 'Please use IE, Firefox -We are resolving issues with Chrome';
            header('location: index.php?user_msg='.$user_msg.'');
            exit();
        }

Answer 1

这是因为你的密码输入没有 id="thequizpassword" 而在你的 js 代码中你有一行:

if (i == 0 && quiz.password_quiz != 0) {
    $("#thequizpassword").attr('required', true).removeAttr('disabled').show();
} else if (i == 0 && quiz.password_quiz == 0) {
    $("#thequizpassword").removeAttr('required').attr('disabled', true).hide();
}

所以你唯一要做的就是改变这个:

<input type="password" name="quiz_password" placeholder="Enter Quiz Password" style="display:none;" autocomplete="placeholder_password" required/>

对此:

<input id="thequizpassword" type="password" name="quiz_password" placeholder="Enter Quiz Password" style="display:none;" autocomplete="placeholder_password" required/>