Récupérer la valeur d'une liste

**navy57** · 04/03/2014, 20h46

Bonjour,

Je suis en train de bricoler une appli pour mon site, elle consiste à afficher un prix de revient du déplacement en fonction du code postal,

je voudrais récupérer la deuxième valeur que l'on peut insérer dans l'array list en cliquant sur un bouton tarif.

Voici mon fichier:

Code html :

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

1
2
3
4
5
6
<!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="en" lang="en">
<head>
    <title>Code postaux Y-Kars</title>
 
<style type="text/css">

Code css :

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
55
56
57
58
59
60
61
62
63
64
div#liste {
 min-height:1.70em;
 text-align:left;
 position:relative;
 right:52px;
 border: solid 1px black;border-radius:5px;}
 
#liste{
 border: solid 1px black; width: 355px;
 overflow: auto;
 display: none;
 border-radius:5px;}
 
.result {
 color: #ff6600;
 background: white;
 font: 1.25em "Arial Sans Serif";
 border: solid 1px black;border-radius:5px}
 
.result:hover {
 color: white;
 background: #ff6600;
 cursor : Default;}
 
#total{
 color: #FF0000;
 background: white;
 font: 1.25em "Arial Sans Serif" ;
 font-weight: bold;
 width : 100px; height : 30px;
 text-align:center;
 border: solid 1px black;border-radius:5px}
 
#calculer{
 color: #ff0000;
 font: 1.25em "Arial Sans Serif";
 width : 100px; height : 30px;
 border-radius:5px;
 cursor : pointer;}
 
#Effacer{
 width : 100px; height : 30px;
 font: 1.25em "Arial Sans Serif";
 border-radius:5px;
 cursor : pointer;}
 
#champ{
 width: 350px;height: 30px;
 font: 1.25em "Arial Sans Serif";
 border: solid 1px black;border-radius:5px;}
 
body {
 background-image:url(<a href="http://www.ykars.fr/medias/images/bacground-dep.png);" target="_blank">http://www.ykars.fr/medias/images/bacground-dep.png);</a>
 background-repeat:no-repeat;
 background-position: top 10px center;
 color: white;}
 
p.montitre {
 color: #ff6600;
 font: 1.75em "Soniano Sans Unicode";}
 
p.soustitre {
 color: #FFD700;
 font: 1em "Arial Sans Serif";}

Code html :

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
</style>
 
  </head>
    <form>
      <body onload="document.getElementById('champ').focus()">
    <div >
    <div align="center";/>
      <p class="montitre">Entrez votre code postal</>     
 
 
     <div style="font-family: Arial;"><span style="color: #f0000;font-size: 16px;">Puis cliquez ici >&nbsp;
      <input type="button" name="calculer" id="calculer" value="Tarif" onclick=""&nbsp;&nbsp;/>
      <input type="text" name="total" id="total"value""><span style="color: #ff0000;"><strong> <span style="font-size: x-large;">€</span></strong></span></span></div><br>
 
 
     <div onkeydown="return moveSelection()">
 
      <input type="text" autocomplete="off" name="myCombo" id="champ"
      onkeyup="window.setTimeout('refreshList();', 10); return getEnterKey()"/>
     <input type="button" name="Effacer" id="Effacer" OnClick="javascript:window.location.reload()" value="Effacer">
 
     <div id="liste"></div>
      <p class="soustitre">(Moselle et Bas Rhin uniquement)</p></p>   
    </div>  
    </form>
 
     <script type="text/javascript">

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
//  var selIndex = 0;
      var nbMatch = 0;
      var myArray = new Array();
      var content = '';
      var old = '';
 
      function fillInput(i)
      {
       document.getElementById('champ').value = myArray[i];
      document.getElementById('liste').style.display= 'none';
      document.getElementById('champ').focus();
      }
      function refreshList()
      {
       if(document.getElementById('champ').value != old)
       {
        old=document.getElementById('champ').value;
        document.getElementById('liste').innerHTML = '';
        if (document.getElementById('champ').value.length > 0)
        {
         nbMatch = 0;
         content='';
         for (var i=0; i < myArray.length; i++)
         {
          if (myArray[i].slice(0, document.getElementById('champ').value.length).toUpperCase() == document.getElementById('champ').value.toUpperCase())
          {
           nbMatch++;
           content += '<div id="' + nbMatch + '" class="result" onclick="fillInput(' + i + ')">' + myArray[i] + '</div>';
          }
         }
         if (nbMatch)
         {
          document.getElementById('liste').innerHTML = content;
          document.getElementById('liste').style.height = (Math.min(5, nbMatch)) + 'em';
          document.getElementById('liste').style.display = 'block';
          selIndex=0;
         }
         else
          document.getElementById('liste').style.display = 'none';
        }
        else
        {
         document.getElementById('liste').style.display = 'none';
        }
       }
      }
        function moveSelection()
     {
       if (event.keyCode == 40)
       {
        if (selIndex > 0 && selIndex < nbMatch)
        {
 
         document.getElementById(selIndex)
        }
        if (selIndex < nbMatch)
        {
         selIndex++;
 
         document.getElementById(selIndex)
         document.getElementById(selIndex).focus();
        }
       return false;
       }
       else if (event.keyCode == 38)
       {
        if (selIndex > 1)
        {
 
         document.getElementById(selIndex)
        }
        if (selIndex > 1 && selIndex <= nbMatch)
        {
         selIndex--;
 
        document.getElementById(selIndex)
        }
        return false;
       }
       return getEnterKey();
      }
      function getEnterKey()
      {
       if (event.keyCode == 13)
       {
        if (selIndex > 0)
        {
         document.getElementById('champ').value = document.getElementById(selIndex).innerText;
         document.getElementById('liste').style.display = 'none';
         old=document.getElementById(selIndex).innerText
        }
        return false;
       }
       else
       {
        return true;
       }
      }
{
 
myArray[0] = '57920 Aboncourt'; '1';
myArray[1] = '57590 Aboncourt-sur-Seille'; '2';
myArray[2] = '57560 Abreschviller'; '3';
myArray[3] = '57340 Achain'; '4';
myArray[4] = '57412 Achen'; '5';
myArray[5] = '57580 Adaincourt'; '6';
myArray[6] = '57380 Adelange'; '7';
myArray[7] = '57590 Ajoncourt'; '8';
myArray[8] = '57590 Alaincourt-la-Côte'; '9';
myArray[9] = '57670 Albestroff'; '10';
 
}

Code html :

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

1
2
3
     </script>    
    </body>
    </html>

Veuillez m'excuser pour les erreurs que vous pourrez trouver mais il fonctionne sur la partie afficher et sélectionner la commune et je bloque sur le reste, voilà ci quelqu'un de compétant et sympa pourrez m'aider je serais bien comptent.

**plawyx** · 04/03/2014, 21h23

java != javascript ;

Récupérer la valeur d'une liste

JavaScript

Discussions similaires

Partager

Partager