0

Tenho o seguinte código:

    Total: <input type="text" class="form-control" id="total" name="total" value="220,00" disabled="disabled"> Data: 
<input type="text" class="form-control data" id="datavenda" name="datavenda" value="07/12/2016" disabled="disabled">
    <table class="table" width="100%" id="dynamic_field">  
                                        <tr> 

                                             <td>Dias:</td>
                                             <td><input name="dias[]" id="dias" type="text" value="" class="form-control" style="width: 40px" /></td>  
                                             <td>Venc.:</td>  
                                             <td><input name="vencimento[]" id="venc" type="text" value="" class="form-control data" style="width: 91px" /></td> 
                                             <td>Parc.:</td>  
                                             <td><input name="parcela[]" id="parc" type="text" value="" class="form-control" style="width: 65px" /></td>
                                             <td>Pag.:</td>
                                             <td><select name="pagamento[]" class="form-control">

                                <option value="1">BOLETO BANCÁRIO</option>
                         <option value="2">DINHEIRO</option>
                         <option value="3">CHEQUE</option>
                         <option value="4">CARTÃO</option>

                                </select></td> 
                                             <td><a id="adicionar" class="btn btn-success" title="Adicionar data de início e término">ADICIONAR</a></td>
                                        </tr>  
                                   </table>  

jquery

$("#dias").on("keyup", function(){
        var data = $("#datavenda").val();
        var dias = $("#dias").val();
        dias = parseInt(dias);
        var dmy = data.split("/");
        var joindate = new Date(
        parseInt(
            dmy[2], 10),
            parseInt(dmy[1], 10) - 1,
            parseInt(dmy[0], 10)
        );

        joindate.setDate(joindate.getDate() + dias);

        $("#venc").val(
            ("0" + joindate.getDate()).slice(-2) + "/" +
            ("0" + (joindate.getMonth() + 1)).slice(-2) + "/" + 
            joindate.getFullYear()
        );

       });

var i=1;  
      $('a#adicionar').click(function(){  
           i++;  
   $('#dynamic_field').append('<tr id="row'+i+'"><td>Dias:</td><td><input name="dias[]" id="dias'+i+'" type="text" value="" style="width: 40px" class="form-control" /></td><td>Venc.:</td><td><input name="vencimento[]" id="venc'+i+'" type="text" value="" style="width: 95px" class="form-control data" /></td><td>Parc.:</td><td><input name="parcela[]" id="parc'+i+'" type="text" value="" class="form-control" style="width: 65px" /></td><td>Pag.:</td><td><select name="pagamento[]" class="form-control"><option value="1">BOLETO BANCÁRIO</option><option value="2">DINHEIRO</option><option value="3">CHEQUE</option><option value="4">CARTÃO</option> </select></td><td><a name="remove" id="'+i+'" class="btn btn-danger btn_remove">REMOVER</a></td></tr>');

        $("#dias"+i+"").on("keyup", function(){
        var data = $("#datavenda").val();
        var dias = $("#dias"+i+"").val();
        dias = parseInt(dias);
        var dmy = data.split("/");
        var joindate = new Date(
        parseInt(
            dmy[2], 10),
            parseInt(dmy[1], 10) - 1,
            parseInt(dmy[0], 10)
        );

        joindate.setDate(joindate.getDate() + dias);

        $("#venc"+i+"").val(
            ("0" + joindate.getDate()).slice(-2) + "/" +
            ("0" + (joindate.getMonth() + 1)).slice(-2) + "/" + 
            joindate.getFullYear()
        );

       });

           $("#dias"+i+"").focus();
      });  
      $(document).on('click', 'a.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });

o código funciona muito bem o problema é que eu queria que as parcelas fossem preenchidas automaticamente, só que quando a conta não é exata não da certo. Pesquisei muito e encontrei este código que faz o que eu quero mais não consigo adaptar:

var parcelas = new Array();
    var valor = 220;
    var numero_parcelas = 3;
    var soma = 0;

    for(var i = 0; i < numero_parcelas; i++ )
    {
        var divisao = valor / numero_parcelas;

        if(i != 0)
            soma += parseFloat(divisao.toFixed(2));

        parcelas.push(parseFloat(divisao.toFixed(2)));
    }

    if(soma > 0)
        parcelas[0] = parseFloat((valor - soma).toFixed(2));

    alert(parcelas);

criei um exemplo no para melhor compreensão: https://jsfiddle.net/opeta/jd0dth86/6/

2
  • 1
    Tem um código completo de parcelamento em JS aqui: pt.stackoverflow.com/questions/162532/70
    – Largato
    Commented 7/12/2016 às 23:36
  • @Bacco este código tem parcelas fixas e com juros. no meu caso as parcelas vão variar, o numero de parcelas será a quantidade de inputs e no exemplo acima no caso de 3 parcelas seria parc. 1 = 73.34, parc. 2 = 73.33, parc. 3 = 73.33
    – opeta
    Commented 8/12/2016 às 0:06

2 Respostas 2

1

Voltei para dar minha solução para o problema, não ficou algo espetacular mais funciona.

segue o formulário

Total: <input type="text" class="form-control" id="total" name="total" value="220.00" disabled="disabled"> Data: 
<input type="text" class="form-control data" id="datavenda" name="datavenda" value="07/12/2016" disabled="disabled">
<table class="table" width="100%" id="dynamic_field">  
                                    <tr> 

                                         <td>Dias:</td>
                                         <td><input name="dias[]" id="dias" type="text" value="" class="form-control" style="width: 40px" /></td>  
                                         <td>Venc.:</td>  
                                         <td><input name="vencimento[]" id="venc" type="text" value="" class="form-control data" style="width: 91px" disabled="disabled" /></td> 
                                         <td>Parc.:</td>  
                                         <td><input name="parcela[]" id="parc" type="text" value="" class="form-control" style="width: 65px" /></td>
                                         <td>Pag.:</td>
                                         <td><select name="pagamento[]" class="form-control">

                            <option value="1">BOLETO BANCÁRIO</option>
                     <option value="2">DINHEIRO</option>
                     <option value="3">CHEQUE</option>
                     <option value="4">CARTÃO</option>

                            </select></td> 
                                         <td><a id="adicionar" class="btn btn-success" title="Adicionar data de início e término">ADICIONAR</a></td>
                                    </tr>  
                               </table> 

segue o jquery

$("#total").val();  
$("#parc").val($("#total").val());

    $("#dias").on("keyup", function(){
        var data = $("#datavenda").val();
        var dias = $("#dias").val();
        dias = parseInt(dias);
        var dmy = data.split("/");
        var joindate = new Date(
        parseInt(
            dmy[2], 10),
            parseInt(dmy[1], 10) - 1,
            parseInt(dmy[0], 10)
        );

        joindate.setDate(joindate.getDate() + dias);

        $("#venc").val(
            ("0" + joindate.getDate()).slice(-2) + "/" +
            ("0" + (joindate.getMonth() + 1)).slice(-2) + "/" + 
            joindate.getFullYear()
        );

       });


var i=1;  
      $('a#adicionar').click(function(){  
           i++;  
        var valor = $("#total").val();    
   $('#dynamic_field').append('<tr id="row'+i+'"><td>Dias:</td><td><input name="dias[]" id="dias'+i+'" type="text" value="" style="width: 40px" class="form-control" /></td><td>Venc.:</td><td><input name="vencimento[]" id="venc'+i+'" type="text" value="" style="width: 95px" class="form-control data" disabled="disabled" /></td><td>Parc.:</td><td><input name="parcela[]" id="parc'+i+'" type="text" value="" class="form-control money" style="width: 65px" /></td><td>Pag.:</td><td><select name="pagamento[]" class="form-control"><option value="1">BOLETO BANCÁRIO</option><option value="2">DINHEIRO</option><option value="3">CHEQUE</option><option value="4">CARTÃO</option></select></td> <td><a name="remove" id="'+i+'" class="btn btn-danger btn_remove">REMOVER</a></td></tr>');
   var parcelas = new Array();


    var numero_parcelas = i;
    var soma = 0;

    for(var a = 0; a < numero_parcelas; a++ )
    {
        var divisao = valor / numero_parcelas;
        var p = a + 1;

        if(a != 0)
            soma += parseFloat(divisao.toFixed(2));

        parcelas.push(parseFloat(divisao.toFixed(2)));
        if(soma > 0){
        parcelas[0] = parseFloat((valor - soma).toFixed(2));        
        $("#parc").val(parcelas[0]);
        $("#parc"+p+"").val(parcelas[1]);

    }
    }

        $("#dias"+i+"").on("keyup", function(){
        var data = $("#datavenda").val();
        var dias = $("#dias"+i+"").val();
        dias = parseInt(dias);
        var dmy = data.split("/");
        var joindate = new Date(
        parseInt(
            dmy[2], 10),
            parseInt(dmy[1], 10) - 1,
            parseInt(dmy[0], 10)
        );

        joindate.setDate(joindate.getDate() + dias);

        $("#venc"+i+"").val(
            ("0" + joindate.getDate()).slice(-2) + "/" +
            ("0" + (joindate.getMonth() + 1)).slice(-2) + "/" + 
            joindate.getFullYear()
        );

       });
           $("#dias"+i+"").focus();
      });  
      $(document).on('click', 'a.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
              var parcelas = new Array();
    var valor = $("#total").val(); 
    var numero_parcelas = button_id - 1;
    var soma = 0;
    if (numero_parcelas == 1){
        $("#parc").val(valor);
    }
    for(var d = 0; d < numero_parcelas; d++ )
    {
        var divisao = valor / numero_parcelas;
        var p = d + 1;

        if(d != 0)
            soma += parseFloat(divisao.toFixed(2));

        parcelas.push(parseFloat(divisao.toFixed(2)));
        if(soma > 0){
        parcelas[0] = parseFloat((valor - soma).toFixed(2));        
        $("#parc").val(parcelas[0]);
        $("#parc"+p+"").val(parcelas[1]);

    }
    }
      });

espero que ajude mais alguém, deixo aqui também o jsfiddle:

https://jsfiddle.net/opeta/jd0dth86/8/

1
  • +1 pelo esforço em ajudar...
    – MagicHat
    Commented 3/01/2017 às 18:53
0

Fiz uma edição, não sei se é o que está procurando.

O código está comentado, qualquer dúvida comenta que ajustamos.

function start()
{
	var input_total = document.getElementById("input_total"),
	    input_datavenda = document.getElementById("input_datavenda"),
	    input_parcelas = document.getElementById("input_parcelas"),
	    input_venc = document.getElementById("input_venc"),
	    select_op = document.getElementById("select_op"),
	    boletos_set = document.getElementById("boletos_set"),
	    din_set = document.getElementById("din_set"),
	    id_index = 0;
	input_total.focus();
	input_total.placeholder = "Digite o total";
	input_total.onblur = function()
	{
		input_datavenda.focus();
		input_datavenda.placeholder = "Selecione vencimento"
	}
	input_datavenda.onblur = function()
	{
		input_parcelas.focus();
		input_parcelas.onblur = function()
		{
			input_venc.focus();
			input_venc.onblur = function()
			{
				select_op.focus();
				select_op.onchange = function()
				{
					/*Calculo Parcela*/
		  			input_total = parseFloat(input_total.value);
		  			input_parcelas = document.getElementById("input_parcelas").value;
		  			var divisao = parseFloat((input_total / input_parcelas).toFixed(2));
		  			for(i=0;i<input_parcelas;i++)
		                        {
		            	                /*Calculo Datas*/
		               	                var s_datavenda = new Date(input_datavenda.value);
		             	                s_datavenda.setUTCDate(s_datavenda.getUTCDate() + (parseInt(input_venc.value)));	
			           	        s_datavenda.setUTCMonth(s_datavenda.getUTCMonth() + id_index);
			           	        var dia = s_datavenda.getUTCDate();
				  		var mes = s_datavenda.getUTCMonth() + 1;
						var ano = s_datavenda.getUTCFullYear();
						/*Input dinamico com label*/
		                                var din_input_dt_venc = document.createElement("input");
			           	        var din_input_parc_num = document.createElement("input");
			                	var din_input_parc_val = document.createElement("input");
			                	var din_label_d_venc = document.createElement("Label");
			                	var din_label_dt_venc = document.createElement("Label");
			                 	var din_label_parc_num = document.createElement("Label");
			           	        var din_label_parc_val = document.createElement("Label");
		           		        id_index++;
		           		        din_input_dt_venc.type = "text";
		           		        din_input_dt_venc.id = "din_input_dt_venc" + id_index;
		           		        din_input_dt_venc.value = dia + "/" + mes +"/" + ano;
         		           		din_input_parc_num.type = "number";
		           		        din_input_parc_num.id = "din_input_parc_num" + id_index;
		                	        din_input_parc_num.value = id_index;
		                		din_input_parc_val.type = "number";
	                                        din_input_parc_val.id = "din_input_parc_val" + id_index;
    	           		                din_input_parc_val.value = divisao;
   		           	        	din_label_dt_venc.htmlFor = "d_venc"+id_index;
		  				din_label_dt_venc.appendChild(document.createTextNode("Data do Vencimento"));
		  				din_label_parc_num.htmlFor = "d_venc"+id_index;
		  				din_label_parc_num.appendChild(document.createTextNode("Nº parcela"));
		  				din_label_parc_val.htmlFor = "d_venc"+id_index;
		  				din_label_parc_val.appendChild(document.createTextNode("Valor parcela"));
		  				din_set.appendChild(din_label_dt_venc);
		  				din_set.appendChild(din_input_dt_venc);
		  				din_set.appendChild(din_label_parc_num);
		  				din_set.appendChild(din_input_parc_num);
		  				din_set.appendChild(din_label_parc_val);
		  				din_set.appendChild(din_input_parc_val);
		  				din_set.appendChild(document.createElement("br"));	
					}
				}	
			}
  		}
	}
}
input{margin:5px;}
<body onload="start()">
	<form>
		<fieldset>
			<legend>Controle de Boletos</legend></br>
			<label for="input_total">Total:</label>
			<input type="number" id="input_total"/>
			<label for="input_datavenda">Data Venda:</label> 
			<input type="text" id="input_datavenda" placeholder = "Selecione vencimento" onfocus="(this.type='date')"/>
			<label for="input_parcelas">Parcelas:</label> 
			<input type="number" id="input_parcelas" placeholder = "Digite o nº de parcelas"/>
			<label for="input_venc">Dias para o vencimento</label> 
			<input type="number" id="input_venc" placeholder = "Digite o dia do vencimento"/>
			<select id="select_op">
        		    <option value="1">BOLETO BANCÁRIO</option>
        		    <option value="2">DINHEIRO</option>
        		    <option value="3">CHEQUE</option>
        		    <option value="4">CARTÃO</option>
         	        </select><br/><br/><br/><br/>
			<hr/><br/>
			<fieldset id="boletos_set">
				<legend>Boletos :</legend>
				<fieldset id="din_set" style="border:none;">
					
				</fieldset>
			</fieldset>
			
		</fieldset>
	</form>
</body>

4
  • o campo dias calcula a data do vencimento. por exemplo lá as parcelas não são o mês completo e sim em dias exemplo. 28, 35, 42, 55 dias
    – opeta
    Commented 8/12/2016 às 1:40
  • o valor em dias #dias é somada campo #datavenda e mostrado o resultado no campo vencimento #venc
    – opeta
    Commented 8/12/2016 às 1:48
  • Estamos começando a falar a mesma língua...
    – MagicHat
    Commented 8/12/2016 às 1:51
  • depois apague alguns comentários para não caracterizar chat. O pessoal reclama :( acha que tem jeito de fazer o código?
    – opeta
    Commented 8/12/2016 às 3:44

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 .