transfert de tableau JS

**t.delclite** · 17/08/2011, 16h42

Bonjour à tous,

Voilà, j'ai un tableau JS (2 dimensions) qui se remplit durant la saisie d'un formulaire (ce n'est pas les informations du formulaire que je récupère mais d'autres que je recalcule), et je voudrai transférer ensuite le tableau sur un base MySql dès que l'utilisateur clique sur un bouton submit.

Je pense que je dois transférer mon tableau sur un autre page php, afin de pouvoir l'envoyer en sql, mais je ne trouve pas comment transférer une variable JS lors d'un submit de formulaire. Savez vous comment faire ?

Merci d'avance.
Thomas

**provirus** · 17/08/2011, 17h07

Bonjour,

Tu pourrais utiliser du AJAX. Tu pourrais créer une fonction qui s'exécute lors d'un clic sur Submit et cette fonction ferait un appel AJAX qui posterait les informations sur une autre page PHP.

Si tu veux utiliser la librairie Javascript jQuery,
Pour le clic: http://api.jquery.com/click/
Pour Post AJAX: http://api.jquery.com/jQuery.post/

Petite note, n'oublie pas qu'un utilisateur mal intentionné pourrait modifier des valeurs avant de les envoyer. Pour éviter cela, puisque tes valeurs sont calculées, tu pourrais les recalculer du côté serveur en PHP lors du Submit plutôt que de faire un appel AJAX.

**t.delclite** · 17/08/2011, 17h42

Merci Provirus pour cette réponse rapide.
Pour autant, j'ai du mal à comprendre le post() en Ajax.
Pour illustrer, je vais mettre mon code, ça sera surement plus simple
(j'ai essayé de le rendre le plus facilement lisible).

Le but est de calculer le temps passé par l'utilisateur dans la case 'case1'. Je n'ai donc ici qu'une variable 'tps_case' que je souhaite transférer en sql.

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
<body>
 
<form method="post" action="index.php">
	<input id="case1" type="text" name="case1" />
	<input id="submit" type="submit" value="Valider" />
	</form>
 
<script>
 
var e1.document.getElementById('case1'); 
 
var tps_case = 0;
var tps_temp = 0;
 
//fonction pour calculer les écarts de temps
function timestamp() {return Math.round((new Date()).getTime()/1000);}
 
// Récupération d'informations lorsque l'utilisateur utilise la case 'case1'
 
e1.addEventListener('focus',function(e){tps_temp = timestamp() ;},false);
 
// Lorsque que l'utilisateur 'sort' de la case, je récupère la variable.
 
e1.addEventListener('blur',function(e){ tps_case = timestamp() - tps_temp ;},false);
 
</script>
 
</body>

A partir de là, d'après ce que je comprend du Ajax, je dois rajouter un code lié au bouton valider ?
Le problème est que mon bouton n'est pas du texte comme dans l'exemple donc je ne vois pas comment faire.

Une solution que j'imagine :

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
 
<body>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<form method="post" action="index.php">
	<input id="case1" type="text" name="case1" />
	<div><input id="submit" type="submit" value="Valider" /></div>
	</form>
 
<script>
 
var e1.document.getElementById('case1'); 
 
var tps_case = 0;
var tps_temp = 0;
 
//fonction pour calculer les écarts de temps
function timestamp() {return Math.round((new Date()).getTime()/1000);}
 
// Récupération d'informations lorsque l'utilisateur utilise la case 'case1'
 
e1.addEventListener('focus',function(e){tps_temp = timestamp() ;},false);
 
// Lorsque que l'utilisateur 'sort' de la case, je récupère la variable.
 
e1.addEventListener('blur',function(e){ tps_case = timestamp() - tps_temp ;},false);
 
$("div").click(function () {      });
</script>
 
</body>

Déjà, je sens que mon DIV est bizarre, mais sans trouver comment faire mieux. Mais surtout, je ne comprend rien à la fonction POST, surtout comment la lier à ma variable

. Peux tu m'aiguiller stp ?

**provirus** · 17/08/2011, 17h57

Étant donné que tu utilises du Javascript pure aussi, tu peux ignorer le jQuery.click et à la place, sur ton input submit mettre onClick:

Code :

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

<input id="submit" type="submit" value="Valider" onClick="soumettre()" />

Puis pour ta fonction soumettre:

Code :

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

1
2
3
4
function soumettre() {
 $.post("test.php", { case: tps_case} );
 return true; // Doit retourner vrai, sinon le click sur le bouton est annulé
}

Ensuite dans le fichier php, tu peux obtenir la valeur avec

Code :

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

echo $_POST['case']

**t.delclite** · 18/08/2011, 00h26

Merci pour ta réponse.

Malheureusement, j'ai pas l'impression que cela marche.
Voici mon code :
(j'ai fait le post dans le fichier index.php pour voir le résultat directement, sans avoir a changer de page, je ne pense pas que cela pose problème).

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
        <title>Test de formulaire pour l'expérience</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
 
<body>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<?php echo $_POST['case']; ?>
 
<form method="post" action="index.php">
	<input id="case1" type="text" name="case1" />
	<input id="submit" type="submit" value="Valider" onClick="soumettre()" />
	</form>
 
<script type="text/javascript">
 
var e1 = document.getElementById('case1'); 
 
var tps_case = 0;
var tps_temp = 0;
 
//fonction pour calculer les écarts de temps
function timestamp() {return Math.round((new Date()).getTime()/1000);}
 
function soumettre() {
 $.post("index.php", { case: tps_case} );
 return true; // Doit retourner vrai, sinon le click sur le bouton est annulé
}
 
// Récupération d'informations lorsque l'utilisateur utilise la case 'case1'
 
e1.addEventListener('focus',function(e){tps_temp = timestamp() ; },false);
 
// Lorsque que l'utilisateur 'sort' de la case, je récupère la variable.
 
e1.addEventListener('blur',function(e){tps_case = timestamp() - tps_temp ; },false);
 
</script>
 
</body>
 
</html>

Le problème est que le POST ne renvoi rien...

Je ne suis pas convaincu des 2 cibles "index.php" à indiquer (l'une dans le formulaire, l'autre dans ta formule). Pour autant, j'ai testé plusieurs autres configurations, sans succès.

J'ai testé la formule (avec des alert à l'intérieur), et elle fonctionne bien (d'ailleurs, la variable tps_case répond bien). Je ne vois vraiment pas où est le problème

Une idée ?

**provirus** · 18/08/2011, 00h33

Comment regardes-tu le echo parce que présentement, le navigateur appelle, mais on ne fait rien avec la valeur de retour? Il faudrait que tu regardes avec un debuggueur. Par exemple dans Chrome.

Sinon, au lieu de faire un echo, essaye d'écrire dans un fichier sur le serveur.

transfert de tableau JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager