Affichage d'un tableau en fonction d'une valeur

Résolu

Coukies94 Messages postés 44 Statut Membre -
Coukies94 Messages postés 44 Statut Membre - 23 sept. 2015 à 14:07

Bonjour à tous,

J'essai de trouver un moyen pour facilement rassembler des informations en fonction d'une valeur et le tout dans une unique page HTML

Pour être plus précis :

Actuellement j'ai le code suivant :

<body>

<form id="frm1" action="form_action.asp">
Code SA : <input id="value1" name="subject" type="text" value=""></input><BR/>
Code SA TEOS: <input id="value2" name="subject" type="text" value="" disabled="disabled"></input>
</form>

<button onclick="myFunction()">Validez</button>

<p id="demo"></p>

<script>
function myFunction() {
var x = document.getElementById("value1").value;
var y;
switch(x) {
case "001292" : y = "092";break;
case "001075" : y = "075";break;
}
document.getElementById("value2").value = y;
}
</script>

Ce qui me donne actuellement un unique champ en retour de la saisie utilisateur :

Et j'aimerais pouvoir avoir plusieurs champs en retour de cette saisie (et en plus que la touche entrer permette la validation de la saisie utilisateur :

Afficher la suite

1 réponse

Réponse 1 / 1
Utilisateur anonyme
Salut, Tu veux dire quelque-chose comme ça ?
J'ai rajouté un tableau (+ 2 lignes de CSS pour les bordures du tableau) dans lequel je mets mes données entre les balises
```
<td>
```
et
```
</td>
```
grâce à "l'attribut"
```
innerHTML
```
.
```
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
  <style>
    td {border: 3px black solid;}
    table {border-collapse:collapse;}
  </style>
</head>
<body>
  <form id="frm1" action="form_action.asp">
    <label for="value1">Code SA :</label>
    <input id="value1" name="subject" type="text" value="" />
  </form>
  <button onclick="myFunction()">Validez</button><br/><br/>
  <table>
    <tr><td>Code SA TEOS:</td><td id="value2" style="color:grey;"> </td></tr>
    <tr><td>Téléphone:</td><td id="value3"> </td></tr>
  </table>

  <script>
    function myFunction() {
      var x = document.getElementById("value1").value;
      var y="",z="";
      switch(x) {
        case "001292":
          y = "092";
          z="0832130213";
        break;
        case "001075":
          y = "075";
          z="0836656565";
        break;
      }
      document.getElementById("value2").innerHTML = y;
      document.getElementById("value3").innerHTML = z;
    }
  </script> 
</body>
</html>
```
Après si tu veux t'amuser à cacher des objets de la page, tu peux modifier le style d'un objet :
```
document.getElementById("value1").style.visibility = "visible";
document.getElementById("value1").style.visibility = "hidden";
```
1
1. Coukies94 Messages postés 44 Statut Membre 8
  
  Merci pour ton aide !
  
  Voila ce que j'ai fait :
  
  <SCRIPT language=javascript>
  // Création de la base de données
  var tjs_base=new TJS_InitBase("_self");
  // TJS_InitBase(target) : target="_blank" pour ouvrir dans une nouvelle page
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 001075 </B> <br> ",""," 1796 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 021559 </B> <br> ",""," 21759 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137769 </B> <br> ",""," 127904 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137769 </B> <br> ",""," 137059 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137563 </B> <br> ",""," 137060 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137769 </B> <br> ",""," 137062 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137067 </B> <br> ",""," 137073 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 127906 </B> <br> ",""," 137075 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137563 </B> <br> ",""," 137096 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137563 </B> <br> ",""," 137122 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137769 </B> <br> ",""," 137160 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137067 </B> <br> ",""," 137169 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137117 </B> <br> ",""," 137273 ");
  tjs_base.Add("<br> <B> Code SA a renseigner sur ITEOS <br> 137563 </B> <br> ",""," 137314 ");
  
  function TJS_InitBase(target) {
  this.nb_item=0;
  this.target=target;
  this.Add=AddItem;
  this.Search=SearchItem;
  }
  function AddItem(page,desc,cle) {
  var nb = this.nb_item;
  var item = new Object;
  item.page=page;
  item.desc=desc;
  item.cle=cle;
  this[nb]=item;
  this.nb_item++;
  }
  
  function SearchItem(txt) {
  // txt contient le texte de la recherche
  txt = unescape(txt);
  txt = txt.replace(/\+/g," ");
  var n=tjs_base.nb_item;
  var indice=-1;
  if (txt=="Saisir un mot clé") {alert("Entrez un mot pour la recherche"); }
  else{
  document.forms["tjs_search"].elements["mot"].value=txt;
  var Z=""; var nb=0;
  for (var i=0; i<n; i++) {
  if (tjs_base[i].cle.toUpperCase().indexOf(txt.toUpperCase(),0)!="-1") {
  Z+="<A target='"+tjs_base.target+"' href='"+tjs_base[i].page+"'>"+tjs_base[i].desc+"</A> <SMALL>("+tjs_base[i].page+")</SMALL><BR>"
  nb++;
  }
  }
  if (nb>0) {
  if (nb==1) {Z="Un résultat trouvé pour la recherche sur [<B>"+txt+"</B>] : <BR>"+Z;}
  else {Z=nb+" résultats trouvés pour la recherche sur [<B>"+txt+"</B>] : <BR>"+Z;}
  }else{Z="Aucun résultat pour la recherche sur [<B>"+txt+"</B>]<BR>Vérifiez l'orthographe ou essayez un autre mot clé !";}
  document.write(Z);
  }
  }
  
  function TJS_Search(f) {
  if (f.mot.value!=""){f.submit();}
  }
  
  function TJS_PrintResult() {
  var url=document.location.href;
  if (url.indexOf("?mot=",0) > 0) {
  var mot=url.substring(url.indexOf("?mot=",0)+5);
  SearchItem(mot);
  }
  }
  
  </SCRIPT>
  
  <DIV ALIGN="CENTER"><b>Traitement des RDI_IN en erreurs sur ITEOS</b></DIV>
  
  <br>
  <body>
  
  Entrez le code SA qui apparait sur les RDI_IN de iTEOS puis validez
  
  </body>
  
  </FONT COLOR="##298A08">
  
  <FORM name=tjs_search METHOD=get action="Référentiel URL GEP.html">
  <INPUT NAME="mot" SIZE=20 MAXLENGTH=35 value="Saisir un mot clé" onFocus="if (this.value=='Saisir un mot clé') {this.value=''}" onBlur="if (this.value==''){this.value='Saisir un mot clé'}">
  <INPUT TYPE="button" name="bouton" VALUE="Rechercher" onClick="TJS_Search(this.form)">
  </FORM>
  <SCRIPT language=javascript>
  // Affichage des résultats éventuels.
  TJS_PrintResult();
  </SCRIPT>
  
  0

Affichage d'un tableau en fonction d'une valeur

1 réponse

Discussions similaires

Newsletters