Create plot fields

Asked

Viewed 196 times

0

How do I generate plots using jQuery?

I got the field:

  • Valor

  • Plots

  • amount paid

  • Best day to pay

The code would take the valor and subtracted by valor pago with the remaining value would generate the aparcelas according to the melhor dia para pagamento.

- Example:

I am payment $ 400,00 in 3x, the expiration will always day 10.

1 - R$133,33 - 10-08-2019

2 - R$133.33 - 10-09-2019

3 - R$133.33 - 10-10-2019

How to proceed?

$('#valorCurso, #valorPago, #parcelas, #melhorDia').focusout(function() {
  var valorCurso = $("#valorCurso").val();
  var valorPago = $("#valorPago").val();
  var parcelas = $("#parcelas").val();
  var melhorDia = $("#melhorDia").val();

  if (valorCurso != "" && valorPago != "" && parcelas != "") {
    $('#tabelaParcelas').show();

    valor1 = parseFloat(parseFloat(valorCurso) - parseFloat(valorPago)).toFixed(2);

    valorParcela = valor1 / parcelas;

    var table = '';
    var x = 1;
    while (x <= parcelas) {
      table += '<tr><td>' + x + '</td>';
      table += '<td>data</td>';
      table += '<td> R$' + parseFloat(valorParcela) + '</td></tr>';
      x++;
    }
    $('#tabelaParcelas tbody').html(table);
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-2">
      <div class="form-group">
        <label class="control-label">Valor</label>
        <input id="valorCurso" name="valorCurso" type="text" class="form-control moeda" value="" required/>
      </div>
    </div>

    <div class="col-xs-12 col-sm-2">
      <div class="form-group">
        <label class="control-label">Valor pago</label>
        <input id="valorPago" name="valorPago" type="text" class="form-control moeda" value="" required/>
      </div>
    </div>

    <div class="col-xs-12 col-sm-2">
      <div class="form-group">
        <label class="control-label">Parcelas</label>
        <input id="parcelas" name="parcelas" type="number" class="form-control" value="" required/>
      </div>
    </div>

    <div class="col-xs-12 col-sm-2">
      <div class="form-group">
        <label class="control-label">Melhor dia</label>
        <select id="melhorDia" name="melhorDia" class="form-control">
          <option value="05">05</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
          <option value="25">25</option>
        </select>
      </div>
    </div>

  </div>




  <div class="space-4"></div>

  <div class="row">
    <div class="clearfix form-actions">
      <label class="control-label">Parcelas</label>

      <table id="tabelaParcelas" style="display:none;">
        <thead>
          <tr>
            <th>Parcela</th>
            <th>Valor</th>
            <th>Data</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>

    </div>
  </div>

</div>

javascript jquery

  • But the amount of installments is not the client who chooses?

  • How to generate the amount of plots according to the best day?

  • @Viniciusdejesus If it is 3 plots the person type in the field parcelas and will be generated 3 plots.

  • @Viniciusdejesus Better day, it would be the best day for that invoice to sell, Let’s assume that I am the customer. I always get the 5. My best day can’t be the 5 to pay, so I choose the 10.

  • @Viniciusdejesus I was able to explain?

  • @Viniciusdejesus I was able to explain?

  • @Viniciusdejesus If you can help me, I will be immensely grateful.

  • I can, but I don’t think I’ll do it today. I’m going to go shopping

  • @Viniciusdejesus blz, as I evolve here I update this post.

  • Let’s go continue this discussion in chat.

  • 1

    What’s the problem with the current code ?

Show 6 more comments

2 answers

3

Surely there are better ways to do that, I’m no expert on JS, far from it. Actually I’m taking a JS course currently, and I stayed yesterday and today a good time breaking my head on this question to train hehe.

So as I think it has become decent, and as who knows can help the AP, below is the solution I found with the help of several questions/ answers from here, the OS and other sites cited below.

Some considerations about the differences with your code:

  • I used the date to generate the dates, only increasing the month initial seems impossible;

  • I used the letto declare the variables, because when you declare with nothing she gets the global scope;

  • I used the toLocaleDateString to format the date;

  • I used the toLocaleString to write the value in R$;

  • I created a button and used an event click to make it easier to test (I even left some values in the snnipet inputs below);

  • No need to do != "" to test if any value has been entered to enter the if, just put in parentheses that the JS already checks if the value is true or false;

  $('#calcular').click(function() {
    
    let valorCurso = parseFloat($("#valorCurso").val());
    let valorPago = parseFloat($("#valorPago").val()).toFixed(2);
    let parcelas = parseInt($("#parcelas").val());
    let melhorDia = parseInt($("#melhorDia").val());

    if ((valorCurso) && (valorPago) && (parcelas)) {

      // ENCONTRA O VALOR LÍQUIDO

     let valorLiquido = parseFloat(valorCurso - valorPago);

      // CALCULA A PARCELA

     let valorParcela = parseFloat(valorLiquido / parcelas);
  
     let table = '';
     let par = 1;

     // ENCONTRA A DATA ATUAL

     let hoje = new Date();

     // CRIA A DATA NO MÊS SEGUINTE COM O MELHOR DIA

     let primeiraParcela = new Date(hoje.getFullYear(), hoje.getMonth() + 1, melhorDia);

        for(i = 0; i < parcelas; i++) {
          table += '<tr><td>' + par  + '</td>';
          table += '<td>' + primeiraParcela.toLocaleDateString() + '</td>';
          table += '<td>' + valorParcela.toLocaleString('pt-BR', { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }) + '</td></tr>';
          par++;
          primeiraParcela.setMonth(primeiraParcela.getMonth() + 1); // AUMENTA UM MÊS      
        }

   $('#tabelaParcelas tbody').html(table);

    }
  });
tr, th, td {

padding: 5px;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang='pt-BR'>
<head>
  <title></title>
  <meta charset="utf-8">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <label class="control-label">Valor</label>
        <input id="valorCurso" name="valorCurso" type="text" class="form-control moeda" value="100" required/>
      </div>
    </div>

    <div class="col-md-2">
      <div class="form-group">
        <label class="control-label">Entrada</label>
        <input id="valorPago" name="valorPago" type="text" class="form-control moeda" value="0" required/>
      </div>
    </div>

    <div class="col-md-2">
      <div class="form-group">
        <label class="control-label">Parcelas</label>
        <input id="parcelas" name="parcelas" type="number" class="form-control" value="7" required/>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <label class="control-label">Melhor dia</label>
        <select id="melhorDia" name="melhorDia" class="form-control">
          <option value="05">05</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
          <option value="25">25</option>
        </select>
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2">
      <div class="form-group">
        <label class="control-label">
          <button type="button" id="calcular" class="btn btn-default">Calcular</button>
        </label>
      </div>
    </div>
</div>
</div>
<div class="row">
    <div class="clearfix form-actions">
      <table id="tabelaParcelas">
        <thead>
          <tr>
            <th>Parcela</th>
            <th>Data</th>
            <th>Valor</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
    </div>
  </div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</body>
 </html>

References:

https://stackoverflow.com/questions/20989579/how-do-add-days-to-a-date

https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Calculate values in real R$

https://stackoverflow.com/questions/49265311/how-to-get-a-specify-date-in-every-month-in-javascript

  • More complete than mine, but I answered first.

1

Explanations in the comments in the code, any doubt just add a comment.

$("#melhorDia").change(function() {
  let valor = $("#valorCurso").val();
  let pago = $("#valorPago").val();
  let parcelas = $("#parcelas").val();
  let bestDay = $("#melhorDia").val();
  let diferenca = valor - pago;
  let valorParcelas = diferenca / parcelas;

  //instancia de data atual
  data = new Date();
  //No JS os meses são representados de 0 à 11, ou seja precisamos adicionar + 1
  mesAtual = data.getMonth() + 1;

  //limpo o corpo da tabela
  $("#corpo-tabela").empty()

  for (var i = 1; i <= parcelas; i++) {

    //O (i-1) serve para que os meses acompanhem a iteração e sejam somados a quantidade de parcelas, mas que como começa com 1
    // estou sutraindo 1
    $("#corpo-tabela").append("<tr><td>" + i + "</td><td>" + valorParcelas + "</td><td>" + bestDay + "/" + (mesAtual + (i - 1)) + "</td>")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-3">
        <div class="form-group">
          <label class="control-label">Valor</label>
          <input id="valorCurso" name="valorCurso" type="text" class="form-control moeda" value="" required/>
        </div>
      </div>
      <div class="col-xs-12 col-sm-3">
        <div class="form-group">
          <label class="control-label">Valor pago</label>
          <input id="valorPago" name="valorPago" type="text" class="form-control moeda" value="" required/>
        </div>
      </div>
      <div class="col-xs-12 col-sm-3">
        <div class="form-group">
          <label class="control-label">Parcelas</label>
          <input id="parcelas" name="parcelas" type="number" class="form-control" value="" required/>
        </div>
      </div>
      <div class="col-xs-12 col-sm-3">
        <div class="form-group">
          <label class="control-label">Melhor dia</label>
          <select id="melhorDia" name="melhorDia" class="form-control">
            <option value="">SELECIONE</option>
            <option value="05">05</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
            <option value="25">25</option>
          </select>
        </div>
      </div>
    </div>
    <div class="space-4"></div>
    <div class="row">
      <div class="col-12">
        <label class="control-label">Parcelas</label>
        <table class="table" id="tabelaParcelas">
          <thead>
            <tr>
              <th>Parcela</th>
              <th>Valor</th>
              <th>Data</th>
            </tr>
          </thead>
          <tbody id="corpo-tabela">
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

  • Vinicius, I noticed a problem. If I parcel in 15x the date column gets wrong. It appears month above 12. Another detail, leave in format yyyy-mm-dd

  • Actually I already delivered knowing this problem, but you wanted me to do all the work for you? Negative.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.