jQuery from submit refreshes page

Question

I want to make simple HTML page, something like "calculator". I need that values in table will appear after button clicking it will insert data into table but it will reload page itself - this not what I need, I need to see that data.

Is possible to do it? thanks, here is my form:

here is link to jsFiddle: http://goo.gl/6cWY0r

Answer 1

You should not mix up your form-submit with the calculations you are trying to do. On submitting a form the data gets sent to a server and the page will reload. If you want to avoid that simply create a button which does not submit your form like I did here:
http://jsfiddle.net/tdo6q9km/2/
So all you really have to do is to add another button

<button id="calc"> Calculate </button>

outside of your form.

Answer 2

$('button').on('click', function(e){
     $("table").append("<th scope=\"row\">1</th><td>Mark</td><td>Otto</td><td>@mdo</td>");
     e.preventDefault();
  });