Reply to comment

Je me suis retrouvé dans une situation aujourd'hui qui m'a donné envie d'écrire cet article, car je n'ai pas trouvé de documentation vraiment précise sur le sujet, ni sur les specs W3c , ni sur internet .
Le problème : imaginons , comme sur cet image, qu'on a un formulaire qui permette une recherche multi-critère .Un type de recherche excluant l'autre (recherche simple contre recherche multicritère) .
On pourrait facilement faire deux formulaires, mais dans ce cas on va être obligé de rajouter deux fois les champs dates, on ne pourra pas les partager .
On pourrait aussi avoir deux boutons submit, qui selon leur valeur réceptionnée filtrerait les éléments qu'on veux ...
Une autre solution consisterait à rajouter des radiobutton et dire que c'est soit l'un ou soit l'autre partie du formulaire qui va être utilisé...

Ma solution , que je trouve plus élégante , est de désactiver les champs : on veux par exemple que lorsque on choisi le champ "search terms", on désactive les autres champs input (Theme, Descr, etc...) , et inversement que lorsqu'un des champs Theme , descr, est choisi , le champs "search terms" soit désactivé ....
Concernant l'apparence activé/désactivé , il suffit de changer le className de l'objet javascript sur lequel on pointe pas de problème..Oui, mais comment empècher le passage des parametres désactivés au formulaire lors de la soumission ?
J'ai d'abord essayé de jouer avec la propriété "disabled" des éléments input . Le problème que je rencontrais etait que puisque ma séléction/déselection de champs se faisait sur le comportement onclick des champs, celui çi disparaissait dès qu'un champ était "disabled"....
D'ou problème.... Ma solution consiste à changer l'attribut "name" des champs, en leur rajoutant ou enlevant la chaîne 'disabled' ..Ainsi de l'autre côté, le script récupérant ces valeurs ne traitera que les champs qu'il reconnait...
Si cela n'est pas très clair pour vous , voici cela en action :
D'abord le code css , soit la disabled qui permet de changer l'apparence et permettre à l'utilisateur de voir immédiatement ce qui est activé ou désactivé :

input.w20em
        {
        width:20em;
        }
input.w10em
        {
        width:10em;
        }
input.disabled,
input.text,
        {
        font-size:100%;
        border-top:1px solid #7c7c7c;
        border-left:1px solid #c3c3c3;
        border-right:1px solid #c3c3c3;
        border-bottom:1px solid #ddd;
        background-color:#fff ;
        color:#333;
        text-decoration:none;
        }
input.disabled
        {
        background-color:#eee;
        color:#777;
       
        }

A présent le html ..

  

    Search Terms (minimum 4 characters):
    


     
    
between the  and the 

    

         
theme search

         
descr search

         
dope search

         
text1 search
  
        
text2 search

        
text3 search


      
   
 

.. el le javascript . L'objet est instancié gràce à Jquery et la méthod $(document).ready(monObj.init);

var myObj = {
   
        init: function() {      
               
                //  behaviour : toggle activation on input text 
                var searchi = document.getElementById("search-form"); 
                if(searchi != null){
                        var fulltextsearch = document.getElementById("searchval") ;
                        fulltextsearch.onclick = myObj.flushTexts ;
                                
                        var tablesearch = document.getElementById("precisesearch") ;
                        tablesearch.onclick = myObj.flushTexts ;
                        
                }

               
        },
        flushTexts:  function(e){
                var tablesearch = document.getElementById("precisesearch") ;
                var inputs = tablesearch.getElementsByTagName("input") ;
                var fulltextsearch = document.getElementById("searchval") ;

                if(e.currentTarget.id == 'searchval'){ 
                        e.currentTarget.className = e.currentTarget.className.replace(/disabled/, "")
                        fulltextsearch.name = fulltextsearch.name.replace(/disabled/, "") ;
                        e.currentTarget.focus = true ;
                        
                        if(inputs != null){
                                for(var ii = 0; inputit = inputs[ii]; ii++) {                                
                                        inputit.className = inputit.className.replace(/disabled/, "")+ ' disabled' ;
                                        inputit.name = inputit.name.replace(/disabled/, "")+ 'disabled' ;
                                }
                         }
                       
                }else{

                        fulltextsearch.className = fulltextsearch.className.replace(/disabled/, "")+ ' disabled' ;
                        fulltextsearch.name = fulltextsearch.name.replace(/disabled/, "")+ 'disabled' ;
                        var targ;
                	if (!e) var e = window.event;
                	if (e.target) targ = e.target;
                	else if (e.srcElement) targ = e.srcElement;
                	if (targ.nodeType == 3) // defeat Safari bug
                		targ = targ.parentNode;
                        targ.className = targ.className.replace(/disabled/, "") ;
                        targ.name = targ.name.replace(/disabled/, "") ;

                }
               
                
        }

};
$(document).ready(myObj.init);

Vous remarquerez que j'ai seulement deux comportement onclick, pour éviter de mobiliser trop de ressources . Un onclick event sur le champs text 'search terms' (id searchval) , et l'autre sur le tableau contenant les champs multicritères . Lors de l'evenement onclick de celui çi je cherche le denrier élément (targ) dans la liste . Cette méthode viens du blog http://quirksmode.org (http://www.quirksmode.org/js/events_properties.html ) qui permet de targetter les sous élément d'un click.