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>

lire un input avec JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager