Chidi Okeh Chidi Okeh - 23 days ago 8
jQuery Question

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

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

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