jQuery from submit refreshes page

Question

Я хочу сделать простую HTML-страницу, что-то вроде «калькулятора». Мне нужно, чтобы значения в таблице появлялись после нажатия кнопки, она вставляет данные в таблицу, но сама перезагружает страницу - это не то, что мне нужно, мне нужно увидеть эти данные.

Возможно ли это? спасибо, вот моя форма:

здесь ссылка jsFiddle: http://goo.gl/6cWY0r

Answer 1

Вы не должны смешивать свою форму, отправить с расчетами, которые вы пытаетесь сделать. При отправке формы данные отправляются на сервер, и страница перезагружается. Если вы хотите, чтобы избежать этого просто создать кнопку, которая не отправить форму, как я сделал здесь:
http://jsfiddle.net/tdo6q9km/2/
Так все, что вам действительно нужно сделать, это добавить еще одну кнопку

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

вне вашей формы ,

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(); 
    });