I have a form HTML :
<form name="form-question" method="post" action="validate_question.php" id="form_question">
<div>
<h1 class="mt-1 mb-4 text-center"><?= $data['question']; ?></h1>
</div>
<div id="loose" style="display: none;">
<?php include 'templates/not_correct.php'; ?>
</div>
<div>
<?php foreach ($data['propositions'] as $key => $proposition): ?>
<div class="option">
<input type="radio" id="<?= $key; ?>" name="option" value="<?= $key; ?>" >
<label for="<?= $key; ?>"><?= $proposition; ?></label>
</div>
<?php endforeach; ?>
</div>
<div class="bottom-button" id="validateButtonWrapper">
<input type="hidden" name="code_step" value="<?= $code_step; ?>" />
<input type="hidden" name="id_team" value="<?= $check_password['id']; ?>" />
<input type="submit" id="validateButton" class="btn btn-primary" value="Valider" />
</div>
</form>
<div id="win" style="display: none;">
<?php include 'templates/correct.php'; ?>
</div>
<div id="already_answered" style="display: none;">
<?php include 'templates/already_answered.php'; ?>
</div>
I have a Jquery code to treat my form in ajax :
$('#form_question').submit(function(e){
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: 'POST',
url: 'validate_question.php',
data: formData,
success: function(response){
var correctLabel = $('label[for="' + response.correct_answer + '"]');
correctLabel.addClass('correct-answer');
if (response.message == 'Réponse correcte') {
$('#form_question').hide();
$('#win').show();
}
if (response.message == 'Réponse incorrecte') {
$('#loose').show();
}
if (response.message == 'Cette question a déjà été répondue.') {
$('#form_question').hide();
$('#already_answered').show();
}
},
error: function(xhr, status, error){
console.error(xhr.responseText);
}
});
});
I have this PHP code validate_question.php to treat the form
<?php
header('Content-Type: application/json');
require_once __DIR__ . '/vendor/autoload.php';
use DotenvDotenv;
$dotenvPath = __DIR__;
$dotenv = Dotenv::createImmutable($dotenvPath);
$dotenv->load();
require_once 'config.php';
require_once 'functions.php';
$response_data = array();
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['option'])) {
// get response of question
$response = $_POST['option'];
$code_step = $_POST['code_step'] ? $_POST['code_step'] : NULL;
$id_team = $_POST['id_team'] ? $_POST['id_team'] : NULL;
$id_step = get_id_step_by_code($db, $code_step);
$already_answered = check_step_team($db, $id_team, $id_step['id']);
if (NULL !== $response) {
if (!$already_answered) {
if (NULL !== $id_step && NULL !== $code_step) {
// check if response correct
$result = get_answer_by_step($db, $code_step, $response);
if ($result['is_answer_correct']) {
$response_data['success'] = true;
$response_data['message'] = 'Réponse correcte';
$response_data['correct_answer'] = $result['correct_answer'];
record_step_for_team($id_team, $code_step, $db);
} else {
$response_data['success'] = false;
$response_data['message'] = 'Réponse incorrecte';
$response_data['correct_answer'] = $result['correct_answer'];
record_step_for_team($id_team, $code_step, $db, false);
}
} else {
$response_data['success'] = false;
$response_data['message'] = 'Aucune réponse reçue.';
}
} else {
$response_data['success'] = false;
$response_data['message'] = 'Cette question a déjà été répondue.';
}
} else {
$response_data['success'] = false;
$response_data['message'] = 'Aucune réponse reçue.';
}
} else {
echo json_encode('erreur');
}
echo json_encode($response_data);
?>
When I validate the form, I have a page with my div id = win (or already_answered) BUT It works only on desktop or on firefox or brave browser but it does not work on Chrome mobile.
Don’t understand why ?
Thanks for your answers