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

Version imprimable

18/06/2007, 20h50
rdummies

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

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
18/06/2007, 20h55
Bisûnûrs

Si tu as un style sur ton select :

Code:

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

Sinon :

Code:

document.getElementById('iddetonselect').offsetWidth;
18/06/2007, 21h00
rdummies

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.

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

Code:

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

Pour ma part, j'ai mis ça :

Code:

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.

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

Code:

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

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

Code:

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.

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

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 ..
18/06/2007, 22h53
rdummies

Je vérifirai ça demain au boulot, parce que là, j'ai les neurones en compote ! :bug:
Merci pour ton aide et à demain.
19/06/2007, 08h36
rdummies

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 ?
19/06/2007, 08h45
Bisûnûrs

Ca provient bien d'un élément perturbateur dans ton code (HTML ou JS) et non pas de ce code en question. ^^
19/06/2007, 08h50
rdummies

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 .... :cry:
19/06/2007, 08h52
Bisûnûrs

Citation:

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. :roll:
19/06/2007, 08h55
rdummies

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 ?

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:

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 ?

Voici mon code qui ne fonctionne pas :

Code:

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.

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

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

Code:

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

Fais plutôt comme ça :

Code:

<body onload="init_affichage()">

Ca résoudra ton problème.
19/06/2007, 09h59
rdummies

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.
19/06/2007, 10h08
Bisûnûrs

Place alors cette ligne :

Code:

<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.
19/06/2007, 10h13
rdummies

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

Merci beaucoup de ton aide et de ta patience.