Saving data with jquery doesnt work with forms

Question

Have been struggling with this problem, and finally found out what caused it, i don't know how to solve it though.

The main problem is, I have a html document with options where i would like to save data in the browser, but when i use it with a form, the data doesn't show up.

This is the HTML code

<h1>My movielist</h1>
<form>
  <fieldset>
    <legend>Addd movie</legend>
    <div class="form-group">
      <label for="title">Titel:</label>
      <input type="text" class="form-control" id="title" placeholder="Titel here...">
    </div>
    <div class="form-group">
    <label for="Grade">grade:</label>
      <select id="grade"  class="form-control">
        <option value="0">Grade.</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>
    <div class="form-group">
      <button id="save-movie" class="btn btn-success">Save movie</button>
    </div>
  </fieldset>
</form>
<h2>Movies</h2>
<ol>

</ol>

This is the javascript code

$("#save-movie").click(function(){
    var thevalue = $("#title").val();
    $("ol").append("<li>" + thevalue + "</li>");
});

So when i press Save, it doesnt show up on the screen as an li element, but when I remove the <form> from the HTML document, it works, why?

How can I solve this problem so it works with forms? Do I need to add something to my code?