Calculate the remaining amount of each installment, depending on the number of installments

Question

Calculate the remaining amount of each installment, depending on the number of installments

Navigation

#1 by (0 votes)

1

I want to calculate the remaining amount after each installment here this part of the code in the part of "Forms of payment" is where I want to do it, when selecting the amount of installments the rows are generated with the amount of the quota and the amount remaining that I want to calculate but I could not

$(document).ready(function() {

  // var doc = new jsPDF();
  // var specialElementHandlers = {
  //     '#editor': function (element, renderer) {
  //         return true;
  //     }
  // };

  // $('#btn-pdf').click(function () {   
  //     doc.fromHTML($('#tab_pre').html(), 40, 40, {
  //         'width': 1000,
  //             'elementHandlers': specialElementHandlers
  //     });
  //     doc.save('sample-file.pdf');
  // });
  // 
  // 



  // function cargarselectmat(){
  // 	$(".selecmat").val("");
  // 		var select = "bienes";
  // 		var estacion = $(".")
  // 		$.ajax({
  // 		 url:"sql/select.php",
  // 		 type:'POST',
  // 		 dataType:'json',
  // 		 data: {
  // 		 	select:select,

  // 		 },
  // 		 success: function(response)
  // 		 {
  // 		   $('.selecmat').html(response);
  // 		 }
  // 	});
  // }



  // $("#add").click(function(){



  //     var tds=$("#tab_pre tr:first td").length;
  //     // Obtenemos el total de columnas (tr) del id "tabla"
  //     var trs=$("#tab_pre tr").length;
  //     trs = trs - 1; 
  //     var tr = "tr";

  //     var n = trs + 1;
  // 	var selectubicacion=('<select name="" id="selubc'+n+'" class="form-control form-control-sm selecestac"></select>');
  // 	var codigodelbien=('<select name="" id="selcodbn'+n+'" class="form-control form-control-sm seleccodbn"></select>');
  // 	var cantidad=('<input type="text" id="cantidad'+n+'" class="form-control form-control-sm">');
  // 	var descripcion = ('<input type="text" id="desc'+n+'" class="form-control form-control-sm">');
  // 	var material = ('<select name="" id="selmat'+n+'" class="form-control form-control-sm selecmat"></select>');
  // 	var precio = ('<input type="text" id="precio'+n+'" class="form-control form-control-sm">');
  // 	var pre = ('<input type="text" id="meses'+n+'" class="form-control form-control-sm">');
  // 	var total = ('<input type="text" id="total'+n+'" class="form-control form-control-sm">');
  // 	var ancho = ('<input type="text" id="ancho'+n+'" class="form-control form-control-sm">');
  // 	var alto = ('<input type="text" id="alto'+n+'" class="form-control form-control-sm">');

  //     var nuevaFila="<tr id='"+tr+""+trs+"'>";
  //     for(var i=0;i<tds;i++){
  //         // añadimos las columnas
  //         // nuevaFila+="<td>columna "+(i+1)+" Añadida con jquery</td>";
  //     }
  //     // Añadimos una columna con el numero total de columnas.
  //     // Añadimos uno al total, ya que cuando cargamos los valores para la
  //     // columna, todavia no esta añadida

  //     nuevaFila+='<td><h6>'+n+'</h6 ></td>';
  //     nuevaFila+='<td>'+selectubicacion+'</td>';
  //     nuevaFila+="<td>"+codigodelbien+"</td>";
  //     nuevaFila+="<td>"+cantidad+"</td>";
  //     nuevaFila+="<td>"+descripcion+"</td>";
  //     nuevaFila+="<td>"+material+"</td>";
  //     nuevaFila+="<td>"+(trs+1)+"</td>";
  //     nuevaFila+="<td>"+(trs+1)+"</td>";
  //     nuevaFila+="<td>"+precio+"</td>";
  //     nuevaFila+="<td>"+meses+"</td>";
  //     nuevaFila+="<td>"+total+"</td>";
  //     nuevaFila+="</tr>";

  // 	$("#selubc"+n+"").val("");
  // 		var select = "estaciones";
  // 		$.ajax({
  // 		 url:"sql/select.php",
  // 		 type:'POST',
  // 		 dataType:'json',
  // 		 data: {select:select},
  // 		 success: function(response)
  // 		 {
  // 		  $("#selubc"+n+"").html(response);

  // 		 }

  // 	});

  //     $("#tab_pre").append(nuevaFila);

  // });




  // $("#remov").click(function(){

  // 	$("#tab_pre tr:last").remove();
  // });

  $("#ubic").val("");
  var select = "estaciones";
  $.ajax({
    url: "sql/select.php",
    type: 'POST',
    dataType: 'json',
    data: {
      select: select
    },
    success: function(response) {
      $("#ubic").html(response);

    }

  });


  $("#mat").val("");
  var select = "materiales";
  $.ajax({
    url: "sql/select.php",
    type: 'POST',
    dataType: 'json',
    data: {
      select: select
    },
    success: function(response) {
      $("#mat").html(response);

    }

  });





  $("#codb").blur(function(event) {
    var accion = "buscar_bien";
    var bien = $("#codb").val();
    $.ajax({
        url: 'sql/gst_pre.php',
        type: 'POST',
        dataType: 'json',
        data: {
          bien: bien,
          accion: accion
        },
      })
      .done(function(data) {
        if ((data.result) = 1) {
          $("#anc").val(data.anc);
          $("#alt").val(data.alt);
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  });

  $("#meex").change(function(event) {
    var total;
    var meses = $("#meex").val();
    var pre = $("#pre").val();
    total = parseFloat(meses * pre);
    $("#total").val(total);
  });


  $("#btn-actualizar").click(function(event) {

  });

  $("#add").click(function() {
    // && $("#desc").val()!=""
    // if ($("#ubic").val()!="" && $("#codb").val()!="" && $("#codb").val()!="" && $("#cant").val()!=""  && $("#mat").val()!="" && $("#anc").val()!="" && $("#alt").val()!="" && $("#pre").val()!="" && $("#meex").val()!="" && $("#total").val()!="") {
    addData();
    // }else{
    // 	swal("Error!", "Para poder generar mas columnas es necesario \n No dejar campos vacios", "error");
    // }

    function addData() {
      var tds = $("#tab_pre tr:first td").length;
      var trs = $("#tab_pre tr").length;
      //var sum= 0;
      var suma = 0;
      var n = trs - 2;
      trs = trs - 2;



      var markup = "<tr id='tr" + n + "'>";

      var dat = $("#ubic").val();
      var ubic = dat.substr(1);

      var codb = $("#codb").val();
      var cant = $("#cant").val();
      var desc = $("#desc").val();

      var mat = $("#mat").val();
      mat = mat.substr(1);

      var anc = $("#anc").val();
      var alt = $("#alt").val();
      var pre = $("#pre").val();
      var meex = $("#meex").val();
      var total = $("#total").val();

      markup += "<td width='4%'><input type='checkbox' class='form-control' name='record'></td>";
      markup += "<td>" + n + "</td>";
      markup += "<td>" + ubic + "</td>";
      markup += "<td>" + codb + "</td>";
      markup += "<td>" + cant + "</td>";
      markup += "<td>" + desc + "</td>";
      markup += "<td>" + mat + "</td>";
      markup += "<td>" + anc + "</td>";
      markup += "<td>" + alt + "</td>";
      markup += "<td>" + pre + "</td>";
      markup += "<td>" + meex + "</td>";
      markup += "<td class='total'>" + total + "</td>";

      markup += "</tr>";

      $("#tab_pre tbody").append(markup);
      for (var i = 0; i < trs; i++) {

        // 	$('#tab_pre .total').each(function(){

        // 		sum = parseFloat($(this).text()); 

        // 	});
        // suma = suma + sum;
      }
      //alert(suma);
      //$("#sub-total").val(suma);

      $("#ubic").val("");
      $("#codb").val("");
      $("#cant").val("");
      $("#desc").val("");
      $("#mat").val("");
      $("#anc").val("");
      $("#alt").val("");
      $("#pre").val("");
      $("#meex").val("");
      $("#total").val("");
    }
    calcular();
  });





  function calcular() {

    var suma = 0;
    $(".total").each(function() {
      suma += parseFloat($(this).html()) || 0;
    });
    $("#sub-total").val(suma);

  }



  // Find and remove selected table rows
  $("#rmv").click(function() {
    $("#tab_pre tbody").find('input[name="record"]').each(function() {
      if ($(this).is(":checked")) {
        $(this).parents("tr").remove();
      }
    });

    calcular();
  });


  // $("#btn-actualizar").click(function(event) {

  // var table = $("#tab_pre").html();
  // alert(table);	
  // });


  $("#cuotas").change(function(event) {

    $("#pagos tbody tr").remove();

    var cuotas = $("#cuotas").val();
    //var subtotal = $("#sub-total").val();




    var tds = $("#pagos tr:first td").length;
    var trs = $("#pagos tr").length;
    var j = 0;
    var n = trs;
    var res = 0;

    var subtotal = 1000;
    var resul = (subtotal) / (cuotas);

    for (var i = 0; i < cuotas; i++) {
      j = j + 1;

      res -= resul;
      //alert(res);
       var row="<tr>";
       row += "<td width='4%'>"+j+"</td>";
       row += "<td>Cuota "+j+" de "+cuotas+"</td>";
       row += "<td>"+resul+"</td>";
       row += "<td>"+res+"</td>";
       row += "<td>HI4</td>";
       row +="</tr>";

      $("#pagos tbody").append(row);

      //alert("sub" +subtotal+ "resul" +resul+ "rest" +rest+ "res" +res );
    }






  });


});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <!-- Favicons -->
  <!--     <link rel="apple-touch-icon" href="./assets/img/kit/free/apple-icon.png">
    <link rel="icon" href="./assets/img/kit/free/favicon.png"> -->
  <title>
    Sistema de Comercialización
  </title>
  <!--     Fonts and icons     -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <link rel="stylesheet" href="css/jquery-ui.min.css">
  <link rel="stylesheet" href="css/jquery-ui.structure.min.css">
  <link rel="stylesheet" href="css/jquery-ui.theme.min.css">

</head>

<body class="bg-light">

  <?php include("nav/nav.php"); ?>


  <div class="container">

    <div class="card card-nav-tabs">
      <!--       <div class="card-header card-header-primary">
        Featured  
      </div> -->
      <div class="card-body">
        <h2 class="card-title">Gestión de presupuestos</h2>
        <p class="card-text">
          <!-- Nombre -->
        </p>


        <form action="#" accept-charset="utf-8" id="gst_pre">
          <div class="row">
            <div class="form-group col-lg-4">
              <label for="buscador">Buscar</label>
              <div class="input-group">
                <input type="text" class="form-control form-control-sm alfa" id="buscador" placeholder="Buscar presupuesto">
                <button class="btn btn-primary btn-sm" id="buscar">Buscar</button>
              </div>
            </div>
            <div class="form-group col-lg-3">
              <label for="cod">* Código</label>
              <input type="text" class="form-control form-control-sm codigo" id="cod" placeholder="Código del presupuesto" disabled>
            </div>

            <div class="form-group col-lg-2">
              <label for="fecha">* Fecha</label>
              <input type="text" class="form-control form-control-sm" id="fecha" placeholder="Fecha de elaboración">
            </div>


            <div class="form-group col-lg-3">
              <label for="dur">* Duración</label>
              <input type="text" class="form-control form-control-sm" id="dur" placeholder="Lapso de negociación">
            </div>

            <div class="form-group col-lg-6">
              <label for="cod">* Nombre del Anunciante</label>
              <input type="text" class="form-control form-control-sm codigo" id="cod" placeholder="Nombre del anunciante" disabled>
            </div>

            <div class="form-group col-lg-3">
              <label for="cod">* RIF</label>
              <input type="text" class="form-control form-control-sm codigo" id="cod" placeholder="Rif" disabled>
            </div>

            <div class="form-group col-lg-3">
              <label for="cod">* Exp</label>
              <input type="text" class="form-control form-control-sm codigo" id="cod" placeholder="Código del expediente" disabled>
            </div>

          </div>
        </form>


        <table class="table table-sm table-bordered" style="font-size: 11px" id="tab_pre">
          <thead class="thead-dark">
            <tr>
              <th scope="col" width="4%">Check</th>
              <th scope="col">#</th>
              <th scope="col" width="15%">Ubicación</th>
              <th scope="col" width="14%">Código del bien</th>
              <th scope="col" width="5%">Cantidad</th>
              <th scope="col">Descripción</th>
              <th scope="col" width="15%">Material a utilizar</th>
              <th scope="col">Ancho (M)</th>
              <th scope="col">Alto (M)</th>
              <th scope="col" width="10%">Precio Mensual</th>
              <th scope="col" width="5%">Meses a Exhibir</th>
              <th scope="col" width="10%">Total</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th colspan="4" class="text-right">TOTAL:</th>
              <td>
                <input type="text" id="" class="form-control form-control-sm" disabled>
              </td>
              <th colspan="6" class="text-right">SUB-TOTAL</th>
              <td>
                <input type="text" id="sub-total" class="form-control form-control-sm" disabled>
              </td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <th>
                <!-- <input type='checkbox' name='record'> -->
              </th>
              <th scope="row"></th>
              <td>
                <select id="ubic" class="form-control form-control-sm"></select>
              </td>
              <td>
                <input type="text" id="codb" class="form-control form-control-sm">
              </td>
              <td>
                <input type="text" id="cant" class="form-control form-control-sm">
              </td>
              <td>
                <input type="text" id="desc" class="form-control form-control-sm">
              </td>
              <td>
                <select name="" id="mat" class="form-control form-control-sm">
                </select>
              </td>
              <td>
                <input type="text" id="anc" class="form-control form-control-sm">
              </td>
              <td>
                <input type="text" id="alt" class="form-control form-control-sm">
              </td>
              <td>
                <input type="text" id="pre" class="form-control form-control-sm">
              </td>
              <td>
                <input type="text" id="meex" class="form-control form-control-sm">
              </td>
              <td>
                <input type="text" id="total" class="form-control form-control-sm" disabled>
              </td>

            </tr>
          </tbody>
        </table>
        <div class="btn-group">
          <button id="add" class="btn btn-primary btn-sm">Agregar</button>
          <button id="rmv" class="btn btn-danger btn-sm">Eliminar</button>
        </div>
        <hr>
        <div class="row">
          <div class="input-group col-lg-12">
            <label for="imp">Importe total en letras: </label>
            <input type="text" class="form-control form-control-sm">
          </div>
        </div>
        <hr>

        <div class="row">
          <div class="col-lg-3 ">
            <h6>Formas de pago del servicio:</h6>
          </div>
          <div class="input-group col-lg-3 offset-lg-6">
            <label for="imp">Cantidad de cuotas: </label>
            <select name="" id="cuotas" class="form-control form-control-sm">
                    <option value="" selected>seleccione</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                  </select>
          </div>
        </div>

        <table class="table table-sm table-bordered" id="pagos" style="font-size: 11px">
          <thead class="thead-dark">
            <tr>
              <th scope="col" width="5%">#</th>
              <th scope="col" width="20%">Concepto</th>
              <th scope="col" width="20%">Monto</th>
              <th scope="col">Monto restante</th>
              <th scope="col">Fecha correspondiente de pago</th>
            </tr>
          </thead>
          <tbody>
            <!--             <tr>
              <td width='4%'>1</td>
              <td id="concepto"></td>
              <td id="monto"></td>
              <td id="monrest"></td>
              <td id="fechpag"></td>
            </tr> -->
          </tbody>
        </table>



        <div class="col-lg-auto text-center" style="font-size: 12px">
          IVA Y COSTO DE PRODUCCION NO INCLUIDO
          <br> Estos espacios están sujetos a cambio sin previo aviso

        </div>
        <hr>
        <div class="row">
          <div class="col text-center" style="font-size: 12px">
            <label for="elab_by">Elaborado por:</label>
            <input type="text" id="elab_by" class="form-control form-control-sm" value="T.S.U José Velíz">
            <br>
            <input type="text" id="" class="form-control form-control-sm" value="Analista de Negocios B">
          </div>

          <div class="col text-center" style="font-size: 12px">
            <label for="revi_by">Revisado por:</label>
            <input type="text" id="revi_by" class="form-control form-control-sm" value="T.S.U Luzmary Lacruz">
            <br> <input type="text" id="" class="form-control form-control-sm" value="Coordinadora de Negocios">
          </div>

          <div class="col text-center" style="font-size: 12px">
            <label for="apro_by">Aprobado por:</label>
            <input type="text" id="apro_by" class="form-control form-control-sm" value="Ing. María Carrabs">
            <br>
            <input type="text" id="" class="form-control form-control-sm" value="Gerente de  Mercadeo y Comercialización">
          </div>

        </div>
        <hr>
        <div class="col-lg-auto text-center" style="font-size: 12px">
          Av. Sesquicentenaria, Parque Recreacional Sur, Parte Sur Oeste S/N Zona Valencia Sur, Estado Carabobo Venezuela, Telf. +58(241)8740400 al 8740410. www.metrovalencia.gob.ve

        </div>
      </div>
    </div>
    <div class="btn-group">
      <button id="btn-guardar" class="btn btn-success btn-sm">Guardar</button>
      <button id="btn-actualizar" class="btn btn-primary btn-sm">Actualizar</button>
      <button id="btn-pdf" class="btn btn-danger btn-sm">PDF</button>
    </div>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    
    

    <!--<script defer src="script/validador.js"></script>
 <script defer src="script/select.js"></script> 
<script defer src="js/jquery-ui.min.js"></script> 

<script defer src="script/gst_pre.js"></script> -->



</body>

</html>

javascript jquery

asked by Luis Alfredo SV 17.04.2018 в 16:31

source

1 answer

how to add cells of all the pages with datatable Problem creating a Stored Procedure in Mysql

score 0 · Accepted Answer

You can calculate it in the following way assuming that you already have the value of the amount and the amount of installments:

EDIT I saw the part of your code where you do the calculation and update according to your code.

$("#cuotas").change(function(event) {

    $("#pagos tbody tr").remove();

    var cuotas = $("#cuotas").val();
    var subtotal = $("#sub-total").val();

    var resul = subtotal / cuotas;

    for (var i = 0; i < cuotas; i++) {

      	var res = subtotal-resul*(i+1);

       	var row="<tr>";
       	row += "<td width='4%'>"+(i+1)+"</td>";
       	row += "<td>Cuota "+(i+1)+" de "+cuotas+"</td>";
       	row += "<td>"+resul.toFixed(2)+"</td>";
       	row += "<td>"+res.toFixed(2)+"</td>";
       	row += "<td>HI4</td>";
       	row +="</tr>";

      	$("#pagos tbody").append(row);

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cuotas">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<input type="text" name="subtotal" id="sub-total" value=10000>
<div id="pagos">
<table class="table">
<thead>
  <th>#</th>
  <th>concepto</th>
  <th>monto</th>
  <th>monto restante</th>
  <th>fecha pago</th>
</thead>
<tbody></tbody>
</table>

Greetings!