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.

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

Ben, en validant, je recharge la page index.php.
Normalement, il doit alors prendre en compte le code

Code :

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

<?php echo $_POST['case']; ?>

(Par exemple, si je fais le même code, mais avec case1 (le nom de ma case de formulaire), il me ressort bien la valeur que j'ai indiqué précédemment dans la case)

Non ?

Concernant l'écriture dans un fichier, tu parle d'une base sql ?

Désolé, je découvre vraiment petit à petit, à la fois php et JS.

**provirus** · 18/08/2011, 02h21

Quand tu fais du AJAX, c'est une requête distincte qui est envoyée à la page désirée et le résultat est retourné.

Par exemple, au lieu de mettre:

Code :

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

$.post("index.php", { case: tps_case} );

si tu mettais:

Code :

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

1
2
3
$.post("index.php", { case: tps_case},function(data) {
  alert(data);
});

tu devrais voir ce qui est retourné.

Là quand tu soumets, ce que tu vois dans ton navigateur, c'est uniquement le résultat de ta soumission et c'est pourquoi tu vois si tu mets 'case1'. Tu ne verras jamais les autres trucs.

Je te conseille donc de changer

Code :

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

$.post("index.php", { case: tps_case} );

pour

Code :

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

$.post("testwrite.php", { case: tps_case} );

et dans le fichier testwrite.php, mets:

Code :

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

<?php file_put_contents('touch.txt', $_POST['case']);

Avec ça, après une soumission, tu devrais avoir un fichier texte sur ton serveur et pouvoir voir la valeur.

**Bovino** · 18/08/2011, 08h20

Code :

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

1
2
$.post("test.php", { case: tps_case} );
return true;

Heu... là le formulaire est soumis avant de recevoir la réponse du serveur

Tu peux soit passer par une requête synchrone (mais bon, pas top) soit utiliser un input type button à la place submit, faire tes vérifications et soit rediriger en JavaScript, soit appeler la méthode submit() du formulaire.

**t.delclite** · 18/08/2011, 11h23

Bon, ça marche avec le petit exemple !!
Mais plus avec mon code

Je regarde tout ça cette aprem, mais c'est bon je le sens bien (après tout, là, j'ai tout ce qu'il me faut).

Un grand merci provirus pour ton aide et ta patience

Je te tiens au courant.

**t.delclite** · 18/08/2011, 14h48

En fait, j'avais oublié d'ajouter le code JS, jquery-latest.js, maintenant ça marche parfaitement.

Merci beaucoup, je vais pouvoir bien avancé avec ça. A bientôt.
Thomas

transfert de tableau JS

JavaScript

Discussions similaires

Partager

Partager