11525 sujets

JavaScript, DOM et API Web HTML5

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 ?
Il n'y a pas d'erreur dans la console.
Seulement voici ce que je trouve :

Si je reprends la partie javascript :

<script>
$(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;
    });
});
</script>

ainsi que le formulaire :
	<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">
			</td>
	</form>

et que dans ma page calcul.php se résume à un simple
echo $_POST['monchoix'];

j'obtiens dans le bon div le message suivant :
Notice : undefined index: monchoix ...
Pourquoi je ne récupère pas la valeur de mon input ?
Oui, il faut adapter l'envoi des données dans le js :


var s = {
    'monchoix': $("#monchoix").val()
}


à la place de

var s = $("#monchoix").val();
Meilleure solution
Yeeeeeeeeeeeeeeeeeeeeeesssssssssssssssssss

Ca fonctionne. Un très grand merci à toi.
Je vois que j'ai tout à apprendre en javascript en tout cas !