Page navigates to localhost:3000/? on enter press in the input box

Question

I'm using NewYorkTimes API that gets the search query from the input field, however, when I press enter after typing the input, my localhost reloads and navigate to localhost:3000/?

I console.log(url) in the console and the url is correct as the JSON request returns results, but the results aren't displayed in HTML since the page navigates automatically. Not sure what may be causing this to happen.

form
   span.material-icons search
   input.form-control(id="input", placeholder="Search for articles, headlines, etc.")

// SHOWS SEARCH RESULTS WHEN THE USER PRESSES ENTER
$("#input").keypress(function(event) {
    if (event.keyCode == 13) {
        searchArticles(this.value);
        $("#input").val("");     
    }
});

// MAKES THE REQUEST AND DISPLAYS THE NEWS BASED ON RESULTS
function searchArticles(term) {
    term = term.replace(" ", "+");
    searchURL = "http://api.nytimes.com/svc/search/v2/articlesearch.json?q=" + term + "&api-key=" + searchAPI;
    console.log(searchURL);
    $.getJSON(searchURL, function(api) {
        api.response.docs.forEach(function(data) {
            link = data.url;
            cardTitle = data.headline;
            postedBy = data.byline.original;
            createCardElements();
        });
    });
}

This is the sample JSON request:

http://api.nytimes.com/svc/search/v2/articlesearch.json?q=new+york+times&page=2&sort=oldest&api-key=sample-key

Well for one thing there is an obvious type-o in your example if you look at the syntax highlighting. `$("#input").val("");` — user2867288, Jan 20 '16 at 22:52
I typed it wrong in the post, but it was correct in Sublime. Thanks for pointing it out. — narulakeshav, Jan 20 '16 at 23:07

Jonathan Davis · Accepted Answer · 2017-11-11T21:07:37.027

3

This is most likely because you are not calling event.preventDefault() in the callback for the keypress event and therefore the form is getting submitted.

The default action taken when pressing enter on an input field is often to submit the form containing that field (though it seems like this may be browser dependent). Calling event.preventDefault() stops whatever the default action is from occurring, allowing your code to run without interference.

Returning false from the callback function has a similar, but not identical, effect.

edited Nov 11 '17 at 21:07

answered Jan 20 '16 at 22:52

Jonathan Davis

138
5

That's it. Thank you. So `preventDefault()` prevents the page from loading? – narulakeshav Jan 20 '16 at 23:06
1

Essentially, yes. I've updated my answer with a little more detail. :) – Jonathan Davis Jan 20 '16 at 23:13
That makes a whole lot more sense. Thank you :D – narulakeshav Jan 20 '16 at 23:17

Page navigates to localhost:3000/? on enter press in the input box

1 Answers1