Hey guys,
Tring to create an ajax search box using prototype. Used prototype before, and can get my javascript file to work with other text boxes on other pages
Just not the textbox I want. Heres the javascript code I'm using (in the file _ajax/search.js):

Code:
Event.observe('q', 'keyup', search_term_change, false);

function search_term_change(){
	alert("Key Up in search box!");
}
All I get is an error saying element has no properties in the error console in firefox. I think it's something to do with the DOM or something?
I'm not very good with the DOM...still getting to grips.

I've included the page (minus most of its content) that contains the text input box (q) below. I've left the whole structure intact, just taken out some of the content.

If anybody could explain why it isnt working and/or give me the correct code to use that'd be awesome!

Probably something dead simple..but I cant work it out.
Tried lots of variations like:

Event.observe('q.value', 'keyup', search_term_change, false);
Event.observe(document.getElementById('q'), 'keyup', search_term_change, false);
Event.observe(document.getElementById('q').value, 'keyup', search_term_change, false);

But always get element has no properties error

Thanks guys

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="_ajax/search.js"></script>
<link href="_css/styles.css" rel="stylesheet" type="text/css" media="all" />

<body>
<div class="body-wrap">

  <div id="header">
    	<div id="account">
        	
        </div>
  </div>
    
    <div class="clear"></div>
    
  <div id="nav">
    	
    </div>
    <div class="clear"></div>
    
    <div id="content">
    	<div id="cLeft">
        
        	<div id="search">
            	  <center><h3>Search For Gigs By Artist:</h3>
                <input type="text" id="q" value="Enter search term" onfocus="this.value='';"/>
                <div class="clear"></div>
                <input type="button" class="clear" value="Clear" onClick="document.getElementById('q').value=''"/>
		  <input type="button" class="search" value="Search >>" />
		  <img src="_images/site_gfx/search-bottom.jpg" width="512" height="13" alt="bottom" class="bottom" />
            </div>
        	
	     <div id="results">
            	  
                <div class="clear"></div>
                <div class="box">
                	<div class="oleft">
                    	
                    </div>
                    
                    <div class="oright">
                    	
                    </div>
                </div>
                
                <div class="clear"></div>
                
                <div class="box">
                	<div class="oleft">
                    	
                    </div>
                    
                    <div class="oright">
                    	
                    </div>
                </div>
                
                <div class="clear"></div>
                
                            
            <div id="footer">
            	
                <div class="clear"></div>
                
            </div>
        </div>
        
        <div id="cRight">
        	
            <div id="matchingartists">
            	
            </div>
            
            <div id="bandpromote">
            	
            </div>
            
            <div id="searcharea">
            	
            </div>
                    
            <div id="advertisement">
            	
            </div>
            
        </div>
        
        <div class="clear"></div>
    </div>    

</div>

</body>
</html>