by placing plot value in dynamically created input

Asked

Viewed 330 times

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, only when the account is not exact it is not certain. I researched a lot and found this code that does what I want more 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);

created an example in order to better understand: https://jsfiddle.net/opeta/jd0dth86/6/

javascript jquery
  • 1

    You have a full JS splitting code here: http://answall.com/questions/162532/70

  • @Bacco this code has fixed installments with interest. in my case the parcels will vary, the number of parcels will be the quantity of inputs and in the example above in the case of 3 parcels would be Parc. 1 = 73.34, Parc. 2 = 73.33, Parc. 3 = 73.33

2 answers

1


I came back to give my solution to the problem, there was 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>

follows the 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 you help someone else, I leave here also jsfiddle:

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

  • +1 for the effort to help...

0

I made an edit, I don’t know if it’s what you’re looking for.

The code is commented, any doubt comments that we adjust.

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>

  • the days field calculates the due date. for example there the installments are not the full month but on days example. 28, 35, 42, 55 days

  • value in days #days is summed in field #datasale and shown the result in field #venc maturity

  • We’re starting to speak the same language...

  • then delete some comments to not characterize chat. People complain :( think there is a way to do the code?

Browser other questions tagged javascript jquery

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