I have the following code and the intention is that on selecting a password protected quiz, the password input field is shown. If a quiz however, is not password protected (result==0), then the input box for the quiz password is hidden.
The code now however, hides it all the time, even when the quiz does have a password.
Any suggestions?
** Relevant PHP Code in the index.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();
}
}
});
});
HTML generating (Display) code in index.php
<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/>
And finally, in quiz.php the code that was changed in order to stop chrome from autofilling (this caused the problem in the first place).
//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();
}
It is because yur password input does not have id="thequizpassword" and in jour js code you have a line:
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();
}
So the only thing you have to do is to change this:
<input type="password" name="quiz_password" placeholder="Enter Quiz Password" style="display:none;" autocomplete="placeholder_password" required/>
To this:
<input id="thequizpassword" type="password" name="quiz_password" placeholder="Enter Quiz Password" style="display:none;" autocomplete="placeholder_password" required/>