Prevent page reload on submit

Question

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.

Don't use inline JS, add the event as the form's submit event, and prevent form submission. Otherwise when you submit the form it reloads the page. [Using JQuery - preventing form from submitting](http://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting) — JJJ, Nov 06 '16 at 19:36

tmslnz · Accepted Answer · 2016-11-06T19:40:37.103

0

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.

edited Nov 06 '16 at 19:40

answered Nov 06 '16 at 19:38

tmslnz

1,801
2
15
24

Prevent page reload on submit

1 Answers1