lire un input avec JS

**GYK** · 08/10/2009, 18h17

Bonjour,

J'espère que je suis sur le bon forum?
Voila, j'ai un formulaire en

Code :

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

Method="POST"

avec une zone input et également un tableau comprenant les lettres de A à Z

J'aimerais que quand je clique sur une des lettres la valeur renseignée dans ma zone input soit lue en même temps pour être transmise avec ma lettre.

Je ne connais rien en JS, mais bien expliqué j'arriverais à me débrouiller.

Mais, est-ce possible ?

Merci

**sebhm** · 08/10/2009, 19h20

Bonjour,

oui tout à fait possible.

Tu as ton input, il faut l'identifier (avec l'attribut id) :

Code :

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

<input type="text" id="mon_input" ... />

tu crées une fonction qui va être exécutée lorsqu'on clique sur ta lettre

Code :

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

<a href="toto.html" ... onclick="ma_fonction(); return true/false"> lettre X </a>

et ta fonction Javascript

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function ma_fonction() {
  //recuperation de la valeur de ton input
  var valeur_input=document.getElementById('mon_input').value;
 
  //et puis tu en fais ce que tu veux
  ...
}
</script>

Dans le onclick, tu fais "return true" si tu veux que le click sur le lien t'envoie bien sur la page de destination (celle du href)
"return false" pour ne pas bouger

**GYK** · 08/10/2009, 19h58

Merci sebhm,

Je complète donc simplement le

Code :

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

<a href

que j'ai déjà à chaque lettre, et j'installe le script dans le

Code :

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

Head

je pense?

Je n'essaierai que demain, et je te tiens au courant. Ce soir je ne peux pas.

Bonne soirée

**sebhm** · 08/10/2009, 22h00

oui.

mais si tu veux changer de page en cliquant sur ta lettre (et pas seulement te positionner dans la page), il faudra alors que tu ajoutes la valeur récupérée de ton input à l'url de la page de destination... dans ce cas, regarde par ici

**GYK** · 09/10/2009, 08h57

Bonjour sebhm,

J'ai essayé, mais j'ai un problème, je ne récupère pas ma valeur.
Je te joins une version edulcorée de mon php.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toto</title>
</style>
<script type="text/javascript">
function recup_posmaj() {
  //recuperation de la valeur de l'input
  var place=document.getElementById('posmaj').value;
 
  //et puis tu en fais ce que tu veux
$posmaj = $_POST['place'];
}
</script>
</head>
 
<body>
<?php echo $posmaj . " POSMAJ_0 ";?>
 
<FORM class="Cadre"  Method="POST" width=630  height=330 enctype="multipart/form-data"  action="choix.php">
<?php
if ($posmaj == "")
{
?>
<p >Quel est sa position ?</p>
 
                        <p>
  						 <input class="posmod" name="posmaj" type="text" id="posmaj"  size="2" maxlength="2" value="<?php echo $posmaj; ;?>">
 
 
 
 <?php 
}
else
{
?>
<p>En position N°  <?php echo "<font color='#604E11'><b> $posmaj </b></font>";?> 
</p>
<?php
}
?>
 
<table align="center" width="90%" height="35"  border="1" class="Select">
 
            <td height="28"><div align="center"><a href="Toto.php?initiale=A" class="Style8" onclick="recup_posmaj(); return true">A</a></div></td>
 
        </table> <?php echo $posmaj . " POSMAJ_1" ;?>
</FORM>
 
</body>
</html>

Peux tu y jeter un oeil !
Merci.

**sebhm** · 09/10/2009, 09h48

C'est quoi "POSMAJ_0" et " POSMAJ_1" ?

et qu'est ce que tu veux faire en javascript en faisant ceci :

Code :

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

$posmaj = $_POST['place'];

??

tu mélanges PHP et javascript, ca va pas lui plaire.

Le click sur la letttre A ouvre une nouvelle page, dans laquelle tu veux simplement faire suivre la valeur de ton input ??
dans ce cas, la seule facon de passer ta variable 'posmaj' à la page suivante est via l'url (car tu ne valides pas de formulaire, donc pas de variable POST), ce qui te permettra de récupérer une variable $_GET de l'autre coté

Code :

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

1
2
 
<a href="Toto.php?initiale=A" class="Style8" onclick="recup_posmaj(this); return true">A</a>

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function recup_posmaj(le_lien) {
  //recuperation de la valeur de l'input
  var place=document.getElementById('posmaj').value;
 
  //et puis tu en fais ce que tu veux
  le_lien.href = le_lien.href + '&la_place=' + encodeURIComponent(place);
}
</script>

**GYK** · 09/10/2009, 10h16

POSMAJ_0" et " POSMAJ_1 sont simplement des echo PHP pour voir le contenu de la variable.
Le _0 et _1 sont simplement ici pour savoir la position de l'echo dans le code.
Le clique sur le A en fait rappelle le même PHP qui en fonction de la lettre me fait une liste déroulante des noms commencant par A. Ca ca marche! Mais a ce moment du traitement j'ai besoin de la variable $posmaj

Code :

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

1
2
3
4
5
6
7
8
9
 
function recup_posmaj(le_lien) {
  //recuperation de la valeur de l'input
  var place=document.getElementById('posmaj').value;
 
  //et puis tu en fais ce que tu veux
  le_lien.href = le_lien.href + '&la_place=' + encodeURIComponent(place);
}
</script>

Qu'entend tu par le lien ?

**sebhm** · 09/10/2009, 13h54

j'entends le lien qui a été cliqué.
Car j'ai aussi fait ceci :

Code :

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

onclick="recup_posmaj(this); return true">

ainsi, la fonction javascript prend en parametre le lien sur lequel on clique

**GYK** · 09/10/2009, 14h11

J'avais vu le "this" et je l'ai mis donc mes codes maintenant donne ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<td height="28"><div align="center"><a href="Toto.php?initiale=A" onclick="recup_posmaj(this); return true">A</a></div></td>
 
<script type="text/javascript">
function recup_posmaj(Toto.php) {
  //recuperation de la valeur de ton input
  var place=document.getElementById('posmaj').value;
 
  //et puis tu en fais ce que tu veux
  Toto.php = Toto.php + '&posmaj=' + encodeURIComponent(place);
}
</script>

Mais ca marche pas

**Matthieu2000** · 09/10/2009, 15h22

lire le tuto +

+
http://www.developpez.net/forums/d81...avascript-url/

**GYK** · 09/10/2009, 16h16

????
Je pige rien car, dans le tuto

Code :

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

1
2
 
document.getElementById(id_lien).href

fait référence à un lien, alors que dans une réponse à mon post

Code :

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

1
2
 
var place=document.getElementById('posmaj').value;

lui fait référence à une variable.
Alors comme je ne connais rien au JS je rame

**sebhm** · 09/10/2009, 18h15

Quand je dis

j'entends le lien qui a été cliqué.
Car j'ai aussi fait ceci :

Code :

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

onclick="recup_posmaj(this); return true">

ainsi, la fonction javascript prend en parametre le lien sur lequel on clique

je ne te dis pas de remplacer 'le_lien' par 'toto.php'.

'le_lien' est une variable qui désigne le lien qui a été cliqué !
Il faut le laisser tel quel (tu l'appelles comme tu veux, mais tu l'utilises tel que je te l'ai montré, avec le .href qui designe justement ton 'toto.php')

Chez moi, ce que je t'ai dit marche tres bien

**GYK** · 09/10/2009, 18h41

Excuse sebhm, mais je doit être nul de chez nul.
J'ai fais un copié collé de ton script et chez moi ça marche pas !
Déjè je ne vois pas ou je récupère la valeur de "place" pour l'utiliser par la suite. Je me complique sans doute l'existence.

**sebhm** · 09/10/2009, 23h55

Peux tu me copier ton code en entier stp ?
je vais regarder

**GYK** · 10/10/2009, 13h09

Bonjour sebhm

Voici le code.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</style>
<script type="text/javascript">
function recup_posmaj(le_lien) {
  //recuperation de la valeur de l'input
  var place=document.getElementById('posmaj').value;
 
  //et puis tu en fais ce que tu veux
  le_lien.href = le_lien.href + '&la_place=' + encodeURIComponent(place);
}
</script>
</head>
 
<body>
 
 
<FORM class="Cadre"  Method="POST" width=630  height=330 enctype="multipart/form-data"  action="choix.php">
 
if ($posmaj == "")
{
?>
<p >Quel est sa position ?</p>
 
                        <p>
  						 <input class="posmod" name="posmaj" type="text" id="posmaj"  size="2" maxlength="2" value="<?php echo $posmaj; ;?>">
 
 
 
 <?php 
}
else
{
?>
<p>En position N°  <?php echo "<font color='#604E11'><b> $posmaj </b></font>";?> 
</p>
<?php
}
?>
</FORM>
 
<table align="center" width="90%" height="35"  border="1" class="Select">
 
            <td height="28"><div align="center"><a href="Toto.php?initiale=A" onclick="recup_posmaj(this); return true">A</a></div></td>
 
        </table> 
 
 
</body>
</html>

Merci

**sebhm** · 10/10/2009, 15h53

ben mis à part le premier <?php qui manque, ton code marche bien et on arrive bien sur la page toto.php avec un parametre supplémentaire égal à la valeur de l'input ...