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

Question

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

Answer 1

use just following simple jQuery

if(event.keyCode == 13){ 
   event.preventDefault();
}

...bind it to you form

Answer 2

Whatever function you are calling to display your search results needs to either

• return false;

or

• call event.preventDefault();

This will avoid the default form action from being executed (causing a full page refresh).

Answer 3

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;
}