I hit the ENTER key on keyboard and page refreshes. How do I prevent this and still use the keyboard to search?

html, javascript, jquery

Solution

Remove the onkeypress and use onsubmit instead since it is automatically called when the enter key is pressed on an input field of a form.

<form onsubmit="return getData()">
   <input name="searchBox" id="searchBox" value="" />
   <button type="submit"><img src="images/magnifying_glass.png" alt="Search" /></button>
</form>

js

function getData() {
    dijit.byId("advanceSearchDialog").hide(); 
    var form = document.getElementById("searchForm");
    var form2 = document.getElementById("featuresForm")
    var searchText = form.searchBox.value.replace(/-/g,"");
    form.searchBox.value = searchText;

    if (searchText != "") 
    {
        // collect features to search for:
        var features = [ ];
        var featTypes = form2.featType;
        for ( var f = 0; f < featTypes.length; ++f )
        {
            if ( featTypes[f].checked ) features.push( featTypes[f].value );
        }
        featureList = "'" + features.join("','") + "'";

        searchMsg("Searching for '" + searchText + "' ...");
        featureID = "";
        var accord = dijit.byId("accordianContainer");
        var resultsPane = dijit.byId("resultsPane");
        accord.selectChild(resultsPane,true);
        doGlobalSearch( searchText, featureList );
    }
    else
    {
      searchMsg("No search criteria entered, enter search text");
    }
    return false;
}

Problem

We used to be able to enter a search field, address on search box, hit the ENTER key on the keyboard and get the search results. I made several changes but can't pinpoint the change that resulted in the ENTER key misbehaving. Instead of submitting, it refreshes the page. I have tried each of the following to stop the page refresh: ``` <form onSubmit="return false;"> <form onkeypress="return event.keyCode != 13"> ``` Each works. However, I can no longer hit the ENTER key and have results displayed. What do I need to do to fix this? Below is the js: ``` function getData() { dijit.byId("advanceSearchDialog").hide(); var form = document.getElementById("searchForm"); var form2 = document.getElementById("featuresForm") var searchText = form.searchBox.value.replace(/-/g,""); form.searchBox.value = searchText; if (searchText != "") { // collect features to search for: var features = [ ]; var featTypes = form2.featType; for ( var f = 0; f < featTypes.length; ++f ) { if ( featTypes[f].checked ) features.push( featTypes[f].value ); } featureList = "'" + features.join("','") + "'"; searchMsg("Searching for '" + searchText + "' ..."); featureID = ""; var accord = dijit.byId("accordianContainer"); var resultsPane = dijit.byId("resultsPane"); accord.selectChild(resultsPane,true); doGlobalSearch( searchText, featureList ); } else { searchMsg("No search criteria entered, enter search text"); } } function searchKey(e){ // special case for IE to capture <enter> in the search box var key = window.event ? e.keyCode : e.which; var keychar = String.fromCharCode(key); if (key == 13) getData(); } <form id="searchForm" class="search_field" method="get" action=""> <input name="searchBox" id="searchBox" value="" /> <button type="button" onclick="getData()"><img src="images/magnifying_glass.png" alt="Search" /></button> </form> ``` Thanks

Original source