Estou trabalhando com um cadastro de venda de produto, ao inserir o produto eu posso manipular um descontro(%), valor de entrada e ai então tenho o valor final, posso selecionar em HTML input number um número de parcela em até 6x, bom ao realizar o calulo ocorre tudo normal, porém estou tentando pesquisar uma solução que após eu preencher o número de parcelas apareça abaixo a tabela com o número da parcela, o valor de cada parcela e sua data de vencimento.
Segue o trecho de código dos inputs:
<form id="form1" name"form1" method"post" action"" enctype="multipart/form-data">
<div class="produtos">
<p class="campoProduto">
<label>Cód Produto: <input type="text" name="codProduto" id="codProduto" size="5"/></label>
<label>Produto: <input name="nomeProduto" type="text" size="10" value="" /></label>
<label>Qt.: <input type="number" min="1" max="999" size="1" name="qtProduto" id="qtProduto" onblur="calcValor()" /></label>
<label>Valor R$: <input type="text" name="valorProduto" id="valorProduto" size="6" onkeypress="mascara(this,float)"/></label>
<a href="#" class="removerProduto">Remover Produto</a>
</p>
</div>
<p>
<a href="#" class="adicionarProduto">Adicionar Produto</a>
</p>
<br>
<label>Data da Compra <input name="datacompra" type="text" id="datacompra" size="6" maxlength="10" value="<?php echo date('d/m/Y')?>" onKeyUp="javascript:somente_numero(this);" onkeypress="formatar_mascara(this,'##/##/####')"/></label>
Desconto (%):
Entrada R$:
Pacelas:
Valor Total:
Função para realizar os meus calculos
// zerando total
document.getElementById("total").value = '0';
// Preço do produto
var PRECO = parseFloat(document.getElementById("valorProduto").value);
// Porcentagem do desconto
var PORCENTAGEM = parseFloat(document.getElementById("desconto").value);
var ENTRADA = parseFloat(document.getElementById("entrada").value);
var QT = document.getElementById("qtProduto").value;
var VDESCONTO = parseFloat(PRECO*(PORCENTAGEM/100));
var TOTAL = parseFloat(PRECO)*QT - (parseFloat(ENTRADA + VDESCONTO));
document.getElementById("vdesconto").value = VDESCONTO.toFixed(2);
document.getElementById("sp_vdesconto").innerText = VDESCONTO.toFixed(2);
document.getElementById("total").value = TOTAL.toFixed(2);
document.getElementById("sp_total").innerText = TOTAL.toFixed(2);
document.getElementById("debito").innerText = DEBITO.toFixed(2);
}
function mascara(o,f){
v_obj=o
v_fun=f
setTimeout("execmascara()",1)
}
function execmascara(){
v_obj.value=v_fun(v_obj.value)
}
function float(v){
v=v.replace(",",",")
return v;
}
No entanto esta faltando um onblur
ao selecionar a parcela e surgir a tabela conforme citado acima
Como posso evoluir com esta ideia?
Não estou conseguindo criar uma tabela sem refresh na tela exibindo o número da parcela, valor de cada parcela e data de vencimento.
Solução:
function calculamensalidades(){
var valortotal = parseFloat(document.getElementById("total").value);
var valorparcela = valortotal/document.getElementById("select_parcelas").value;
var parcelas = parseFloat(document.getElementById("select_parcelas").value);
var date = new Date();
var mesvencimento = date.getMonth();
var diavencimento = date.getDate();
var tabela;
tabela = "<br><table border='0' width='30%' style='text-align:center'><tr><td bgcolor='#4682B4'>Parcela</td><td bgcolor='#4682B4' >Valor</td><td bgcolor='#4682B4'>Vencimento</td></tr>";
for(var a=0; a<document.getElementById("select_parcelas").value; a++)
{
var n_date = new Date(date.getFullYear(), eval(a+mesvencimento), diavencimento);
var diavec = date.getDate();
var mesvenc = n_date.getMonth();
var anovenc = n_date.getFullYear();
tabela = tabela + "<tr><td bgcolor='#9AC0CD'>"+(a+1)+"</td><td bgcolor='#9AC0CD'>R$ "+valorparcela.toFixed(2)+"</td><td bgcolor='#9AC0CD'>"+diavec+"/"+mesvenc+"/"+anovenc+"</td></tr>";
}
tabela=tabela+"</table>";
document.getElementById("mensalidades").innerHTML="";
document.getElementById("mensalidades").innerHTML=tabela;
}
function apagatabela(){
document.getElementById('mensalidades').innerHTML="";
}
problema
.vdesconto
,sp_desconto
,total
, etc, que estou assumindo serem os campos onde os resultados vão ser exibidos. Por favor, inclua o código deles.