Как реализовать демо-вычисления

Я написал скрипт и форму, по которой производятся и считаются вычисления при нажатии на кнопку "Вычислить". Помогите пожалуйста, как можно реализовать демо-вычисления: при нажатии на кнопку "Демо", значения по умолчанию вставляются в соответствующие им поля, но до нажатия на на кнопку "Демо", поля должны быть пустыми.

Код:

function proverka(input) {
    var value = input.value;
    var rep = /[-;":'a-zA-Zа-яА-Я\\=`ё/\*++!@#$%\^&_№?><]/;
    if (rep.test(value)) {
        value = value.replace(rep, '');
        input.value = value;
    }
} 

Код:

function areaRectangle() {
    this.calc1();
  var H1=+document.forma1.t1.value||0;
  var H2=+document.forma1.t2.value||0;
  var l1=H2-H1;
  document.forma1.t3[0].value = H1;
  document.forma1.t3[1].value = H2;
  document.forma1.t3[2].value = l1;

if ( (H1 == 0) || (H2 == 0) || (p1 == 0) || (p2 == 0) ) { //сообщаем пользователю в диалоговом окне, о том что при нажатии на кнопку вычислить, 
        alert('Входные данные не могут быть равны 0'); //входные данные "ограничены", поэтому если пользователь
      return; //введет их неправильно, то ему придётся ввести данные ещё раз, но на этот раз правильно
    }
    if ( (H1 < 0) || (H2 < 0) || (p1 < 0) || (p2 < 0) ) {
        alert('Входные данные не могут быть меньше 0');
      return;
    } 
    if ( H2 < H1 ) {
        alert('H2 должно быть больше H1');
      return;
    }
 
  var p1=document.forma1.t4.value;
  var p2=document.forma1.t5.value;
  var L=H2-l1*(p1/p2||0);
  document.forma1.res.value=L;
}

function calc1() { //в подрасчёте есть промежуточное значение l1
    console.log(1); //пользователь узнает чему равно l1, только после ввода H1 и H2, и нажатия на
    var H1=+document.forma1.t1.value||0; //текстовое поле t3
  var H2=+document.forma1.t2.value||0;
  var l1=H2-H1;
  document.forma1.t3[0].value = H1;
  document.forma1.t3[1].value = H2;
  document.forma1.t3[2].value = l1;
}

document.addEventListener("DOMContentLoaded", function(event) {
  document.forma1.t1.addEventListener("keyup", calc1);
  document.forma1.t2.addEventListener("keyup", calc1);
});

HTML:

<form name="forma1" style="background-color:#44944A;"> <!-- поменяю цвет формы -->
<div id="resizable">
<!--"подрасчёт 1.1"-->
<table align="center">
<br>
<p align="center">Глубина установки конца заливочных труб</p>
<tr><td height="40px">
<div class="price" title="H1">Расстояние от устья скважины до нижних отверстий фильтра, м;</div><input name="t1" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)" id="t3">
</td>
</tr>
<tr><td height="40px">
<div class="price" title="H2">Расстояние от устья скважины до верхних отверстий фильтра, м;</div><input name="t2" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)" id="t3">
</td>
</tr>
<tr><td height="40px">
<div class="price">Интервал отверстий фильтра, м;</div><input name="t3" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)" id="t3">
</td>
</tr>
<tr><td height="40px">
<div class="price">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input name="t4" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div class="price">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input name="t5" type="text" align="right" size="4" maxlength="8"  onkeyup="return proverka(this)">
</td>
</tr>
<tr><td>
<input type="button" name="button" value="Вычислить" onClick="areaRectangle();">
<input type="text" name="res" size="10">
</td></tr>
</table>
</div>
<br>
</form>

Функция calc1 нужна для вычисления промежуточного значения l1

Под формулой есть значения по умолчанию для демо-вычислений

 

А в форме ничего не меняется?

--- Добавлено, 16 май 2016 ---

Спасибо, ваш вариант у меня не заработал, поэтому я использовал другой.

Код:

function areaRectangle() {
...
/* демо вычисления */
$(function(){
  $("#demo").click(function(){
  var H1 = $(".h1").attr("data");
  var H2 = $(".h2").attr("data");
  var L1 = H2-H1;
  var Pup = $("#pup").attr("data");
  var Pzh = $("#pzh").attr("data");
  var L = H2-L1*(Pup/Pzh);
 
  $(".h1").val(H1);
  $(".h2").val(H2);
  $(".l1").val(L1);
  $("#pup").val(Pup);
  $("#pzh").val(Pzh);
  $("#l").val(L); 
   
  });
  });

И в форму добавил пару атрибутов data и классов