Attaching text input string to end of URL on button click

Hi guys, I'm just getting in to this server-side kind of coding so excuse me if this is a rather simple question, but the scenario is this:

I am building an intranet website from a template with a built in search box up top.
CODE:

<div id="search_box">
<form action="#" method="get"> <input value="Search..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" type="text" /><input name="Search" value="" alt="Search" id="searchbutton" title="Search" type="submit" /></form>
</div>

I used a free search engine/indexer to give me a local way to search other html, txt, and doc files. I've found out that the easiest and cleanest way for this to work is to take the URL of the search.asp

http://intranet.mysite.com/search.asp?zoom_per_page=10&zoom_and=0&zoom_sort=0&zoom_query=

and append whatever the person wants to search to the end of it. eg
http://intranet.kurtz-bros.com/search.asp?zoom_per_page=10&zoom_and=0&zoom_sort=0&zoom_query=noodles will search for noodles, lol.

Using the existing search box (because it is graphically built in), how can i make it so that whatever a user types into the box, will append to the URL above, and when they click the button it will take them to that page?

I greatly appreciate any help, because I am kind of a noobie and have been getting quite frustrated trying to get this to work. Thanks in advance.


PS, here is some extra code if it helps:

Style sheet

#templatemo_site_title_bar #search_box {
float: right;
width: 280px;
height: 30px;
margin: 0 10px 0 0;
padding: 10px 0 0 0;
}

#search_box form {
float: left;
width: 280px;
height: 30px;
margin: 0;
padding: 0;
}

#searchfield {
height: 20px;
width: 195px;
padding: 6px 5px 4px 5px;
margin: 0px;
color: #ffffff;
font-size: 12px;
font-variant: normal;
line-height: normal;
background: none;
border: none;
}

#searchbutton {
height: 30px;
width: 70px;
margin: 0px;
padding: 6px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
color: #ffffff;
background: none;
border: none;
}


Snippet of the page source of a search results page:
<form method="get" action="/search.asp" class="zoom_searchform"><input type="hidden" name="zoom_per_page" value="10" />
<input type="hidden" name="zoom_and" value="0" />
<input type="hidden" name="zoom_sort" value="0" />
Search for: <input type="text" name="zoom_query" size="20" value="oooo" id="zoom_searchbox" class="zoom_searchbox" />
<input type="submit" value="Submit" class="zoom_button" />
</form><div class="searchheading">Search results for: oooo<br /><br /></div>
<div class="summary">No results found.<br /></div>
<!--Zoom Search Engine Version 6.0 (1024)-->
<div class="results">


Thanks again

 

in your css change #searchfield to #zoom_query and use the following code

<div id="search_box">
<form action="http://intranet.mysite.com/search.asp?zoom_per_page=10&zoom_and=0&zoom_sort=0" method="get"> <input value="Search..."  size="10" id="zoom_query" name="zoom_query" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" type="text" /><input name="Search" value="" alt="Search" id="searchbutton" title="Search" type="submit" /></form>
</div>

Code (markup):

 

Thank you so much. this worked perfectly! You just saved me a bunch of headaches