Question

I have the following code

   <div class="framepage">
           <header>
            <script type="text/javascript">                          

            function getBaseUrl() {
                return "@Url.Content("~/paging")";
            }

            function LocationSearch(baseUrl) {
                 window.location = getBaseUrl() + "/LocationSearch?searchstring=" + (document.getElementById('vestigingen').value);
            }


            </script>
           </div>
    </div>
</div>

        </header>
        <section id="maintest">   
          <ul id="menu">
          <li>
            <form class="navbar-search">
            <div class="icon-search icon-white"></div>
            <input type="text" class="search-query span3" id="vestigingen">
             </form>
             <input type="button" class="buttonzz" value="zoeken" onclick="LocationSearch()"/>
             </li>
                <li><a href="javascript:void(0);" onclick="LocationSearch();">Lijst</a></li>
                <li><a href="javascript:void(0);" onclick="LocationSearchList();">Lijst</a></li>
                               </ul>
            <div class="fence">
        @RenderBody()
            </div>

My problem concerns the return key. Whenever I press the return key my inserted value in the input( type=text) tag is lost.
For instance I type New York and want to get result in NY , my field is empty.
If I type it in and use my submit button everything is fine. Can anyone help me here?

Answer 1

You don’t need any javascript for this. Simply use HTML helpers to generate your search form:

@using (Html.BeginForm("LocationSearch", "SomeController", FormMethod.Get, new { @class = "navbar-search" }))
{
    <div class="icon-search icon-white"></div>
    @Html.TextBox("searchstring")
    <input type="submit" value="Search" />
}