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

Question

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

Navigation

#1 by (6 votes)
#2 by (0 votes)

5

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

Code below and link :

 $(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><inputtype="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 html jquery html5

asked by anonymous 24.12.2016 / 21:05

2 answers

0

Almost certainly, it is only necessary to adjust the detail of the plots with periodic tithe, that is, if you try to divide 200.00 by 3 plots, the way the code is going to give 3x from 66.67 which will give a total of 200 , 01 and not 200.00.

The first and second installments would be 66.66 and the third would be 66.68.

I'm trying to solve this riddle 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>TotalR$</label></td><td><inputtype="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>

02.11.2017 / 19:36

How do I switch between the next element and the previous element of a ListIterator with just one click? How to get parameters in the URL through AngularJS

score 6 · Accepted Answer

I did a function here to generate the value of the plots and the inputs, rotate there. Hope this helps. I commented the code, any doubt commented on it !!

//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>TotalR$</label></td><td><inputtype="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>