Lire la taille d'un élément de <form>

**rdummies** · 18/06/2007, 20h50

Bonjour à tous,

Je voudrais récupérer en JS la taille (plus précisemment la longueur en pixels) d'un élément <select> d'une <form>.
J'ai bien sûr commencé par utiliser la propriété clientWidth, mais elle ne fonctionne pas sous IE.

Avez-vous une solution à me proposer ?

Merci d'avance

**Bisûnûrs** · 18/06/2007, 20h55

Si tu as un style sur ton select :

Code :

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

document.getElementById('iddetonselect').style.width;

Sinon :

Code :

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

document.getElementById('iddetonselect').offsetWidth;

**rdummies** · 18/06/2007, 21h00

Je viens d'essayer, le offsetWidth me renvoie 0 aussi (j'ai fait un alert pour être sûr).
Je n'ai pas imposé de style sur le <select> et je cherche à lire sa longueur afin de forcer celle des <input> (dans le même formulaire) à la même taille.

**Bisûnûrs** · 18/06/2007, 21h03

Pourtant je viens d'essayer ça qui fonctionne très bien :

Code html :

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

1
2
3
4
<select id="truc">
   <option>Coucoucoucoucoucoucou</option>
</select>
<input type="button" value="Test" onclick="alert(document.getElementById('truc').offsetWidth)" />

**rdummies** · 18/06/2007, 21h37

Pour ma part, j'ai mis ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
function init_affichage() {
// recuperation de la taille du menu déroulant
	var taille = document.getElementById("menu_parent").offsetWidth;
 
// retaillage des autres elements
	document.getElementById("menu_id").style.width = taille;
	document.getElementById("menu_level").style.width = taille;
	document.getElementById("menu_titre").style.width = taille;
	document.getElementById("menu_lien").style.width = taille;
}

Et comme précedemment, ça marche sous FireFox, mais pas sous IE.
Je désespère de comprendre.

**Bisûnûrs** · 18/06/2007, 21h45

Code :

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

document.getElementById("menu_id").style.width = taille + "px";

**rdummies** · 18/06/2007, 22h37

Je ne comprends toujours pas pourquoi, mais ça ne marche toujours pas ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function init_affichage() {
// recuperation de la taille du menu déroulant
	var taille = document.getElementById("menu_parent").offsetWidth;
 
// retaillage des autres elements
	if (taille != 0) {
		document.getElementById("menu_id").style.width = taille+"px";
		document.getElementById("menu_level").style.width = taille+"px";
		document.getElementById("menu_titre").style.width = taille+"px";
		document.getElementById("menu_lien").style.width = taille+"px";
	}
}

J'ai ajouter le petit test sur ma variable taille en attendant mieux.

**Bisûnûrs** · 18/06/2007, 22h41

A quel moment appelles-tu ta fonction ?

Tu es sûr de n'avoir qu'un seul élément dont l'id est "menu_parent" ?

Quand tu fais un alert de "taille" ça te met 0 c'est ça ?

Parce que la syntaxe est bonne ..

**rdummies** · 18/06/2007, 22h53

Je vérifirai ça demain au boulot, parce que là, j'ai les neurones en compote !

Merci pour ton aide et à demain.

**rdummies** · 19/06/2007, 08h36

Bon, après pas mal de tests ce matin, j'ai essayé d'épurer un peu mon code pour ne laisser que la <form>, et ca fonctionne ....... Il va falloir que je révise ma copie !

Après avoir révisé ma copie :
Mon <form> est dans un tableau et j'ai mis un "width=100%" pour la case concernée. Cela peut-il avoir un impact ?

**Bisûnûrs** · 19/06/2007, 08h45

Ca provient bien d'un élément perturbateur dans ton code (HTML ou JS) et non pas de ce code en question. ^^

**rdummies** · 19/06/2007, 08h50

C'est définitivement mon tableau qui pose problème.
Il va falloir que je trouve une autre solution afin de présenter ma page web sans tableau ....

**Bisûnûrs** · 19/06/2007, 08h52

Envoyé par rdummies

Il va falloir que je trouve une autre solution afin de présenter ma page web sans tableau

Ca tombe bien, comme ça tu pourras garder un code avec une sémantique correcte.

**rdummies** · 19/06/2007, 08h55

Il y a certainement une règle que je ne connais pas qui expliquerai ce comportement

Pourtant, la balise <form> est acceptée entre des balises <td></td>.
Peux-tu m'expliquer le comment du pourquoi ?

**Bisûnûrs** · 19/06/2007, 09h03

Dans un tableau "brut", il n'y a aucune règle de cette sorte qui empêcherait l'exécution normale de ce script.

Et pour cause ce code fonctionne très bien :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table>
   <tr>
      <td>
         <form>
            <select id="truc">
               <option>Coucoucoucoucoucoucou</option>
            </select>
            <input type="button" value="Test" onclick="alert(document.getElementById('truc').offsetWidth)" />
         </form>
      </td>
   </tr>
</table>

C'est autre chose qui bloque. On peut voir ton code, à tout hasard ?

**rdummies** · 19/06/2007, 09h29

Voici mon code qui ne fonctionne pas :

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
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
<html>
 
<head>
</head>
 
<body>
  <table cellspacing="15">
    <tr>
      <td class="contenu" width="100%">
        <h1>Mise à jour du site</h1>
          <script type="text/javascript" src="index.js"></script>
          <form method="post" action="index.php" enctype="multipart/form-data">
          <p>
            <input id="majfic" name="majfic" type="checkbox" value="OK" checked>
            Envoi d'un fichier ZIP
            <center>
            <div id="dmajfic" style="border: 1px solid #993300; padding: 10px;">
              <b>Choisir ici l'archive ZIP à envoyer pour la mise à jour du site.</b><br>
              <input name="fichier" type="file" accept="application/zip">
            </div>
            </center>
          </p>
          <p>
            <input id="majmenu" name="majmenu" type="checkbox" value="OK" checked>
            Ajout d'un item dans le menu
            <center>
            <div id="dmajmenu" style="border: 1px solid #993300; padding: 10px">
              <table>
                <tr>
                  <td><b>Identifiant de la page :</b></td>
                  <td><input id="menu_id" name="menu_id" type="text" value="13" disabled></td>
                </tr>
                <tr>
                  <td><b>Page parente :</b></td>
                  <td>
                    <select id="menu_parent" name="menu_parent" size="1">
                      <option selected value="0">Racine</option>
                      <option value="1">--> Accueil</option>
                      <option value="2">--> Un peu de ma vie</option>
                      <option value="5">-----> A propos de moi</option>
                      <option value="6">-----> Images du 12 août <option>
                      <option value="7">-----> La famille s'agrandit</option>
                      <option value="8">-----> Mon petit chat</option>
                      <option value="3">--> Carnets de route</option>
                      <option value="9">-----> 05/2005 : l'Italie</option>
                      <option value="10">-----> 10/2006 : la Polynésie Française</option>
                      <option value="4">--> Liens</option>
                      <option value="11">--> Accès privé</option>
                      <option value="12">-----> Mise à jour du site</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td><b>Autorisation requise :</b></td>
                  <td><input id="menu_level" name="menu_level" type="text" value="0"></td>
                </tr>
                <tr>
                  <td><b>Titre dans le menu :</b></td>
                  <td><input id="menu_titre" name="menu_titre" type="text" value=""></td>
                </tr>
                <tr>
                  <td><b>Lien vers la page :</b></td>
                  <td><input id="menu_lien" name="menu_lien" type="text" value=""></td>
                </tr>
              </table>
            </div>
            </center>
          </p>
          <p>
            <input type="submit" value="Envoyer">
          </p>
        </form>
        <script type="text/javascript">init_affichage();</script>
      </td>
    </tr>
  </table>
</body>
 
</html>

J'ai juste épuré un peu toute la présentation (menu, en-tête et pied de page, ...). Dans cet état, le javascript ne fonctionne pas. Dès que je retire les balises du premier tableau, ça fonctionne à nouveau.

**Bisûnûrs** · 19/06/2007, 09h52

Au lieu d'appeler ta fonction de cette manière :

Code html :

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

<script type="text/javascript">init_affichage();</script>

Fais plutôt comme ça :

Code html :

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

<body onload="init_affichage()">

Ca résoudra ton problème.

**rdummies** · 19/06/2007, 09h59

OK, ça fonctionne comme ça.
Maintenant, j'ai un nouveau problème : le <body> est généré par un script php, mais la <form> est générée dans un include.
En bref, je charge toujours le script "index.php", mais pour chaque page, un include différent.

**Bisûnûrs** · 19/06/2007, 10h08

Place alors cette ligne :

Code html :

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

<script type="text/javascript">init_affichage();</script>

en dessous de ton tableau, juste avant la fermeture du body.

Ou alors fais une exception dans ton index.

**rdummies** · 19/06/2007, 10h13

Je pense que je vais me pencher sur un ajout conditionné dans le <body>.

Merci beaucoup de ton aide et de ta patience.

Lire la taille d'un élément de <form>

JavaScript

Discussions similaires

Partager

Partager