I have a calculation form with JavaScript, what happens is that I saw a tutorial on calculations with JavaScript but everything is done in real time, that is, as shown in the image:
These data are displayed without me pressing the "Calculate" button, what I want is that these data are not displayed until I press the calculate button.
The html code for the site is this (also available on Ghostbin ):
//Link del javascript: https://ghostbin.com/paste/urg7z
<?php
session_start();
if(!$_SESSION['user']){
header ("Location: ingresar.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Remesas ENVIA - Calculo en dolares</title>
<style type="text/css">
.auto-style1 { text-align: center; }
.auto-style2 { background-image: url('img/bg_calculo_dolares.jpg'); }
.auto-style3 { border-width: 0px; }
.auto-style4 { text-align: left; font-family: Arial, Helvetica, sans-serif; }
.auto-style5 { font-size: 55pt; }
.auto-style6 { text-align: left; }
.auto-style7 { text-align: left; font-family: Arial,Helvetica, sans-serif; font-size: 55pt; }
.auto-style8 { font-family: Arial, Helvetica, sans-serif; }
.auto-style9 { font-size: 55pt; font-weight: bold; }
.auto-style10 { text-align: right; }
.auto-style11 { font-size: 55pt; color: #00A743; }
</style>
<script type="text/javascript"src="/js/calculo.js"></script>
</head>
<body style="background-color: #F37300; margin-top: 27px; height: 1612px;">
<table align="center" cellpadding="0" cellspacing="0" style="width: 940px; height: 1560px" class="auto-style2">
<tr>
<td class="auto-style1" style="width: 940px; height: 230px" colspan="2"></td>
</tr>
<tr>
<td class="auto-style10" style="width: 538px; height: 170px;">
<input type="number" id="valor1" onkeyup="sumar();" size="23" style="font-family: Arial; font-size: 85pt; height: 160px; width: 410px;" required class="auto-style11"> </td>
<td class="auto-style1" style="width: 470px; height: 170px;">
<img alt height="168" onclick="sumar()" src="img/button_calcula.jpg" style="float: left" width="370" class="auto-style11"></td>
</tr>
<tr>
<td class="auto-style1" style="width: 940px; height: 1110px;" colspan="2">
<p> </p>
<p class="auto-style4"><span class="auto-style5"> Si envias a Mexico</span></p>
<div class="auto-style6"><span class="auto-style5"> <span class="auto-style8"><strong>$</strong></span></span>
<strong>
<input type="text" id="valor2" disabled value="0" size="23" style="font-family: Arial; font-size: 55pt; height: 75px; width: 335px;" required class="auto-style9"></strong>
<span class="auto-style7">dolares</span></div>
<p class="auto-style4"><span class="auto-style5"> tu familia recibe</span></p>
<div class="auto-style6"><span class="auto-style5"> <span class="auto-style8"><strong>$</strong></span></span>
<strong>
<input type="text" id="valor3" disabled value="0" size="23" style="font-family: Arial; font-size: 55pt; height: 75px; width: 335px;" required class="auto-style9"></strong>
<span class="auto-style7">pesos,</span></div>
<p class="auto-style4"><span class="auto-style5"> tu envio cuesta</span></p>
<div class="auto-style6"><span class="auto-style5"> <span class="auto-style8"><strong>$</strong></span></span>
<strong>
<input type="text" id="valor4" disabled value="0" size="23" style="font-family: Arial; font-size: 55pt; height: 75px; width: 335px;" required class="auto-style9"></strong>
<span class="auto-style7">dolares</span></div>
<p class="auto-style4"><span class="auto-style5"> tu pago total es de</span></p>
<div class="auto-style6"><span class="auto-style5"> <span class="auto-style8"><strong>$</strong></span></span>
<strong>
<input type="text" id="valor5" disabled value="0" size="23" style="font-family: Arial; font-size: 55pt; height: 75px; width: 335px;" required class="auto-style9"></strong>
<span class="auto-style7">dolares</span></div>
<br />
<br />
<a href="seleccionar_destinatario.php"><img alt height="200" src="img/button_continuar.jpg" width="850" class="auto-style3" /></a></td>
</tr>
<tr>
<td class="auto-style1" style="width: 940px; height: 45px" colspan="2"></td>
</tr>
</table>
</body>
</html>
And my JavaScript is this (also in Ghostbin ):
//funcion que se ejecuta cada vez que se añade una letra en un cuadro de texto
//suma los valores de los cuadros de texto
function sumar()
{
var dolar = 18;
var porcentaje = 100;
var valor1=verificar("valor1");
var valor2=verificar("valor2");
var valor3=verificar("valor3");
var valor4=verificar("valor4");
var valor5=verificar("valor5");
// realizamos la suma de los valores y los ponemos en la casilla del
// formulario que contiene el total
document.getElementById("valor2").value=
parseFloat(valor1);
document.getElementById("valor3").value=
parseFloat(valor1)*
parseFloat(dolar);
document.getElementById("valor4").value=
parseFloat(valor2)/porcentaje*10;
document.getElementById("valor5").value=
parseFloat(valor1)+
parseFloat(valor4)*10;
}
//funcion para verificar los valores de los cuadros de texto. si no es un valor
//numerico, cambia de color el borde del cuadro de texto
function verificar(id)
{
var obj=document.getElementById(id);
if(obj.value=="")
value="0";
else
value=obj.value;
if(validate_importe(value,1))
{
// marcamos como erroneo
obj.style.borderColor="#808080";
return value;
}else{
// marcamos como erroneo
obj.style.borderColor="#f00";
return 0;
}
}
//Funcion para validar el importe
//Tiene que recibir: El valor del importe
//Determinar si permite o no decimales
//Devuelve: true - Correcto , False - Incorrecto
function validate_importe(value,decimal)
{
if(decimal==undefined)
decimal=0;
if(decimal==1)
{
// Permite decimales tanto por . como por ,
var patron=new RegExp("^[0-9]+((,|\.)[0-9]{1,2})?$");
}else{
// Numero entero normal
var patron=new RegExp("^([0-9])*$")
}
if(value && value.search(patron)==0)
{
return true;
}
return false;
}
In the text field where you write the amount, there is a handler for the event
onkeyup
, which is the one that performs the automatic calculation:This means that when a key is pressed, the function is called
sumar()
. If you remove that reference, the fields will no longer be updated automatically, only when you click the calculate button: