0

I have a form in my ASP .NET project that takes the users input, and appends it to a URL to search a wiki. The form works perfectly when you enter in a search term, and click the 'search' button, however when you type into the input box and hit enter, the page refreshes and the box clears.

my html

        <form>
            <label id="sideBarLabel"> Services
                <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
            </label>
            <a href="#" id="searchWikiButton" class="button" onclick="searchWiki();">Search  Wiki</a>
        </form>

my js 

function searchWiki(){
    var siteQuery = $('#query-string').val();
    window.location.href = "/dosearchsite.action?queryString=" + siteQuery;

}

Can anyone help ?

amdixon
  • 3,814
  • 8
  • 25
  • 34
onTheInternet
  • 6,421
  • 10
  • 41
  • 74
  • possible duplicate of [How to prevent ENTER keypress to submit a web form?](http://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form) – emerson.marini Apr 30 '15 at 12:50
  • possible duplicate of [jquery disable form submit on enter](http://stackoverflow.com/questions/11235622/jquery-disable-form-submit-on-enter) – emerson.marini Apr 30 '15 at 12:51
  • possible duplicate of [jQuery, prevent form submit from enter but allow form submit by button click](http://stackoverflow.com/questions/21329562/jquery-prevent-form-submit-from-enter-but-allow-form-submit-by-button-click) – emerson.marini Apr 30 '15 at 12:51
  • possible duplicate of [Prevent Users from submitting form by hitting enter](http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter) – emerson.marini Apr 30 '15 at 12:52
  • Nope. My issue is different. Read below – onTheInternet Apr 30 '15 at 13:17

2 Answers2

1

Your searchWiki() js method is only called when the evenement onclick is raised on your button, but not when your form is submitted. There is several ways to achieve what you want:

Add a js method to catch the onsubmit event of your form:

$("form").on("submit", searchWiki());

Or add a tag on your form:

<form onsubmit="searchWiki()">

Or specify the action attribute on your form:

<form action="/dosearchsite.action">

Note that in ASP.NET, the ModelBinder will link your form inputs to your controller action parameters, using the name attribute of the inputs. That means that you should not specify them in the url yourself. You should also declare your form using Html.BeginForm or Ajax.BeginForm if you want your form to be submitted by ajax.

@Html.BeginForm("ActionName", "ControllerName")
{
    <label id="sideBarLabel">Services
        <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
    </label>
    <input type="submit" class="button" value="Search Wiki"/>
}

This will call searchWiki when you press enter.

Waterfrag
  • 517
  • 4
  • 20
  • your search got me started in the right place. The issue was I had a form tag in my Master page that was causing my form to not work because it was nested inside another form element. http://stackoverflow.com/questions/15480287/a-page-can-have-only-one-server-side-form-tag/15480367#15480367 – onTheInternet Apr 30 '15 at 13:22
  • Ok, I don't know if it's good practice or not, but most of the time, I give an id to my forms, just in case there could be more than one form in the page. Glad that helped you anyway. – Waterfrag Apr 30 '15 at 13:24
0
$('#query-string').keypress(function(event) {
if (event.keyCode == 13) {
searchWiki();
event.preventDefault();}});
Kumaresan
  • 41
  • 3