lire un input avec JS

Version imprimable

08/10/2009, 18h17
GYK

lire un input avec JS

Bonjour,

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

Code:

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

Bonjour,

oui tout à fait possible.

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

Code:

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

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

Code:

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

et ta fonction Javascript
Code:

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

08/10/2009, 19h58
GYK

Merci sebhm,

Je complète donc simplement le

Code:

<a href

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

Code:

Head

je pense?

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

Bonne soirée
08/10/2009, 22h00
sebhm

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

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:

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.

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

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

Code:

$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:

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

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>

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:

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 ?

09/10/2009, 13h54
sebhm

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

Code:

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

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

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

Code:

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

09/10/2009, 15h22
Matthieu2000

lire le tuto +:faq: +
http://www.developpez.net/forums/d81...avascript-url/
09/10/2009, 16h16
GYK
????
Je pige rien car, dans le tuto
Code:

1 2 document.getElementById(id_lien).href
fait référence à un lien, alors que dans une réponse à mon post
Code:

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
09/10/2009, 18h15
sebhm

Quand je dis

Citation:

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

Code:

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
09/10/2009, 18h41
GYK

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.
09/10/2009, 23h55
sebhm

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

Bonjour sebhm

Voici le code.

Code:

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

10/10/2009, 15h53
sebhm

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 ...
12/10/2009, 08h46
GYK

Bonjour sebhm,

Pour le php c'est une erreur de copier-coller mais il figure bien dans le code.
Pour la récupération j'ai rajouté un

Code:

$_GET

et ca marche.
Merci d'avoir pris du temps pour moi, tu m'as beaucoup aider et je n'y serais jamais arrivé seul.
Bonne journée