6

Gostaria de ajuda para implementação do cálculo das parcelas e preenchimento/criação dos inputs de acordo com o número de parcelas.

Código abaixo e no https://jsfiddle.net/wnm3jhr7/:

 $(document).ready(function(e) {
	
	$('#condicao-pag').on('change', 'select', function() {
		if($(this).val() == 1){
			$('#parcelamento').show();
			/*Calcular valor das parcelas (2x, 3x e 4x) e preencher inputs*/
			$('#parcelas').show();
		}
		else{
			$('#parcelamento').hide();
			$('#parcelas').hide();
			$("input[name='parcela[]']").val('');
		}
	})
		  
	$('#n-parcelas').on('change', function() {
		/*Calcular valor das parcelas (2x, 3x e 4x) e preencher inputs*/
	})
	 
	 
	});
  <table>
    <tbody>
    <tr>
        <td><label>Total R$</label></td>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input type="number" min="0" class="total" value="100" /></td>
    </tr>
    <tr name="condicao-pag" id="condicao-pag">
        <td><label>Condição de pagamento:</label></td>
        <td>
            <select>
                <option value=0>À vista</option>
                <option value=1>À prazo</option>
                <option value=2>Outros</option>
            </select>
        </td>
    </tr>
    <tr id="parcelamento" style="display:none"> 
        <td>Parcelar em</td>
        <td>
            <select id="n-parcelas">
                <option></option>
                <option value="2" selected>2x</option>
                <option value="3">3x</option>
                <option value="4">4x</option>
            </select>
        </td>
    </tr>
    
    <tr id="parcelas" style="display:none">
        <td>
            <input type="text" name="parcela[]" value="">
            <input type="date" value="">
       	</td>
        <td>
            <input type="text" name="parcela[]" value="">
            <input type="date" value="">
       	</td>
    </tr>
    </tbody>
    </table>
    </body>

3
  • O resultado desse calculo é para aparecer onde? E qual é o calculo? Dá um exemplo sff
    – Miguel
    24/12/2016 às 20:06
  • jsfiddle.net/wnm3jhr7, nos inputs.
    – lucasbento
    24/12/2016 às 20:23
  • Você só precisa criar uma função que pegue o valor total e divida pelo número de parcelas.
    – relaxeaza
    24/12/2016 às 21:27

2 Respostas 2

7

Fiz uma função aqui para gerar o valor das parcelas e os inputs, roda ai. Espero ter ajudado. Comentei o código, qualquer duvida comente ai!!

//Funcao para atualizar as parcelas e seus valores
 function atualizaValores(){
  // pegando a quantidade de parcelas
   var valor=$("#n-parcelas").val();

  //variavel que recebe os inputs(HTML)
   var geraInputs="";

  //Calculando o valor de cada parcela
   var valorParcela=parseFloat($(".total").val()/valor).toFixed(2);
  
  //gerando os inputs com os valores de cada parcela
   for(var i=0; i<valor;i++){
   geraInputs+="<td> <input type='text' name='parcela[]' value='"+valorParcela+"'>  <input type='date' value=''></td>";
   }

    // inserindo as parcelas 
    $("#parcelas").html(geraInputs);
   }

$(document).ready(function(e) {
	$(".total").on('change keyup keydown keypress',function(){
    // ao alterar o valor total, chama a funcao para alterar as parcelas
    atualizaValores();

  
  });
	$('#condicao-pag').on('change', 'select', function() {
  // ao alterar a condicao de pagamento,chama a funcao para alterar as parcelas
  atualizaValores();
		if($(this).val() == 1){
			$('#parcelamento').show();
			/*Calcular valor das parcelas (2x, 3x, 4x) e preencher inputs*/
			$('#parcelas').show();
		}
		else{
			$('#parcelamento').hide();
			$('#parcelas').hide();
			$("input[name='parcela[]']").val('');
		}
	})
		  
	$('#n-parcelas').on('change', function() {
		/*Calcular valor das parcelas (2x, 3x, 4x) e preencher inputs*/
 //Ao alterar a quantidade e parcelas chama a funcao para alterar as parcelas
  atualizaValores();
	});
	
  
  
	});
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
    <td><label>Total R$</label></td>
    <td><input type="number" min="0" class="total" value="100" /></td>
</tr>
<tr name="condicao-pag" id="condicao-pag">
    <td><label>Condição de pagamento:</label></td>
    <td>
        <select/>
            <option value=0>À vista</option>
            <option value=1>À prazo</option>
            <option value=2>Outros</option>
        </select>
    </td>
</tr>
<tr id="parcelamento" style="display:none"> 
    <td>Parcelar em</td>
    <td>
        <select id="n-parcelas">
            <option></option>
            <option value="2" selected>2x</option>
            <option value="3">3x</option>
            <option value="4">4x</option>
        </select>
    </td>
</tr>

<tr id="parcelas" style="display:none">

  
</tr>
</tbody>
</table>
</body>

1
  • Obrigado @localhost, exatamente o que estava precisando!
    – lucasbento
    25/12/2016 às 3:09
0

Quase certo, só falta ajustar o detalhe das parcelas com dízima periódica, ou seja, se você tentar dividir 200,00 por 3 parcelas, do jeito que o código está vai dar 3x de 66,67 que dará um total de 200,01 e não 200,00.

O certo seria a primeira e a segunda parcela ficarem com 66,66 e a terceira 66,68.

Tô tentando resolver essa charada aqui.

Abs!

//Funcao para atualizar as parcelas e seus valores
 function atualizaValores(){
  // pegando a quantidade de parcelas
   var valor=$("#n-parcelas").val();

  //variavel que recebe os inputs(HTML)
   var geraInputs="";

  //Calculando o valor de cada parcela
   var valorParcela=parseFloat($(".total").val()/valor).toFixed(2);
  
  //gerando os inputs com os valores de cada parcela
   for(var i=0; i<valor;i++){
   geraInputs+="<td> <input type='text' name='parcela[]' value='"+valorParcela+"'>  <input type='date' value=''></td>";
   }

    // inserindo as parcelas 
    $("#parcelas").html(geraInputs);
   }

$(document).ready(function(e) {
	$(".total").on('change keyup keydown keypress',function(){
    // ao alterar o valor total, chama a funcao para alterar as parcelas
    atualizaValores();

  
  });
	$('#condicao-pag').on('change', 'select', function() {
  // ao alterar a condicao de pagamento,chama a funcao para alterar as parcelas
  atualizaValores();
		if($(this).val() == 1){
			$('#parcelamento').show();
			/*Calcular valor das parcelas (2x, 3x, 4x) e preencher inputs*/
			$('#parcelas').show();
		}
		else{
			$('#parcelamento').hide();
			$('#parcelas').hide();
			$("input[name='parcela[]']").val('');
		}
	})
		  
	$('#n-parcelas').on('change', function() {
		/*Calcular valor das parcelas (2x, 3x, 4x) e preencher inputs*/
 //Ao alterar a quantidade e parcelas chama a funcao para alterar as parcelas
  atualizaValores();
	});
	
  
  
	});
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
    <td><label>Total R$</label></td>
    <td><input type="number" min="0" class="total" value="100" /></td>
</tr>
<tr name="condicao-pag" id="condicao-pag">
    <td><label>Condição de pagamento:</label></td>
    <td>
        <select/>
            <option value=0>À vista</option>
            <option value=1>À prazo</option>
            <option value=2>Outros</option>
        </select>
    </td>
</tr>
<tr id="parcelamento" style="display:none"> 
    <td>Parcelar em</td>
    <td>
        <select id="n-parcelas">
            <option></option>
            <option value="2" selected>2x</option>
            <option value="3">3x</option>
            <option value="4">4x</option>
        </select>
    </td>
</tr>

<tr id="parcelas" style="display:none">

  
</tr>
</tbody>
</table>
</body>

4
  • Só coloque a resposta depois de solucionado o problema. Não simplesmente declare que existe um problema e copie a solução de outro. Se houver grandes diferenças de resposta, com código de ideias diferentes, coloque uma nova resposta. Caso contrário, edite a resposta existente com a melhoria implementada - não edite por editar respostas com a solução aceita sem as melhorias!
    – José
    2/11/2017 às 20:16
  • Existe uma norma de tentar não reviver perguntas velhas, principalmente se já possuem resposta aceita. Quando muito, edite a resposta com ressalvas ou faça uma que tenha melhoria significativa. E no seu caso, você provavelmente fez duas respostas. Isso não condiz com as regras e provavelmente foi deletado o mais novo (sempre edite sua resposta se precisar). Tudo isso pode ser observado no "tour" e em páginas de ajuda e conduta. E o código funcional você pode colocar nessa resposta sua (clique no botão editar). Também não é correto ofender ninguém, OK? Sempre existe diálogo, bem como regras.
    – José
    4/11/2017 às 0:26
  • OK, José. Então eu encontro uma solução que está incorreta (100,00 dividido por 3 parcelas dá duas de 33,33 + 1 de 33,34 e não três de 33,33), corrijo o erro, posto aqui a solução e eu estou agindo errado? Já parou pra pensar no problema que um programador novado pode enfrentar se ele usar essa solução incorreta no e-commerce de um de seus clientes? Eu vi o erro, corrigi e vim aqui postar a correção porque pensei: "Alguém pode se ferrar se usar esse código sem a correção". Além disso, uma pergunta com menos de 1 ano não é velha. Me desculpe se o ofendi. Abs!
    – Ogait
    5/11/2017 às 12:11
  • A quem possa interessar, aqui está mais uma vez o código CORRETO, como deve ser, colocando ou retirando as sobras na última parcela caso o resultado da divisão dê em dízima periódica: fiddle.jshell.net/6b61L4z3/82
    – Ogait
    5/11/2017 às 12:15

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 .