Votre question

[JS]Bouton pour remplacer un select par un input

Tags :
  • Select
  • Programmation
Dernière réponse : dans Programmation
10 Mai 2007 12:03:43

Bonjour à tous,
J'ai un formulaire avec une liste déroulante, et jevoudrais que, au clic sur une image, cette liste déroulante soit remplacée par un champ texte.
Je suis pas un pro du javascript, voila ce que j'ai réussi à faire:

Voila en gros le code html:
  1. <select id="id1_select" name="id1" >
  2. <option value="pif">pif</option>
  3. <option value="paf>paf</option>
  4. <option value="pouf">pouf</option>
  5. </select>
  6. <input type="text" id="id1_input" name="" class="hidden" />
  7. <img onclick="switch_select_input('id1');" />

Sachant que dans mon CSS, la classe hidden a l'attribut visibility:hidden

Et la fonction JS associée:
  1. function switch_select_input(id)
  2. {
  3. if (tabl_id_switch[id])
  4. {
  5. document.getElementById(id+'_select').style.visibility="hidden";
  6. document.getElementById(id+'_select').name="";
  7. document.getElementById(id+'_input').style.visibility="visible";
  8. document.getElementById(id+'_input').name=id;
  9. tabl_id_switch[id]=false;
  10. }
  11. else
  12. {
  13. document.getElementById(id+'_input').style.visibility="hidden";
  14. document.getElementById(id+'_input').name="";
  15. document.getElementById(id+'_select').style.visibility="visible";
  16. document.getElementById(id+'_select').name=id;
  17. tabl_id_switch[id]=true;
  18. }
  19. }

Sachant que la variable tabl_id_switch est un tableau associatif de booléens, tel que tabl_id_switch[id] est vrai si l'élément id_select(la liste déroulante) est visible.

Bon, ce bricolage fonctionne à peu près, mais le probleme,c'est que quand je clique sur mon image pour basculer entre select et input, le select disparait bien, mais le input se retrouve non pas à sa place, mais en dessous.
Ma question est donc: comment faire pour que les 2 soient à la même place?

Merci de votre aide :) 

Autres pages sur : bouton remplacer select input

11 Mai 2007 13:06:57

up!
12 Mai 2007 16:18:42

up?
Contenus similaires
16 Mai 2007 14:48:23

personne?
17 Mai 2007 13:03:33

Remplace style.visibility="hidden"; par style.display="none";
Et style.visibility="visible"; par style.display="block";

Ca devrait marcher !!
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS