Un putin de truc en JS

Aller en bas

Un putin de truc en JS

Message par Sarko le Mar 2 Mar - 12:43

Yop

J'aurais bsoin d'une petite aide la ^^

Donc J'ai une selectBox et j'aimerais que quand qqun selectionne Autre,

y a un petit input text qui s'affiche ^^

Qqun aurait une idée de comment faire ça en JS ?


j'ai deja un petit truc du style mais ca fonctionne pas :

Code:

      function recup(){
         var indexsite = document.getElementById('select')
         if(indexsite .options[select.selectedIndex].value == 'Autre') {
            document.getElementById('text').innerHTML += "<input type='text' value='' name ='autre'/><br />
         }         
      };
avatar
Sarko

Nombre de messages : 2134
Age : 30
Cercle : CEI tapette ²
Année Baptême : 2006
Date d'inscription : 10/07/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par dax le Mar 2 Mar - 13:56

http://www.commentcamarche.net/faq/884-javascript-effacer-un-champ-de-formulaire-lors-du-clic-focus
avatar
dax

Nombre de messages : 2257
Age : 35
Cercle : CEI
Année Baptême : 2005
Date d'inscription : 29/07/2008

Voir le profil de l'utilisateur http://www.noobeek.com

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par kortenberg le Mar 2 Mar - 14:19

j'aurai tendance à avoir l'input déja sur la page.
Code:
<body>
<script type="text/javascript">
function swTstTxt(sender)
{
  var textBox = document.getElementById("TstTxt");
  if(sender.options[sender.selectedIndex].value == "") {
    textBox.style.display="";
  }
  else
  {
    textBox.style.display="none";
  }
}
</script>
<select onChange="swTstTxt(this)" >
  <option value="" >none</option>
  <option value="a" >A</option>
  <option value="b" >b</option>
  <option value="c" >c</option>
</select>
<input type="text" id="TstTxt" />
</body>
</html>
sinon, d'utiliser un conteneur pour ton input (mais j'aime moins)
Code:
<body>
<script type="text/javascript">
function swTstTxt(sender)
{
  var holder = document.getElementById("TstTxtHolder");
  if(sender.options[sender.selectedIndex].value == "") {
    holder.innerHTML="<input type=\"text\" name=\"TstTxt\" />";

  }
  else
  {
    holder.innerHTML="";

  }
}
</script>
<select onChange="swTstTxt(this)" >
  <option value="" >none</option>
  <option value="a" >A</option>
  <option value="b" >b</option>
  <option value="c" >c</option>
</select>
<span id="TstTxtHolder"><input type=\"text\" name=\"TstTxt\" /></span>
</body>
</html>

et ton code est completement pourri:
document.getElementById('text').innerHTML += "<input type='text' value='' name ='autre'/><br />";
entre autre.
avatar
kortenberg

Nombre de messages : 1156
Age : 37
Cercle : CI
Année Baptême : 2001
Date d'inscription : 11/12/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par Sarko le Mar 2 Mar - 16:39

Soucis Soucis
Code:

      function swTstTxt(sender)
      {
         var textBox = document.getElementById("TstTxt");
         if(sender.options[sender.selectedIndex].value == "Autre") {
            textBox.style.display="";
            alert("lol");
         }
         else
         {
            textBox.style.display='none';
            alert("lol2");
         }
        };
Code:

<SELECT name="categorie" onChange="swTstTxt(this)">
            <?php
            for ($i=0; $i < $nbrCateg; $i++) {
               echo '<OPTION VALUE =" ' .$tab[$i]['nomCateg'].'" > '.$tab[$i]['nomCateg']. '</OPTION>';      
            }
               echo '<OPTION value = "Autre" > Autre </OPTION>';
            ?>
</SELECT>
<input type="text" id="TstTxt" />


Il me l'affiche tout le temps maintenant
avatar
Sarko

Nombre de messages : 2134
Age : 30
Cercle : CEI tapette ²
Année Baptême : 2006
Date d'inscription : 10/07/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par Marmotte le Mar 2 Mar - 17:14

Code:
<input type="text" id="TstTxt" style="display: none;"/>
avatar
Marmotte

Nombre de messages : 7231
Age : 34
Cercle : CEI
Année Baptême : 2005
Date d'inscription : 09/07/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par kortenberg le Mar 2 Mar - 17:17

En reprenant ton code, chez moi, ça marche!
Le seul problème c'est l'option par défaut.
Si tu veux que par défaut elle ne s'affiche pas, ajoute simplement style="display:none" à la textbox.

P.S.:
Le code testé (affiché par défaut):
Code:
<body>
<script type="text/javascript">
    function swTstTxt(sender)
      {
        var textBox = document.getElementById("TstTxt");
        if(sender.options[sender.selectedIndex].value == "Autre") {
            textBox.style.display="";
            alert("lol");
        }
        else
        {
            textBox.style.display='none';
            alert("lol2");
        }
        };
</script>
<SELECT name="categorie" onChange="swTstTxt(this)">
<!-- Simulation of php -->
            <OPTION value = "f" > yyy </OPTION>
            <OPTION value = "gg" > yy </OPTION>
            <OPTION value = "hh" > thh </OPTION>
            <OPTION value = "Autre" > Autre </OPTION>
<!-- end Simulation of php -->
</SELECT>
<input type="text" id="TstTxt" />
</body>
</html>
Le code testé (masqué par défaut):
Code:
<body>
<script type="text/javascript">
    function swTstTxt(sender)
      {
        var textBox = document.getElementById("TstTxt");
        if(sender.options[sender.selectedIndex].value == "Autre") {
            textBox.style.display="";
            alert("lol");
        }
        else
        {
            textBox.style.display='none';
            alert("lol2");
        }
        };
</script>
<SELECT name="categorie" onChange="swTstTxt(this)">
<!-- Simulation of php -->
            <OPTION value = "f" > yyy </OPTION>
            <OPTION value = "gg" > yy </OPTION>
            <OPTION value = "hh" > thh </OPTION>
            <OPTION value = "Autre" > Autre </OPTION>
<!-- end Simulation of php -->
</SELECT>
<input type="text" id="TstTxt" style="display:none" />
</body>
</html>

Edit: Grillaid par Marmotte mais j'ai confirmé l'envoi sans réfléchir.
avatar
kortenberg

Nombre de messages : 1156
Age : 37
Cercle : CI
Année Baptême : 2001
Date d'inscription : 11/12/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par Sarko le Mar 2 Mar - 17:45

Super ca work Wink

Merciiiiiiiiiii
avatar
Sarko

Nombre de messages : 2134
Age : 30
Cercle : CEI tapette ²
Année Baptême : 2006
Date d'inscription : 10/07/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par dax le Lun 29 Mar - 11:48

J'ai la même chose à faire avec un checkbox...
au cas ou ca pourrait vous dépanner

Code:
<body>
<script type="text/javascript">
    function display_billing(sender){
        if(sender.checked) {
            document.getElementById("billing_name").style.display="";
        }else{
            document.getElementById("billing_name").style.display='none';
        }
    };
</script>

<input type="checkbox" onChange="display_billing(this)" id="display_devivery" name="display_devivery">
        <label for="change_delivery">Informations de livraison</label>

<input type="text" id="billing_name" style="display:none" />
</body>
</html>
avatar
dax

Nombre de messages : 2257
Age : 35
Cercle : CEI
Année Baptême : 2005
Date d'inscription : 29/07/2008

Voir le profil de l'utilisateur http://www.noobeek.com

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par Marmotte le Lun 29 Mar - 11:58

Utilisez jquery, c'est tellement plus simple
avatar
Marmotte

Nombre de messages : 7231
Age : 34
Cercle : CEI
Année Baptême : 2005
Date d'inscription : 09/07/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par Aktarus le Lun 29 Mar - 12:09

Marmotte a écrit:Utilisez jquery, c'est tellement plus simple

Plus un
avatar
Aktarus

Nombre de messages : 3906
Age : 34
Cercle : CEI What else !!
Année Baptême : 2004
Date d'inscription : 31/08/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par kortenberg le Lun 29 Mar - 12:12

Pour un petit truc comme celui-ci?

60KB pour s'épargner une ou 2 lignes, c'est pas un peu beaucoup?

P.S.: Je suis presque sur que ça n'épargne pas des lignes mais seulement quelques caractères.
avatar
kortenberg

Nombre de messages : 1156
Age : 37
Cercle : CI
Année Baptême : 2001
Date d'inscription : 11/12/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par dax le Lun 29 Mar - 12:45

kortenberg a écrit:Pour un petit truc comme celui-ci?

60KB pour s'épargner une ou 2 lignes, c'est pas un peu beaucoup?

P.S.: Je suis presque sur que ça n'épargne pas des lignes mais seulement quelques caractères.


Plus un


bref, sinon j'ai core mieux pour tout les champ d'un formulaire Very Happy

Code:
<body>
<script type="text/javascript">
    function display_billing(sender){
        if(sender.checked) {
            for(i=0; i<document.billing_form.elements.length; i++){
                    document.billing_form.elements[i].style.display="";
            }
        }else{
            for(i=0; i<document.billing_form.elements.length; i++){
                    document.billing_form.elements[i].style.display='none';
            }
        }
    };
</script>

<input type="checkbox" onChange="display_billing(this)" id="display_devivery" name="display_devivery">
        <label for="change_delivery">Utiliser les données pour l'informations de livraison</label>

<form name="billing_form">
      <input type="text" id="billing_fname" style="display:none" value="fname" />
      <input type="text" id="billing_lname" style="display:none" value="lname" />
</form>
</body>
</html>


(je suis certain que t'as lu le code espece de geek et que tu t'es dit que ca ce serait mieux comme ca )

Code:
<body>
<script type="text/javascript">
    function display_billing(sender){
        var displayme = "" ;
        if( ! sender.checked) {
          displayme = "none" ;
        }
        for(i=0; i<document.billing_form.elements.length; i++){
                document.billing_form.elements[i].style.display= displayme;
        }
    };
</script>

<input type="checkbox" onChange="display_billing(this)" id="display_billing" name="display_billing">
        <label for="change_billing">Utiliser les données pour l'informations de facturation</label>

<form name="billing_form">
      <input type="text" id="billing_fname" style="display:none" value="fname" />
      <input type="text" id="billing_lname" style="display:none" value="lname" />
</form>
</body>
</html>

haha Very Happy on pourait faire un concours !?
avatar
dax

Nombre de messages : 2257
Age : 35
Cercle : CEI
Année Baptême : 2005
Date d'inscription : 29/07/2008

Voir le profil de l'utilisateur http://www.noobeek.com

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par dax le Lun 29 Mar - 13:53

j'ai un soucis, quand dans le formulaire j'ai

Code:

...
<input type="checkbox" style="display:none" id="ch_billing_fname" name="ch_display_billing">
<label id="l_billing_fname" for="ch_billing_fname" >fname</label>
...

pas de soucis, les 2 éléments s'affichent et disparaissent, mais quand j ai

Code:

...
<label id="l_billing_fname" for="billing_fname" >fname</label>
<input type="text" id="billing_fname" style="display:none" value="fname" />
...

là le label ne disparait pas en même temps que l'input ... Mouarf de lol de mouarf me faut une soluction les jeunes
avatar
dax

Nombre de messages : 2257
Age : 35
Cercle : CEI
Année Baptême : 2005
Date d'inscription : 29/07/2008

Voir le profil de l'utilisateur http://www.noobeek.com

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par dax le Lun 29 Mar - 14:14

bon, j'ai un workaround ...

Code:
<input type="text" readonly="readonly" id="label_billing_fname" style="display:none" value="Name :"/>
<input type="text" id="billing_fname" style="display:none" value="fname"/>

mais c'est pas top hein ...
avatar
dax

Nombre de messages : 2257
Age : 35
Cercle : CEI
Année Baptême : 2005
Date d'inscription : 29/07/2008

Voir le profil de l'utilisateur http://www.noobeek.com

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par kortenberg le Lun 29 Mar - 16:48

Sinon, tu mets le display:none sur le form
ou tu mets un div autour des trucs que tu veux masquer.
avatar
kortenberg

Nombre de messages : 1156
Age : 37
Cercle : CI
Année Baptême : 2001
Date d'inscription : 11/12/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Un putin de truc en JS

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum