[Résolu] Exécuer un script php dans un DIV d'une page html sans rafrai

Bonsoir,

J'ai une page HTML qui comporte un DIV et un formulaire "submit" qui appelle une page PHP pour un traitement de données.
Je souhaite que la page php s'exécute dans le DIV de la page HTML sans rafraichissement de cette dernière.
J'ai bien compris que je devais passer par ajax/jquery mais je ne connais pas cette approche.
J'ai adapté des bouts de code glanés sur le web mais sans résultat. Mes données s'affichent mais sur une nouvelle page.
Quelqu'un peut me venir en aide svp ?
Voici ci dessous la partie interessante de mon html et de mon php

page jeu.php (page html)

<script>
//initialisation du code
$(document).ready(function()
{
    $("#box-saisie").submit(function()
    {
        var s = $("#monchoix").val();
            $.ajax({
                url: "calcul.php",
                type: "POST",
                data: {monchoix},
                success: function (data)
                {
                    $("#box-droite").html=data;
                }
            });
            return false;
        }
    });
});
</script>
	
<div id="box-gauche">
.../...
</div>
<div id='box-droite'></div> // ******************** div de destination souhaité

<div class='box-title'><?php echo "Vous devez entrer un mot de ".$_SESSION['longueur']." lettres pour ".$_SESSION['points']." points";?></div>
<div id='box-saisie'>
<table>
<tr><td>
	<form action="calcul.php" method="POST">
		<input type="text" name="monchoix" id="monchoix" class="saisie" minlength="<?php echo $_SESSION['longueur'];?>" maxlength="<?php echo $_SESSION['longueur'];?>">
			</td><td>
				<input type="submit" value="ENVOI" id="envoyer">
			</td>
	</form>
	</tr>
</table>
</div>

et la page calcul.php

<?php
session_start();

    $found = str_split(strtoupper($_SESSION['motdujour']));
    $copy = array_slice($found, 0);
    $result = [];
    $tpl = '<span class="button %s">%s</span>';
    $output = '';

    if(!empty($_POST['monchoix'])){
		
		$_SESSION['nbcoups'] = $_SESSION['nbcoups']+1;
		if ($_SESSION['nbcoups'] > 4){
			$_SESSION['indice'] = "<a href='indice.php' class='indice'><p style='text-align: center'>Cliquez pour obtenir l'indice</p></a>";
		} else {
			$_SESSION['indice'] = '';
		}

        $answer = str_split(strtoupper(trim($_POST['monchoix'])));

        if(count($found) === count($answer)){
            foreach($answer as $k => $v){
                if($found[$k] === $v){
                    $result[$k] = [
                        'char' => $v,
                        'cls' => "lettre_placee",
                    ];
                    unset($copy[$k]);
                }else{
                    $result[$k] = [
                        'char' => $v,
                        'cls' => "lettre_absente",
                    ];
                }
            }
            
            foreach($result as $k => $v){
                if($v['cls'] === "lettre_absente"){
                    if(in_array($v['char'], $copy)){
                        $result[$k]['cls'] = "lettre_non_placee";
                        $index = array_search($v['char'], $copy);
                        unset($copy[$index]);
                    }
                }
            }

            foreach($result as $k => $v){
                $output .= sprintf($tpl, $v['cls'], $v['char']);
            }
        }
		$_SESSION['points'] = $_SESSION['points'] -1;
		$_SESSION['init'] = 'ok';
    }
	?>
	<p><?= $output ?></p>

Merci par avance pour votre aide.

Bonjour,

Voici qques pistes pour résoudre ton problème, dans l'ordre, voici ce que je ferais :
1 / ajouter un id sur le formulaire pour le cibler avec le js (je l'ai appelé form-calcul),
2 / ajouter un preventDefault dans le submit pour éviter le changement de page en stoppant le comportement normal du formulaire,
3 / tu récupères le contenu du champ monchoix dans la variable s, donc c'est s qu'il faut envoyer au script calcul.php

ce qui donne ça pour la partie js :

$(document).ready(function()
{
    $("#form-calcul").submit(function(evt)
    {
		evt.preventDefault();
        var s = $("#monchoix").val();
		$.ajax({
			url: "calcul.php",
			type: "POST",
			data: s,
			success: function (data)
			{
				$("#box-droite").html(data);
			}
		});
		return false;
    });
});

et ça dans le html :

<div id="box-gauche">
.../...
</div>
<div id='box-droite'></div> // ******************** div de destination souhaité

<div class='box-title'><?php echo "Vous devez entrer un mot de ".$_SESSION['longueur']." lettres pour ".$_SESSION['points']." points";?></div>
<div id='box-saisie'>
<table>
<tr><td>
	<form id="form-calcul" action="calcul.php" method="POST">
		<input type="text" name="monchoix" id="monchoix" class="saisie" minlength="<?php echo $_SESSION['longueur'];?>" maxlength="<?php echo $_SESSION['longueur'];?>">
			</td><td>
				<input type="submit" value="ENVOI" id="envoyer">
			</td>
	</form>
	</tr>
</table>
</div>

Bonjour,
Merci pour ta réponse, mais ça ne fonctionne pas. J'ai recopié à la lettre tes indications.
Mon bouton submit qui est "reactif" reste enfoncé mais rien ne s'affiche dans le div "box-droite"

alors il va falloir débugger pas à pas :
- Est-ce que dans la console il y a des erreurs ?
- Est-ce que tu vois passer la requete ajax dans l'onglet réseau de ton navigateur ? quelle est le retour de la page calcul.php ?