AJAX soumettre un formulaire sans actualiser

28 novembre 2021 à 1:14:54

Salut tout le forum,

J’ai besoin de votre aide.

Je voudrais créer un exercice en html, php, javascript et avec msql.

L’exercice consiste à remplir des zones de texte.

Je souhaite créer un bouton pour corriger et évaluer.

Au clic sur le bouton, les bonnes réponses sont comptées, les bonnes réponses passent en vert et les mauvaises en rouges.

Les solutions sont dans une base de données mysql.

Je sais :

Lire les solutions dans mysql

Comparer la réponse de l’utilisateur à la solution

Je ne sais pas

Modifier la couleur de la zone de texte suivant le résultat de la comparaison

Faut-il que je passe un script javascript ou modifier le css et la class ?

Merci pour votre aide.

-
Edité par _seb_ 30 novembre 2021 à 21:34:48

Domi65

28 novembre 2021 à 14:53:20

Tu veux que l'utilisateur sachent dès qu'ils ont cliqué sur le bouton vérifier que la réponse est bonne ou pas ?

Tu fais un appel AJAX qui envoie la réponse donnée au serveur et le serveur renvoie par exemple 0 ou 1 selon la véracité de cette réponse. dans le traitement de la réponse du serveur (pas celle de l'utilisateur) tu changes soit le css soit la classe du conteneur que tu veux modifier.

Il te faudra au départ écrire un gestionnaire d'événements pour tes boutons du genre (non vérifié)

conteneurQuestions.querySelectorAll([input type=button]').forEach ( elt => elt.addEventListener('click', envoi))

function envoi(e) {
  // fonction qui crée un appel et envoie la réponse de l'utilisateur
  // et qui selon la réponse du serveur change la classe de l'elt concerné
}

_seb_

28 novembre 2021 à 23:30:09

Merci pour ta réponse,

Oui je souhaite que l'utilisateur connaisse ses bonnes réponses et ses erreurs dés le clic.

l'ajax m'est totalement inconnu, je vais savoir besoin d'un coup de main.

Voilà mon premier code avec du javascript : code avec javascript, mais on peut retrouver toutes les réponses dans le code de la page.

Maintenant toutes les réponses sont dans mysql, dans la table :

CREATE TABLE reponses (
    id int,
    numQuestion int,
    reponsesQuestion varchar(255),
    PRIMARY KEY (id)
);

la fonction pour voir les réponses d'une question :

<?php
    function fnVoirReponseQuestion($numQuestion){// Voir les réponses d'une question
        try{
            $bdd = new PDO('mysql:host=localhost;dbname=maBaseDeDonnees;charset=utf8','monIdentifiant','MonMotDePasse',
            array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
        }
        catch (Exception $e){
            die('Erreur : ' . $e->getMessage());
        }
$chReponse = $bdd->prepare('SELECT reponsesQuestion FROM reponses WHERE numQuestion = :numQuestion');
$chReponse->bindValue('numQuestion',    $numQuestion,   PDO::PARAM_INT);
$chReponse->execute();
$reponse = $chReponse->fetch();
return unserialize($reponse['reponsesQuestion']);
$chReponse->closeCursor();
    }
?>

La page avec l'exercice (code simplifié) :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Exercice</title>
    </head>
    <body>
        if(!empty($_POST['subCorriger'])){
                $reponse = fnVoirReponseQuestion(1);
                $nbreBonneReponse = 0;
                for($i = 1; $i <= 10; $i++){
                        if($_POST[$i] == $reponse[$i - 1]){
                                $nbreBonneReponse++;
                        }
                }
                echo "Nombre de bonnes réponses : ".$nbreBonneReponse;
        }
        <form method="post">
            <table>
                <tr><td><input type="text" name="1" id="1" value=""></td></tr>
                <tr><td><input type="text" name="2" id="2" value=""></td></tr>
                <tr><td><input type="text" name="3" id="3" value=""></td></tr>
            </table>
            <input type="submit" name="subCorriger" id="subCorriger" value="Evaluer"/>
        </form>
    </body>
</html>

Maintent l'ajax et javascript ??

j'essaie de comprendre cette vidéo, c'est pas gagné

-
Edité par _seb_ 28 novembre 2021 à 23:33:52

Lamecarlate

29 novembre 2021 à 9:54:03

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : Exercice html, php, mysql, javascript)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Domi65

29 novembre 2021 à 14:39:01

Je peux te guider, mais pour que ce que je te propose soit en accord avec ce que tu fais, mets-nous le code HTML (pas le PHP, mais le code source qu'il génère) de ta page, ou dumoins la partie utile, qu'on parte sur une base déjà existante.

-
Edité par Domi65 29 novembre 2021 à 14:39:36

_seb_

30 novembre 2021 à 21:50:00

Bonjour, merci pour ton aide.

j'ai suivi ces 3 vidéos.

Extraire les données sans recharger la page PHP

Tutoriel PHP/jQuery : Poster un formulaire en Ajax

Apprendre à utiliser ajax

Voilà où j'en suis :

Le HTML

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Exercice</title>
        <style>
            .mauvaiseReponse{background-color: rgba(255, 0, 0, 0.5);}
            .bonneReponse{background-color: rgba(0, 128, 0, 0.5);}
        </style>
	</head>
	<body>
		<form id="formulaire" method="POST">
            Réponse 1 : <input type="text" name="1" id="1" value=""/><br>
            Réponse 2 : <input type="text" name="2" id="2" value=""/><br>
            Réponse 3 : <input type="text" name="3" id="3" value=""/><br>
            <input type="submit" value="Corriger"/><br>
            Nombre de tentatives : <input type="text" name="nbreTentative" id="nbreTentative" value="0" size="5" readonly="readonly"/><br>
            Nombre de points : <input type="text" name="evaluation" id="evaluation" value="3" size="5" readonly="readonly"/><br>
            Exercice terminé : <input type="text" name="exerciceTermine" id="exerciceTermine" value="Non" size="5" readonly="readonly"/>
        </form>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
		<script type="text/javascript" src="../js/script.js"></script>
	</body>
</html>

Le javascript:

$(document).ready(function () {
	$("#formulaire").submit(function () {

		if (document.getElementById("exerciceTermine").value == "Non") {
            document.getElementById("nbreTentative").value++;

            let nbreErreur = 0;

            for (let i = 1; i <= 3; i++) {

                var reponse = $('#' + i + '').val();

                $.post('../page/comparer.php', { reponse: reponse, i:i }, function (donnees) {
                    if (donnees == 0) {
                        nbreErreur = 1;
                        document.getElementById(i).className = "mauvaiseReponse";
                        document.getElementById("evaluation").value = Number(document.getElementById("evaluation").value) - 0.5;
                    } else if (donnees == 1) {
                        document.getElementById(i).className = "bonneReponse";
                    }
                })
            }

            if (nbreErreur == 0) {
                document.getElementById("exerciceTermine").value = "Oui";
                enregistrerEvaluation();
            }
        }
		return false;
    })
});

function enregistrerEvaluation() {
	var nbreTentative = $("#nbreTentative").val();
	var evaluation = $("#evaluation").val();

	$.post('../page/envoyer.php', { nbreTentative: nbreTentative, evaluation: evaluation }, function () { })
}

Le fichier comparer.php

<?php
    if(isset($_POST['reponse']) && !empty($_POST['reponse'])) {

        try{
            $bddIntervention = new PDO('mysql:host=localhost;dbname=maBaseDeDonnees;charset=utf8','MonIdentifiant','monMotDePasse',
            array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
        }
        catch (Exception $e){
            die('Erreur : ' . $e->getMessage());
        }

        $chReponse = $bddIntervention->prepare('SELECT reponse FROM reponses');
        $chReponse->execute();
        $reponse = $chReponse->fetch();
        $reponses = unserialize($reponse['reponse']);
        $chReponse->closeCursor();

        $emplacement = $_POST['i'] - 1;

        if($_POST['reponse'] != $reponses[$emplacement]){
            echo 0;
        }else{
            echo 1;
        }
    }
?>

le fichier envoyer.php

<?php
    if(isset($_POST['nbreTentative'],$_POST['evaluation']) && !empty($_POST['nbreTentative']) && !empty($_POST['evaluation'])){

        try{
            $bddIntervention = new PDO('mysql:host=localhost;dbname=maBaseDeDonnees;charset=utf8','MonIdentifiant','monMotDePasse',
            array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
        }
        catch (Exception $e){
            die('Erreur : ' . $e->getMessage());
        }

		$in = $bddIntervention->prepare("INSERT INTO candidatReponses (nbrTentatives, nbrPoints) VALUES(:nbrTentatives, :nbrPoints)");
		$in->bindValue('nbrTentatives',	$_POST['nbreTentative'],	PDO::PARAM_INT);
		$in->bindValue('nbrPoints',		$_POST['evaluation'],		PDO::PARAM_INT);
		$in->execute();
		$in->closeCursor();
	}
?>

-
Edité par _seb_ 1 décembre 2021 à 20:06:21