putting parcel value into dynamically created input

0

I have the following code:

    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();  
      });

The code works very well the problem is that I wanted the parcels to be filled automatically, but when the account is not accurate, it does not work. I researched a lot and found this code that does what I want most I can not adapt:

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);

I created an example in the for better understanding: link

    
asked by anonymous 07.12.2016 / 23:19

2 answers

1

I came back to give my solution to the problem, did not stay something spectacular more works.

follow the form

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> 

follow 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]);

    }
    }
      });

I hope it helps someone else, I leave here also jsfiddle:

link

    
10.12.2016 / 04:09
0

I made an edit, I do not know if it's what you're looking for.

The code is commented, any question comments that we adjusted.

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>
    
08.12.2016 / 01:26