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