Enregistrement d'une valeur en base mysql

**mnssylvain** · 21/07/2022, 09h07

Bonjour, à tous,
Après avoir résolu mes problèmes de changement d'image sur un onclick dans cette discussion
J'ai maintenant du mal à enregistrer le changement d'une valeur dans la base de données.

J'ai une erreur " Maximum call stack size exceeded" qui semble être du code qui tourne en boucle.....

Je précise que j'utilise bootstrap 4 j'ai corrigé déjà quelques problèmes liés à son utilisation.

Le but de mon projet est de créer un système d'humeur du jour pour les adhérents d'un site.
Chaque adhérent peut donc cliquer sur une image représentant son humeur. Pour le moment un clic permet de passer au niveau supérieur. Il y a 5 images différentes.
Lorsque l'image change je souhaite enregistrer dans la base de donnée la valeur de l'humeur (de 1 à 5).
Ce qui me paraissait facile d'utilisation pour les adhérents me parait maintenant que j'ai mis les mains dans le cambouis plus forcément adapté car si l'utilisateur veut passer du niveau 1 à 4 il faut qu'il clique 3 fois et donc il y aura 3 enregistrement dans la base de données... Pour le moment ça reste un détail, j'aimerai déjà réussir ce que j'avais imaginé au départ.

Voila ou j'en sui pour le moment

Mon script JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script>
 
var p = document.getElementById('humeur');
var h = document.getElementById('valhumeur');
console.log(p.src);
p.addEventListener("click", changeimage); 
function changeimage(e) {
	// gère le changement d'image
	var source =p.src;
 
		switch (e.target.attributes.src.textContent){
 
		case 'images/coeurs1.png':
			p.src = 'images/coeurs2.png';
			h.value =2;
			//console.log("coeurs2");
			break;
 
		case 'images/coeurs2.png':
			p.src = 'images/coeurs3.png';
			h.value =3;
			//console.log("coeurs2");
 
			break;
		case 'images/coeurs3.png':
			p.src = 'images/coeurs4.png';
			h.value =4;
			//console.log("coeurs3");
 
			break;
		case 'images/coeurs4.png':
			p.src = 'images/coeurs5.png';
			h.value =5;
			//console.log("coeurs4");
 
			break;
		case 'images/coeurs5.png':
			p.src = 'images/coeurs1.png';
			h.value =1;
			//console.log("coeurs5");
 
			break;
 
		default:
			//console.log('defaut');
 
		}	
 
		// pour vérifier que le code s'exécute jusqu'ici et que les valeurs sont bonnes
		console.log(source);
		console.log(e.target.attributes.src.textContent);
 
		  var valhumeur = document.getElementById("valhumeur").value;
		  var idclient= document.getElementById("idclient");
		  console.log('valeur valhumeur: ');
		  console.log(valhumeur);
 
 
		  $.ajax({
		   type: 'post',
		   url: 'humeur.php',
		   data: {
			  valhumeur: valhumeur,
			  idclient: idclient
			},
			success: function (response) {
				// je ne suis pas sûr d'avoir besoin d'un retour c'est juste pour voir si le code s'execute.
     		$('#res').html("Vos données seront sauvegardées");
			}
		  });  
 
  return false;
  	}
</script>

Le code HTML
J'ai mis pas mal de truc en commentaire car avant de me lancer dans JS et AJAX je l'ai fait en php pour être sûr que ça fonctionne.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<head>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
    <!-- basic -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- mobile metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- site metas -->
    <title>Miss Minceurs</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- bootstrap css -->
<!--    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- style css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive-->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- favicon -->
    <link href="images/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="images/favicon/favicon-16x16.png"  rel="icon" sizes="16x16" type="image/png">
    <link href="images/favicon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
    <link href="images/favicon/favicon-48x48.png" rel="icon" sizes="48x48" type="image/png">
    <link href="images/favicon/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
    <link href="images/favicon/favicon-256x256.png" rel="icon" sizes="256x256" type="image/png">
    <link href="images/favicon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
 
      <!--//librairie graphique Chart.js/2.9.3 -->
<!--       <script src="js/Chart.bundle.min.js"></script>     -->
	   <script src="js/Chart.js"></script>
           <script src="js/plugin.js"></script>  
 
</head>
 
<!-- la partie de code gérant l'humeur -->
<div class="row text-right">
            	 <!--Affichage humeur-->
                	<div class="col-12" >
                     <!--	 <form action="humeur1.php" method="POST"> -->
                        <form onsubmit="return sendData();" method="POST"> 
 
                        <input id='idclient' name='idclient' type='hidden' value=<? echo$clients['IDClient'];?> >
                         <input id='valhumeur'name='valhumeur' type='hidden' value=<? echo$clients['Humeur']; ?> >
                	<!-- 	<p align="right"> <input id='humeur' name="humeur" type="image" src="images/coeurs<? echo $clients['Humeur']?>.png" alt="" width="160" height"120" /></p> -->
                       <p align="right"> <img id='humeur' src="images/coeurs<? echo $clients['Humeur']?>.png" alt="" width="160" height"120" /></p>  
                     <!--   <input type="submit" name="submit_humeur" value="changer"> -->
                        </form>       
                   <div id="res" ></div>           
                </div>
                </br>
             </div>

et le PHP qui est censé être appelé

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
  include("./include/connexion.php");
echo("valeur post humeur".$_POST['valhumeur']);
  if( isset( $_POST['valhumeur'] ) )
  {
	  if ($_POST['valhumeur']==5){$humeur= 1;} else {$humeur= $_POST['valhumeur']+1;}
 
	echo('valeur humeur: '.$humeur);
	$idclient= $_POST['idclient'];
 
 
 
	$update = "UPDATE RequiLigneClients SET Humeur=$humeur WHERE IDClient=$idclient";
	//$update="UPDATE 'RequiLigneClients' SET Humeur='3' WHERE IDClient='41'";
	echo("requete: ". $update);
	 $result =   mysqli_query($conn, $update) or die ('Erreur : '.mysqli_error($conn));
	 include 'mailhumeur.php';
 
  }

Le changement d'image et de valeur s'effectue bien.
Le problème semble se poser lors de l'exécution de $.ajax
En console j'ai l'erreur suivante qui me renvoie à Jquery (/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors ):

jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded
at At (jquery.min.js:2:73109)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
at At (jquery.min.js:2:73296)
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
At @ jquery.min.js:2
Afficher 170*autres frames

J'ai mis la dernière version de Jquery car celle qui était déclaré dans BootStrap 4 posait des problèmes..... J'espère que ce n'est pas à cause de ça....

Je vous remercie d'avances pour vos conseils et pistes à explorer !
Bonne journée

**mathieu** · 21/07/2022, 10h46

pour voir si la requete ajax est bien envoyée, vous pouvez utiliser l'onglet "Réseau" de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

**Pytet** · 21/07/2022, 13h17

Bonjour,

L'erreur peut venir du paramètre idclient envoyé dans la requête ajax. Il faut envoyer la valeur de l'input et pas l'élément lui-même (comme pour le paramètre valhumeur) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var idclient = document.getElementById("idclient").value;

**mnssylvain** · 21/07/2022, 19h35

Merci Pytet !
Effectivement c'était bien ça.
Je n'avais pas creusé de se côté là... et pourtant j'y ai passé un bon moment dessus

Un œil neuf est toujours plus attentif !

**NoSmoking** · 22/07/2022, 10h26

Bonjour,
lorsque l'on utilise jQuery on ne devrait jamais voir ce genre de ligne dans le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var p = document.getElementById('humeur');
var h = document.getElementById('valhumeur');
p.addEventListener("click", changeimage);

il en va de la cohérence de ton écriture.

Une remarque sur la méthode de suivi du niveau de l'humeur, il me semble plus intéressant de gérer cela avec, par exemple, un attribut data-humeur plutôt que de gérer cela via tes attributes.src.textContent.

Enregistrement d'une valeur en base mysql

AJAX

Discussions similaires

Partager

Partager