How to calculate parcels (R$) and fill in inputs?

Asked

Viewed 3,233 times

6

I would like help to implement the plot calculation and fill/create inputs according to the number of plots.

Code below and in 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>

javascript jquery html html5

  • The result of this calculation is to appear where? And what is the calculation? Give an example sff

  • https://jsfiddle.net/wnm3jhr7/, in inputs.

  • You just need to create a function that takes the total value and divides by the number of installments.

2 answers

7


I made a function here to generate the value of parcels and inputs, run ai. I hope to have helped. I commented the code, any doubts comment 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>

  • Thanks @localhost, exactly what I needed!

0

Almost certain, just need to adjust the detail of the parcels with periodic tithe, IE, if you try to divide 200,00 by 3 installments, the way the code is going to give 3x 66,67 that will give a total of 200,01 and not 200,00.

The right one would be the first and the second portion would be 66.66 and the third 66.68.

I’m trying to solve this puzzle here.

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>

  • Only put the answer after solving the problem. Don’t simply declare that there is a problem and copy the solution from another. If there are big differences of response, with code of different ideas, put a new answer. Otherwise, edit the existing response with the improvement implemented - do not edit by editing replies with the solution accept without the improvements!

  • There is a rule of trying not to relive old questions, especially if they already have accepted answers. If anything, edit the response with caveats or make one that has significant improvement. And in your case, you probably made two responses. This does not match the rules and probably the newest one has been deleted (always edit your answer if you need to). All of this can be seen in the "tour" and help and conduct pages. And the functional code you can put in this answer yours (click the edit button). It is also not correct to offend anyone, OK? There is always dialogue, as well as rules.

  • All right, Jose. So I find a solution that is incorrect (100,00 divided by 3 installments gives two of 33,33 + 1 of 33,34 and not three of 33,33), correct the error, put here the solution and I am acting wrong? Ever stop to think about the problem that a new programmer might face if he uses this incorrect solution in the e-commerce of one of his customers? I saw the error, corrected it and came here to post the correction because I thought: "Someone can get screwed if you use this code without the correction". Also, a question less than 1 year old is not old. I’m sorry if I offended you. Abs!

  • To whom it may interest, here is once again the CORRECT code, as it should be, putting or removing the leftovers in the last installment if the result of the division gives in periodic tithe: fiddle.jshell.net/6b61L4z3/82

Browser other questions tagged javascript jquery html html5

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