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!

score 1 · Answer 1 · answered Jan 22 '14 at 22:13

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>

answered Jan 22 '14 at 22:13

hpelleti

342
1
6

perfect, that work. but i just realise that the value is calculate each time you chose an option. How can i resolve that so only when you click on the submit button it write the answer. En francais: Ca fonctionne merci, mais je remarque qu'a chaque fois que je change une valeur dans les option le calcul ce fait dans la case et j'aimerais qu'il apparait seulement lorsque l'on click sur le bouton calculer. Merci – user3225427 Jan 22 '14 at 22:19

Create a button to call function cal()

1 Answers1