Two forms in one or How to disable input text elements from forms without loosing their onclick behaviour ?

I found myself in a situation today that leaded me to write this article, as i couldn't find anywhere on the internet someone who 've been through this kind of problem .
Imagine that you want two forms submitted through the same submit button , so that you can share , for instance, some fields like dates or else ..How can one exclude part of the form through a simple click on one of the text ? Let's be more precise : my example is a multicriteria search form as opposed to a single criteria form. Those two can coexist and share date fields. The end user could switch from one type of research to the otheron by simply selecting one of the text field.
The easy solution would be to have two forms (but that would mean to double the date fields)...Or you could have to submit buttons (and sort by the value passed by which one the user clicked)..hum not really user friendly either..

Or you could just slect the whole 'sub forms' with radio buttons subsets ..(i don't like radio button and that means another click to go).

My solution is to "desactive" the fields apparently by firsrt changing their className ...ok, easy .. but how to prevent from submitting the fields values ?
I tried first the property 'diabled' , but that could not work as this one , once set, fires all the onclick events from the input as well ... Finally , i opted for some kind of hack : i just change the value of the attribute "name" of my inputs so that the script that is going to treat the form will recognize those names or it won't.
Here's how it looks like :

If that is not too clear here's how it goes :
First, the CSS code , the appearance for the inputs that'll inform the end user of which type of form he 's decided to use.

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;
       
        }

Now the html ..

  

    Search Terms (minimum 4 characters):
    


     
    
between the  and the 

    

         
theme search

         
descr search

         
dope search

         
text1 search
  
        
text2 search

        
text3 search


      
   
 

..and the javascript .I instanciate my object by using Jquery' document ready method..
$(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.changeSelectedForm ;
                                
                        var tablesearch = document.getElementById("precisesearch") ;
                        tablesearch.onclick = myObj.changeSelectedForm ;
                        
                }

               
        },
        changeSelectedForm:  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);

You'll notice that i fire onclick events on two objects only , one on the "search termes" input (id searchval), and the other one on the table that handles the multi criteria search ...For this last one, i've to find out when clicked if the real target is an input box or if i'm just clicking elswhere on the table . I found this targetting method on the famous quirksmode.org http://www.quirksmode.org/js/events_properties.html ..
Hope that helps someone