javascript - [jQuery]Page refreshes after appending html with .html() -

so i'm trying data server php it's loaded onto page seems reload page , make disappear again. html:

<form id="searchform"> <input name="searchvalue" type="text" id="search"> <input type="submit" name="submit" value="zoek op klant"          onclick="getklanten()"> </form>  <div id="klanten"> </div> 

my js:

function getklanten(){ var value = $("#search").val(); $.ajax({     url:'includes/getklanten.php',     async: false,     type: 'post',     data: {'searchvalue':value},     success: function(data, textstatus, jqxhr)     {         $('#klanten').html(data);     },     error: function () {         $('#klanten').html('bummer: there error!');     } }); } 

can help? gets put div instantly disappears again.

firstly, avoid inline click handlers. page reloads because default form submits form content url specified in action attribute.

instead attach event form , use preventdefault avoid page refreshing. this

$('#searchform').on('submit', function(e){   e.preventdefault();    // ajax request. }); 

or attach event input button

$('input[type="submit"]').on('click', function(e){   e.preventdefault();    // ajax request }); 

read more preventdefault here