How to insert dynamic tables referring plots

Question

I am working with a sales record of product, when entering the product I can handle a discount(%), input value and then I have the final value, I can select in HTML input number a portion number in up to 6x, good when performing the Lulo occurs all normal, but I am trying to research a solution that after I fill the number of installments appears below the table with the installment number, the value of each installment and its maturity date.

Follow the input code snippet:

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

Discount (%):
Entry R$: Pacelas:
Total Value:

Function to perform my calculations

    // 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;
}

Yet one is missing onblur when selecting the plot and the table appears as mentioned above

How can I evolve with this idea?

I can’t create a table without refresh on the screen displaying the installment number, value of each installment and maturity date.

---

Solution:

   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="";
}

Answer 1

Manuel first thank you! so I implemented select in html this way:

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

and the javascript function as follows:

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

but when selecting one of the installments nothing happens on my page, you know what could be wrong ? ps: the function of tuition calculations I’m still analyzing something better and valid, hug!

Answer 2

If I understand what you’re trying to do, you must do the following:

1) In the form, create a div with id="tuition fees" a select field with the possible number of tuition fees. In select add an onchange event pointed to a function that does the tuition calculations.

2) Create a function to calculate the monthly payments. Within this function create a loop of the size of the monthly payments to create the rows of a table

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

So you don’t need to refresh the page.

 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>