I'm trying to let my Jquery retrieve a form value, for example whatever has been filled in at the textbox named key1. The Jquery coding I have so far only returns "undefined", which is frustrating cause I've been trying to get this fixed for hours. Btw. how come my fadein function doesn't work (when uncommented), this is part of jquery ain't it?

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <script>
   $().ready(function(){
       $(".button").click(function() {
           var button = this;
     
     var key = $("contact#key").val();
     alert (key);
     var dataString = 'key='+ key;
           $.ajax({
               url:  'msgsrv.php',
               type: 'POST',
               dataType: 'html',
               data: dataString,
               success: function(result) {
      
       //.fadeIn(1500, function() {
        $("div.test").html(result);
      // }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
2.             }
           });
       });
   });
   
   
   
3. </script>
   <div class="test"></div>
   <form name="contact">
   <span class="vId">
       <input type="hidden" name="id" id="7" />
       <input type="hidden" name="ClientID" id="026CC6D7-34B2-33D5-B551-CA31EB6CE345" />
       <input class="textbox" type="text"   name="key1" />
       <input class="button"  type="button" name="Activate" value="Activate1" />
   </span>
   <span class="gc_Name">Bartlett-White</span>            
   <span class="vId">
       <input type="hidden" name="id" id="2" />
       <input type="hidden" name="ClientID" id="000214EE-0000-0000-C000-000000000046" />
       <input class="textbox" type="text" name="key2" />
       <input class="button" type="button" name="Activate" value="Activate2" />
   </span>
   <span class="gc_Name">Landingham Bends</span></form>