11540 sujets

JavaScript, DOM et API Web HTML5

Mettre à jour un INPUT de type text avec un SELECT OPTION

Bonjour

Voici donc le code d'une page qui contient une sélection par menu déroulant : je voudrais que lorsqu'on choisit par exemple la taille '40' toutes les cases texte en dessus se mettent à jour avec les bonnes mesures => SetStandardMeasure, puis dès que l'utilisateur modifie une de ses mesures à la main, hop la sélection rebascule en mode "sur mesure" => SetCustomMeasure

SetCustomMeasure pas de soucis Smiley biggrin
SetStandardMeasure Smiley decu Ca fonctionne bien sous Firefox, mais pas avec IE
J'ai beau mettre des alert('toto') pour tenter de debugger, rien ne se passe. Qu'est ce que j'ai mal fait ?

http://byanhor.free.fr/svgweb/mensurationsform.html

<!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" lang="fr">
<head>
  <title>Formulaire d'entrée des mensurations</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="stylesheet" href="mensurationsform.css">
  <link rel="shortcut-icon" href="favicon.ico">
  <script src="jQuery/jquery-1.5.2.js" type="text/javascript"></script>    
  <script language="JavaScript"> 
    function SetStandardMeasure()
    {
      var TailleSelectionObj = document.getElementById('TailleSelection');
      var index=TailleSelectionObj.selectedIndex;
      
      var TourPoitrineTab=["36","38","40","42","44","46"];
      var TourTailleTab=["36","38","40","42","44","46"];
      var TourPetitesHanchesTab=["36","38","40","42","44","46"];
      var TourBassinTab=["36","38","40","42","44","46"];
      var TourEncolureTab=["36","38","40","42","44","46"];
      var TourBrasTab=["36","38","40","42","44","46"];
      var TourPoignetTab=["36","38","40","42","44","46"];
      var LongueurTailleDosTab=["36","38","40","42","44","46"];
      var LongueurTailleDevantTab=["36","38","40","42","44","46"];
      var LongueurEpauleTab=["36","38","40","42","44","46"];
      var LongueurBrasTab=["36","38","40","42","44","46"];
      var HauteurPoitrineTab=["36","38","40","42","44","46"];
      var HauteurPetitesHanchesTab=["36","38","40","42","44","46"];
      var HauteurBassinTab=["36","38","40","42","44","46"];
      var HauteurBrasCoudeTab=["36","38","40","42","44","46"];
      var EcartPoitrineTab=["36","38","40","42","44","46"];
      var CarrureDosTab=["36","38","40","42","44","46"];
      var CarrureDevantTab=["36","38","40","42","44","46"];
      
      if (index>=1 || index<=6)
      {
        document.getElementById('TourPoitrine').value=TourPoitrineTab[index]; 
        document.getElementById('TourTaille').value=TourTailleTab[index]; 
        document.getElementById('TourPetitesHanches').value=TourPetitesHanchesTab[index]; 
        document.getElementById('TourBassin').value=TourBassinTab[index]; 
        document.getElementById('TourEncolure').value=TourEncolureTab[index]; 
        document.getElementById('TourBras').value=TourBrasTab[index]; 
        document.getElementById('TourPoignet').value=TourPoignetTab[index]; 
        document.getElementById('LongueurTailleDos').value=LongueurTailleDosTab[index]; 
        document.getElementById('LongueurTailleDevant').value=LongueurTailleDevantTab[index]; 
        document.getElementById('LongueurEpaule').value=LongueurEpauleTab[index]; 
        document.getElementById('LongueurBras').value=LongueurBrasTab[index]; 
        document.getElementById('HauteurPoitrine').value=HauteurPoitrineTab[index]; 
        document.getElementById('HauteurPetitesHanches').value=HauteurPetitesHanchesTab[index]; 
        document.getElementById('HauteurBassin').value=HauteurBassinTab[index]; 
        document.getElementById('HauteurBrasCoude').value=HauteurBrasCoudeTab[index]; 
        document.getElementById('EcartPoitrine').value=EcartPoitrineTab[index]; 
        document.getElementById('CarrureDos').value=CarrureDosTab[index]; 
        document.getElementById('CarrureDevant').value=CarrureDevantTab[index]; 
      }
    }
    function SetCustomMeasure()
    {
      var TailleSelectionObj = document.getElementById('TailleSelection');
      TailleSelectionObj.value = "custom";
    }
  </script>
</head>
<body>
  <table class="mensurationstable" id="mensurationsTableId">
  <tr><td>
    <form action="" method="get" id="mensurationsForm">

      <select id="TailleSelection" class="tailleSelection">
      <option value="t36" onClick="SetStandardMeasure()">Taille 36</option>
      <option value="t38" onClick="SetStandardMeasure()">Taille 38</option>
      <option value="t40" onClick="SetStandardMeasure()">Taille 40</option>
      <option selected value="t42" onClick="SetStandardMeasure()">Taille 42</option>
      <option value="t44" onClick="SetStandardMeasure()">Taille 44</option>
      <option value="t46" onClick="SetStandardMeasure()">Taille 46</option>
      <option value="custom">Taille sur mesures</option>
      </select><br/>
      Tour de poitrine<input type="text" id="TourPoitrine" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Tour de taille<input type="text" id="TourTaille" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Tour des petites hanches<input type="text" id="TourPetitesHanches" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Tour du bassin<input type="text" id="TourBassin" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Tour d'encolure<input type="text" id="TourEncolure" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Tour de bras<input type="text" id="TourBras" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Tour de poignet<input type="text" id="TourPoignet" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Longueur taille dos<input type="text" id="LongueurTailleDos" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Longueur taille devant<input type="text" id="LongueurTailleDevant" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Longueur d'épaule<input type="text" id="LongueurEpaule" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Longueur de bras<input type="text" id="LongueurBras" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Hauteur de poitrine<input type="text" id="HauteurPoitrine" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Hauteur des petites hanches<input type="text" id="HauteurPetitesHanches" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Hauteur du bassin<input type="text" id="HauteurBassin" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Hauteur du bras coude<input type="text" id="HauteurBrasCoude" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Ecart poitrine<input type="text" id="EcartPoitrine" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Carrure dos<input type="text" id="CarrureDos" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      Carrure devant<input type="text" id="CarrureDevant" onClick="SetCustomMeasure()" maxlength="5" size="5"/><br/>
      <input type="submit" value="Valider" />
    </form>
  </td></tr>
  </table>
</body>
</html>

Modifié par Ababdge (02 May 2011 - 10:10)
Je précise ça semble mal passer entre les balises 'code' quà l'intérieur du
if (index>=1 || index<=6)
c'est bien une succession de
document.mensurationsForm.xxx.value=xxxTab Smiley index ;
Sujet clos
Aller à