Create a button to call function cal()

Question

I created a form with cal() in it, so people can choose options and then it would calculate the answer depending on what they have chosen.

But I would like to insert a button at the end that would call the result. So when people have chosen their options they would click the submit button and it would give them the right answer depending on their choice.

I haven't been able to do it. I tried an input type button but I don't know how to call the rest.

Here's my code:

<script>
function cal() { 
  var pl = document.form1.template.value; 
  var resultat = pl; 
  document.form1.tresultat.value = resultat; 
  document.formfin.tresultatfin.value = calfin(); 
} 

function cal2() { 
  var pl2 = document.form2.envoi.value; 
  var resultat2 = pl2; 
  document.form2.tresultat2.value = resultat2; 
  document.formfin.tresultatfin.value = calfin(); 
} 

function cal3() { 
  var pl3 = document.form3.article.value; 
  var tl3 = document.form3.ecrit.value;
  var resultat3 = pl3*tl3; 
  document.form3.tresultat3.value = resultat3; 
  document.formfin.tresultatfin.value = calfin(); 
} 

function calfin() { 
  var r1 = form1.tresultat.value; 
  var r2 = form2.tresultat2.value;
  var r3 = form3.tresultat3.value;  
  return (parseFloat(r1)+(parseFloat(r2)*parseFloat(r3))); 
} 

</script>

<form name="form1"> 
     <label for="template">Template :</label>
     <select name="template" onChange="cal()"> 
     <option value="500">Yes
     <option value="800">No 
     <option value="2900">Maybe
     </select> 
     <input type="hidden" value="0" name="tresultat"> 
</form> 
<br><br><br>
<form name="form2"> 
<label for="envoi">Quantité d'envoi annuel :</label> 
     <select name="envoi" onChange="cal2()"> 
     <option value="2">2 
     <option value="3,6">4 
     <option value="5,1">6 
     <option value="6,4">8 
     <option value="9">12 
     </select> 
     <input type="hidden" value="0" name="tresultat2">
</form> 
<br><br><br>
<form name="form3"> 
<label for="article">Articles par infolettre :</label>  
     <select name="article" onChange="cal3()"> 
     <option value="1">1 
     <option value="2">2
     <option value="3">3 
     </select> 

     <label for="ecriture"> Écriture des articles :</label>  
     <select name="ecrit" onChange="cal3()"> 
     <option value="50">X  
     <option value="300">Y 
     <option value="200">Z
     </select> 
     <input type="hidden" value="0" name="tresultat3"> 

<br><br><br>
<form name="formfin"> 
<label for="total"> Total :</label>
<input type="text" value="0" name="tresultatfin"> 
</form>

All my functions seem to work. They calculate what I want, only the button that would call the answer is missing.

Thanks a lot for any help!

Answer 1

Just add a button in your form

<form name="formfin"> 
  <label for="total"> Total :</label>
  <input type="text" value="0" name="tresultatfin"> 
  **<input type="button" onclick="cal()" value="Calculer" />**
</form>