Q:

Prevent page reload on submit

I an trying to use the wikipedia api.
I am getting the right results, I can see it in the console.
The results are appending nice to the right div BUT they disapear when the function finish the work. I see the values in the place only when I debug.
this is the click on submit function:
function getWikiVal(){
  if ($("#search").val() != ""){
var searchTerm = $("#search").val();
var queryUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+ searchTerm +"&format=json&callback=?";

$.ajax({
  url: queryUrl,
  dataType: 'json',
  type: 'GET',
  success: function(data, status, jqXHR) {
    console.log(data);

    for(var i = 0; i < data[1].length || i < 9; i++) {
      console.log(data[1][i]);
      console.log(data[2][i]);
      $("#results").append('<h3>' + data[1][i] + '</h3><p>' + data[2][i] + '</p>');
    }
  }
});

//console.log("the val is " + $("#search").val());
  }
}

The code is in here too:
https://codepen.io/kerendesigns/pen/gLYMYw
Thanks.

A:

The results disappear because the page is reloaded when you "submit" the form (clicking on Go).
Do this:
$('#search-form').submit(function (event) {
    event.preventDefault();
    getWikiVal();
});

And remove the call to getWikiVal() in you HTML markup.

