Daniel Daniel - 3 years ago 148
HTML Question

Pressing enter to search not working?

I'm trying to build a wikipedia viewer using Wikipedia's API, but I have a minor problem. If I manually press the search button, everything works fine, but if I press enter, nothing happens. Here's the js code:

$(document).ready(function () {
$("#input").keyup(function (event) {
if (event.keyCode == 13) {
$("#submit-button").click();
}
});
});

function wikiSearch() {

var query = document.getElementById("input").value;
var wiki_api = 'https://en.wikipedia.org/w/api.php';

var api = "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exlimit=max&format=json&exsentences=1&exintro=&explaintext=&generator=search&gsrlimit=10&gsrsearch=";
var wikilink = 'http://en.wikipedia.org/?curid=';

var link = api + query;
var html = "";

$.ajax({
url: link,
type: "get",
dataType: "JSONP",
success: function (data) {
var results = data.query.pages;
var pgs = Object.keys(results);
pgs.forEach(function (page) {
var title = results[page].title;
var text = results[page].extract;
var pagelink = wikilink + results[page].pageid;

html += '<a href="' + pagelink + '" target="_blank">' + '<div class="item">' + title + '<br>' + '<p class="description-text" >' + text + '</p>' + '</div></a> <br> ';
});

$('#display').html(html);

}
});
}


And here's the html code:

<div class="container" id="content">
<h1>Wikipedia Viewer</h1>

<form>
<input type="text" name="search" placeholder="Search Wikipedia" id="input">
</form>

<a href="https://en.wikipedia.org/wiki/Special:Random" class="btn btn-info" target="_blank" id="random">Random page</a>

<input id="submit-button" type="button" value="Search" onclick="wikiSearch()" class="btn btn-success">

<div id="display"></div>

</div>


Here's a jsfiddle: https://jsfiddle.net/tbgoy836/

brk brk
Answer Source

Replace input type="button" to submit. Also the input type="submit" should be inside the form. In that case you don't need to check the keycode & preventDefault will prevent the default behaviour of the form submit, since form is getting submitted using ajax. On pressing enter/return it will find the first submit button by itself and will trigger a click action

$(document).ready(function() {
  $("#searchForm").submit(function(e) {
    e.preventDefault();
    wikiSearch()
  })
});

function wikiSearch() {
  console.log('wikiSearch')
  var query = document.getElementById("input").value;
  var wiki_api = 'https://en.wikipedia.org/w/api.php';

  var api = "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exlimit=max&format=json&exsentences=1&exintro=&explaintext=&generator=search&gsrlimit=10&gsrsearch=";
  var wikilink = 'http://en.wikipedia.org/?curid=';

  var link = api + query;
  var html = "";

  $.ajax({
    url: link,
    type: "get",
    dataType: "JSONP",
    success: function(data) {
      var results = data.query.pages;
      var pgs = Object.keys(results);
      pgs.forEach(function(page) {
        var title = results[page].title;
        var text = results[page].extract;
        var pagelink = wikilink + results[page].pageid;

        html += '<a href="' + pagelink + '" target="_blank">' + '<div class="item">' + title + '<br>' + '<p class="description-text" >' + text + '</p>' + '</div></a>  <br> ';
      });

      $('#display').append(html);

    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="content">
  <h1>Wikipedia Viewer</h1>

  <form id="searchForm">
    <input type="text" name="search" placeholder="Search Wikipedia" id="input">
    <div>
      <a href="https://en.wikipedia.org/wiki/Special:Random" class="btn btn-info" target="_blank" id="random">Random page</a>

      <input id="submit-button" type="submit" value="Search" onclick="wikiSearch()" class="btn btn-success">
    </div>
  </form>

  <div id="display"></div>

</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download