Can't route my input parameters to my controller action method - asp.net-mvc

Question

I'm having trouble passing my textbox data to a controllers action parameters.
I'm trying to get the url to look like:
http://localhost:51124/gifts?searchTerm=test
but when I enter in text into the text box I get a url that looks like:
http://localhost:51124/gifts
Here is the code I have for the route:
routes.MapRoute("Gifts",
"gifts",
new { controller = "Gifts", action = "Search" });
here is the code for the page with the text box and button to submit the text box data:
<form method="GET">
<input type="search" name="searchTerm"/>
<input type="button" value="Search By Category" onclick="location.href='#Url.Action("Search", "Gifts")'" />
</form>
here is the code for the controller that I'm trying to pass data to unsuccessfully:
public ActionResult Search(string searchTerm = null)
{
var model = db.Gifts.ToList();
return View(model);
}
"searchTerm" never gets any parameter that I pass into the text box. It's always null.

Answer 1

Create a form element in you view with an input (i.e. the search box) that has a name attribute matching the parameter and a submit button.
#using (Html.BeginForm("Search", "Gifts") {
<input type='text' name='searchTerm' value='' />
<input type='submit' value='search' />
}
This will post back to the Search method in the Gifts controller, passing the vale of the search box to the parameter 'searchTerm'

Answer 2

you have to build this with jquery. add a class to the inputs to use as a selector
<input type="search" name="searchTerm" class="txtSearch" />
<input type="button" value="Search By Category" class="btnSearch" />
then in your script
$('.btnSearch').on('click', function(){
var url = '#Url.Action("Search", "Gifts", new { searchTerm = "----" })'.replace("----", $('.txtSearch').val());
window.location(url);
});