I have a simple HTML5 that is meant to be a calculator. I fill up the field and click on submit. The script runs produces the table as you can see in the debug screenshot and then the next step the page is back again with form unfilled and no table on it.
I tried the return false after script but it is not working as desired...
After the javascript returns the debug goes back to the tag button and calls a javascript that seems to be of Chrome...
This behavior is happening in Chorme 47.0.2526.106 m old IE9 witch are the browsers I have here to test...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>Calculadora</title>
</head>
<body>
<div class="jumbotron">
<form class="form-horizontal" method="post" >
<fieldset>
<!-- Form Name -->
<legend>Calculadora</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="val_inicial">Valor Inicial</label>
<div class="col-md-4">
<input id="val_inicial" name="val_inicial" type="text" placeholder="Valor Inicial" class="form-control input-md" required="">
<span class="help-block">Type here your initial deposit</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="val_perio">Valor de aplicação periódica</label>
<div class="col-md-4">
<input id="val_perio" name="val_perio" type="text" placeholder="Valor Recorrente" class="form-control input-md" required="">
<span class="help-block">Type here your recorrent deposit</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="taxa_mensal">Taxa de rendimento mensal</label>
<div class="col-md-4">
<input id="taxa_mensal" name="taxa_mensal" type="text" placeholder="Taxa Mensal" class="form-control input-md" required="">
<span class="help-block">Type here the expected return tax</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="num_periodos">Número de Períodos</label>
<div class="col-md-4">
<input id="num_periodos" name="num_periodos" type="text" placeholder="Número de Períodos" class="form-control input-md" required="">
<span class="help-block">Type here the number of periods for your calculations</span>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="btn_calcular"></label>
<div class="col-md-4">
<button id="btn_calcular" name="btn_calcular" class="btn btn-primary" onclick="calcular();">Calcular</button>
</div>
</div>
<!-- Label -->
<div class="form-group" id="div_resultado" style="visibility:hidden;">
<label class="col-md-4 control-label" for="total">Valor Calculado</label>
<div class="col-md-4">
<input id="total" name="total" type="text" placeholder="Valor Calculado" class="form-control input-md" >
</div>
</div>
</fieldset>
</form>
</div>
<div class="row marketing">
<div class="col-lg-6" id="tableDiv">
<table border="1" id="resultado">
<thead>
<th>Período</th>
<th>Taxa</th>
<th>Saldo anterior</th>
<th>Aplicação</th>
<th>Saldo posterior</th>
</thead>
</table>
</div>
</div>
<footer class="footer">
<p>© 2015 Company, Inc.</p>
</footer>
<script src="./fatAcc.js" type="text/javascript"></script>
</body>
</html>
and the javascript fatAcc.js
function operadorCantoneira(i, t) {
var iPercent = i/100;
var resultado = (Math.pow(1+iPercent, t)-1)/iPercent;
return resultado.toFixed(5);
}
function calcular() {
var i = document.getElementById('taxa_mensal').value;
var t = document.getElementById('num_periodos').value;
var valorInicial = document.getElementById('val_inicial').value
var valorRecorrente = document.getElementById('val_perio').value
var valorCalculadoInicial = valorInicial * i/100;
var valorCalculado = valorCalculadoInicial * operadorCantoneira(i, t-1);
document.getElementById('total').value = valorCalculado.formatMoney(2,',', '.');
document.getElementById('div_resultado').style.visibility='visible';
geraTabelaResultadosMensais();
return false;
}
Number.prototype.formatMoney = function(c, d, t){
var n = this,
c = isNaN(c = Math.abs(c)) ? 2 : c,
d = d == undefined ? "." : d,
t = t == undefined ? "," : t,
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
function geraTabelaResultadosMensais(){
//var tableDiv = document.getElementById('tableDiv');
var table = document.getElementById('resultado');
var t = Number(document.getElementById('num_periodos').value);
var i = Number(document.getElementById('taxa_mensal').value);
var valorInicial = Number(document.getElementById('val_inicial').value);
var valorRecorrente = Number(document.getElementById('val_perio').value);
var valorAcumulado = valorInicial;
//PRIMEIRA LINHA
var row = table.insertRow ();
var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();
cell1.innerHTML = 1;
cell2.innerHTML = i;
cell3.innerHTML = valorInicial;
cell4.innerHTML = valorRecorrente;
valorAcumulado = valorInicial * (1+i/100);
cell5.innerHTML = valorAcumulado.formatMoney(2,',', '.');
//O RESTANTE DAS LINHAS
for(var tempT=2; tempT<=t; tempT++){
row = table.insertRow();
cell1 = row.insertCell();
cell2 = row.insertCell();
cell3 = row.insertCell();
cell4 = row.insertCell();
cell5 = row.insertCell();
cell1.innerHTML = tempT;
cell2.innerHTML = i;
cell3.innerHTML = valorAcumulado.formatMoney(2,',', '.');
cell4.innerHTML = valorRecorrente.formatMoney(2,',', '.');
valorAcumulado = (Number(valorAcumulado) + Number(valorRecorrente))*(1 + i/100);
cell5.innerHTML = valorAcumulado.formatMoney(2,',', '.');
}
tableDiv.appendChild(table);
return false;
}
