Help with jQuery. in calculation of plots!

5

I'mdevelopingasystemwheretheusercanselecttheamountofparcelshewantstosplithispurchase..untilthenokay..butafieldwasrequestedwheretheusercanentertheamounthecanpayperinstallment..andwhenfillinginautomaticallyhemustidentifywhichvaluethatdividedby12comesclosesttothevaluefilledin.Ihavethefollowingcodesofar...

$(document).ready(function(){//Aquielepegaovalordocampo"Você pode pagar.." -> aqui que preciso de ajuda!
        $('#parcelaAprox').change(function() {
            console.log($('#parcelaAprox').val());

            console.log($('#PrecoManager').val().replace(',', '.') / 12);

            $.each(test, function (index, item) {
                console.log(index);
            });

        });

        // Aqui ao carregar a página como padrão o valor de parcelas é 12
        var vParcela = $('#PrecoManager').val().replace(',', '.') / $('#nParcelas').val();
        vParcela = parseFloat(vParcela).toFixed(2).replace('.', ',');
        $('#vParcela').html(vParcela);

        // Aqui ele divide o valor do produto pela quantidade de parcelas selecionadas
        $('#nParcelas').change(function () {
            var vParcela = $('#PrecoManager').val().replace(',', '.') / $('#nParcelas').val();
            vParcela = parseFloat(vParcela).toFixed(2).replace('.', ',');
            $('#vParcela').html(vParcela);
        });

    });

Thank you!

    
asked by anonymous 29.09.2017 / 21:47

2 answers

3

I've done an example based on your fields how to behave.

Basically I used two variables to compare the value typed and store the smallest occurrence between the plots. I also added an Array to store the plots and make the comparison easier.

$(document).ready(function(){
  // Valor do produto para teste
	let ValorTotal = 5000.00;
  
    let eParcelas = $("#qtdParcelas");
    let parcelas = [];
  
  for(let i = 1; i <= 12; i++) {
  	let option = $('<option>');
    let valorParcela = ValorTotal/i
  	eParcelas.append(option.attr('value', i).append('${i}x Parcelas de R$ ${valorParcela.toLocaleString()}'));
    
    // Pra facilitar a comparação eu jogo as parcelas em um array;
    parcelas.push({
    	qtdParcelas: i,
        valor: valorParcela
    });
  }
  
  $('#possoPagar').keyup(function(e){
  	let valor = $('#possoPagar').val();
    let valorIdeal = 0;
    parcelas.forEach(function(v, i){
    	if(v.valor <= valor && v.valor >= valorIdeal) {
      	valorIdeal = v.valor;
      	$("#valorIdeal").html('${v.qtdParcelas}x de R$ ${v.valor}');
               
        eParcelas.val(v.qtdParcelas);
      }
    });
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><div><label>Quantovocêpodepagar?</label><inputtype="number" name="possoPagar" id="possoPagar" />
  </div>
  <div>
    <label>Parcelas</label>
    <select name="qtdParcelas" value id="qtdParcelas">      
    </select>
  </div>
  
  <h3>
    Valor ideal da parcela
  </h3>
  <div id="valorIdeal">
  </div>
</form>

Just adapt the logic to your need, I hope I have helped.

    
29.09.2017 / 22:21
5

$(document).ready(function() {
  var total = 600; // valor base do produto
  $('#valor, #nParcelas').on('change input', function(e) {
    var valor = Number($('#valor').val().replace(/\./g, '').replace(',', '.') || 0);
    var parcelas = Number($('#nParcelas').val());

    if (this.id == 'valor') { // caso de mudar o valor
      var match = {diff: Infinity};
      for (var i = 1; i <= 12; i++) {
        var diferenca = Math.abs(total - valor * i);
        if (diferenca < match.diff) match = {i: i, diff: diferenca};
      }

      $('#nParcelas').val(parcelas = match.i);
      if (parcelas * valor < total) return $('#vParcela').text('O valor é demasiado baixo...');
    }

    $('#valor').val((valor = (total / parcelas)));
    $('#vParcela').text('R$ ' + (total / parcelas).toLocaleString('pt-br'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>Total:R$600</p><inputid="valor" />
<select id="nParcelas" value="12">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option selected>12</option>
</select>
<select id="vVencimento">
  <option value="1">Dia 1</option>
  <option value="2">Dia 2</option>
  <option value="3">Dia 3</option>
  <option value="4">Dia 4</option>
  <option value="5">Dia 5</option>
  <option value="6">Dia 6</option>
  <option value="7">Dia 7</option>
  <option value="8">Dia 8</option>
  <option value="9">Dia 9</option>
  <option value="10" selected>Dia 10</option>
</select>
<span id="vParcela"></span>
    
03.10.2017 / 21:12