1

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="";
}
4
  • Por favor, seja mais claro ao descrever qual o seu problema. Commented 30/09/2014 às 21:52
  • Olá Vinicius, meu "Problema" é não conseguir criar uma tabela sem refresh na tela exibindo o número da parcela, valor de cada parcela e data de vencimento! podes me ajudar? obrigado! Commented 30/09/2014 às 22:26
  • Acho que entendi... no HTML postado, não estou vendo os campos com id 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. Commented 30/09/2014 às 23:17
  • os id vdesconto, sp_desconto são apenas do span, o total esta declado correto, o que preciso fazer ainda não esta implementado, preciso de uma luz(ideia) base para criar mais essa funcionalidade das tabelas. Commented 1/10/2014 às 2:10

2 Respostas 2

0

Se entendi o que esta querendo fazer, deve fazer um seguinte:

1) No formulário, crie uma div com o id="mensalidades" um campo select com o numero possíveis de mensalidades. No select adicione um evento onchange apontado para uma função que faça os cálculos das mensalidades.

2) Crie um função para calcular as mensalidades. Dentro dessa função crie um loop do tamanho das mensalidades para criar as linhas de uma tabela

for(var a=0; a<select.value.length; a++){

  var t +="<td><tr>mensalidade:"+(a+1)+"</tr><tr>"+valor+"</tr><tr>"+data_vencimento+"</tr></td>"
}

document.getElementById("mensalidades").innerHTML="";
document.getElementById("mensalidades").innerHTML="<table>"+t+"</table>";

Assim não precisa de fazer o refresh da página.

 function mensalidades()
{
  var valortotal = parseFloat(document.getElementById("total").value);
  var valorparcela = valortotal/document.getElementById("select_parcelas").value;
  var datavencimento = new Date();
  datavencimento.setDate(datavencimento.getDate() + (30*select.value.length);

  for(var a=0; a<document.getElementById("select_parcelas").value; a++)
 {
  var t +="<td><tr>mensalidade:"+(a+1)+"</tr><tr>"+valorparcela+"</tr><tr>"+datavencimento+"</tr></td>"
 }
document.getElementById("mensalidades").innerHTML="";
document.getElementById("mensalidades").innerHTML="<table>"+t+"</table>";

}

<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>

<DIV>
 <select onchange="mensalidades()" id="select_parcelas" >
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
       </select>
<DIV id="mensalidades"></DIV>
</DIV>
</form>
0

Manuel primeiramente obrigado! então implementei o select em html deste modo:

       <select onchange="mensalidades()" id="mensalidades" >
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
       </select>

e a função javascript da seguinte forma:

 function mensalidades()
  var valortotal = parseFloat(document.getElementById("total").value);
  var valorparcela = valortotal/select.value.length;
  var datavencimento = new Date();
  datavencimento.setDate(datavencimento.getDate() + (30*select.value.length);
for(var a=0; a<select.value.length; a++){
  var t +="<td><tr>mensalidade:"+(a+1)+"</tr><tr>"+valorparcela+"</tr><tr>"+datavencimento+"</tr></td>"
}
document.getElementById("mensalidades").innerHTML="";
document.getElementById("mensalidades").innerHTML="<table>"+t+"</table>";

mas ao selecionar uma das parcelas não acontece nada na minha página, sabes o que pode estar errado ? ps: as funções de calculos da mensalidade ainda estou analisando algo melhor e válido, abraço!

2
  • Eu fiz uma edição no código, tente encontrar as diferenças. Depois teste que o evento onchange está a chamar a função. Se estiver, então tudo deve dar certo. Só mais uma coisa, por favor, em vez de colocar as edições do código em uma select_parcelas.value Commented 1/10/2014 às 18:58
  • Obrigado manuel pela ajuda! editei meu post com a correção, sua ideia me ajudou muito para a finalização da minha tabela dinamica. abraço! Commented 10/10/2014 às 0:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .