formulaire sélectionner un objet changer dynamiquement le nom de classe avec php et javascript?

Question

J'ai quelques problèmes ici avec ça.

La configuration:

Un objet select avec un choix de "Autre"

utilisateur sélectionne "Autre". Le script s'exécute lorsque cette valeur spécifique est sélectionnée et modifie dynamiquement l'objet class de input de "hide" à "show" (masqué et visible avec le css display).

<p>Select a Grade:</p> 
    <select name="grade" id="grade" onchange="changeCssClass('otherGrade')"> 
    <option value="No Specified Grade">Please Select</option> 
    <option value="201">201</option> 
     ... 
    <option value="Secondary">Secondary</option> 
    <option value="otherGrade">Other</option> 
    </select> 

<p>If "Other":</p> 
<?php 
    $otherGrade = $_POST['grade']; 

    if($otherGrade = "otherGrade") 
    { 
    echo("<script language='javascript' type='text/javascript'> 

     function changeCssClass(objInputID) 
     {    

        if(document.getElementById(objInputID).className=='hide') 
      { 
         document.getElementById(objInputID).className = 'show'; 
      } 
      else 
      { 
       document.getElementById(objInputID).className = 'hide'; 
      } 
     } 

     </script>"); 
    } 
    else 
    { 
     echo (""); 
    } 
?> 

<input type="text" name="otherGrade" id="otherGrade" class="hide" /> 

Dois-je supprimer l'événement onchange de l'objet select? Si oui, je ne sais pas comment faire exécuter le script.

Toutes les solutions seraient grandement appréciées.

Answer 1

Le script doit toujours être inclus dans votre page, puisque vous voulez que cela fonctionne pendant que vous effectuez les modifications dans la liste déroulante ..

<script language='javascript' type='text/javascript'> 
    function changeCssClass(objInputID, currentVal, correctVal) 
    {   
     if(correctVal == currentVal) 
     { 
        document.getElementById(objInputID).className = 'show'; 
     } 
     else 
     { 
      document.getElementById(objInputID).className = 'hide'; 
     } 
    } 
</script> 

<p>Select a Grade:</p> 
<select name="grade" id="grade" onchange="changeCssClass('otherGrade', this.value, 'otherGrade')"> 
<option value="No Specified Grade">Please Select</option> 
<option value="201">201</option> 
    ... 
<option value="Secondary">Secondary</option> 
<option value="otherGrade">Other</option> 
</select> 

<p>If "Other":</p> 

<input type="text" name="otherGrade" id="otherGrade" class="hide" /> 

Exemple en direct à: http://www.jsfiddle.net/MVymF/

Answer 2

pourquoi mettez-vous cela dans l'événement après? vous pouvez simplement rendre ceci comme javascript standard dans le cadre de la page.

Answer 3

Lors de la publication, la page sera rafraîchissante, l'annonce lors du rechargement ne sauvegardera pas la valeur sélectionnée de la boîte de sélection.

La zone de sélection n'est pas conservée après la publication. Vous devez le faire.

> Autres

Comme la valeur de l'option de changer la peau d'affichage a également disparu. Correction

Si vous n'avez pas besoin de soumettre la page. utiliser ce

http://api.jquery.com/val/

contrôle démo de sélection