Text from user input variable not staying in div element

Question

I am taking a variable from an HTML form element and trying to put it into a div to be displayed on the website whenever I click a button. However it shows up for a second then pops away.

I tried taking it out of the document.ready() block but that didn't work. When I put a string literal in the $(".output").html the same problem occurs as well. Similar questions like mine seem to be a syntax error, but I don't seem to have any I can find.

$(document).ready(function(){
  $(".sub").on("click",function(){
    var searchstring = $("#searchfield");
    $(".output").html(searchstring.val());
  });
});

Here is my site on codepen: http://codepen.io/arcjackson06/pen/NNeQvJ

Answer 1

Your <button> will submit the surrounding form. You need to use:

<button class="..." type="button"></button>

Which will prevent the form from submitting when clicked.

Alternative you can prevent the default click event, with:

$('.sub').on('click', function(event) {
  event.preventDefault();
  // ...

Answer 2

This should do the trick:

$(".sub").on("click",function(e)
{
    e.preventDefault();
    var searchstring = $("#searchfield").val();
    $(".output").html(searchstring);
}