1

Buen día, quisiera saber si alguien me puede dar una guía ya que estoy aprendiendo y no tengo idea como resolver esto:

Tengo una tabla que sirve para hacer solicitudes de producto, la idea es que el usuario pueda hacer cuantas solicitudes quiera, (puede ser una o varias), para esto utilicé una función que me agrega las filas según lo quieran.

Por otro lado, necesito que al insertar el código del producto, el programa devuelva la descripción y la vida útil, listo, necesito que cuando el usuario ingrese la fecha de fabricación el programa tome la vida útil, haga el cálculo y devuelva la fecha de vencimiento; hasta ahí bien, todo esto lo he logrado con javascript, pero el problema viene cuando se agrega la segunda fila para otra solicitud.

Es decir allí ya no hace el calculo para traer la fecha de vencimiento, no se como como complementar la función que agrega la fila con la que trae dicha fecha. agradezco cualquier aporte.

Este es el código que estoy trabajando:

<?php 
include "config.php";
?>
<!doctype html>
<html>
<head>

    <title>Ens AutoPopulate</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--script src="jquery-1.12.0.min.js" type="text/javascript"></script-->

    <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>



    <script type="text/javascript">
    //Inicialice autocompletar en el cuadro de texto del nombre de usuario cuando se active el keydownevento.
     //Definir source y select opciones en el autocomplete()método.
       $(document).ready(function(){


           $(document).on('keydown', '.codigoP', function producto() {//el evento keydown se aplica sobre el elemento con la calse "sites"

                var id = this.id;
                var splitid = id.split('_');
                var index = splitid[1];

                // Inicializar jQuery UI autocompletar
                $( '#'+id ).autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "getProducts.php",
                            type: 'post',
                            dataType: "json",
                            data: {
                                search: request.term,request:1
                            },
                            success: function( data ) {
                                response( data );

                            }
                        });
                    },

                    //seleccione: función (evento, interfaz de usuario)
                    select: function (event, ui) {
                        $(this).val(ui.item.label); //  muestra el texto seleccionado
                        var regid = ui.item.value; // valor seleccionado

                        // AJAX
                        $.ajax({
                            url: 'getProducts.php',
                            type: 'post',
                            data: {regid:regid,request:2},
                            dataType: 'json',
                            success:function(response){

                                var len = response.length;

                                if(len > 0){
                                    var id = response[0]['idProd'];
                                    var descripcion = response[0]['descripcionProd'];
                                    var vida = response[0]['vidaUtil'];


                                    // Establecer valor en cuadros de texto
                                    document.getElementById('descripcion_'+index).value = descripcion;
                                    document.getElementById('vidaUtil_'+index).value = vida;

                                }

                            }
                        });

                        return false;
                    }
                });
            });

//----------------------------------ETIQUETAS-------------------------------------------->
              $(document).on('keydown', '.codigoE', function producto() {//el evento keydown se aplica sobre el elemento con la calse "sites"

                var id = this.id;
                var splitid = id.split('_');
                var index = splitid[1];

                // Inicializar jQuery UI autocompletar
                $( '#'+id ).autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "getEtq.php",
                            type: 'post',
                            dataType: "json",
                            data: {
                                search: request.term,request:1
                            },
                            success: function( data ) {
                                response( data );
                            }
                        });
                    },

                    //seleccione: función (evento, interfaz de usuario)
                    select: function (event, ui) {
                        $(this).val(ui.item.label); //  muestra el texto seleccionado
                        var regid = ui.item.value; // valor seleccionado

                        // AJAX
                        $.ajax({
                            url: 'getEtq.php',
                            type: 'post',
                            data: {regid:regid,request:2},
                            dataType: 'json',
                            success:function(response){

                                var len = response.length;

                                if(len > 0){
                                    var idE = response[0]['id_etq'];
                                    var descripcionE = response[0]['descripcion_etq'];

                                    // Establecer valor en cuadros de texto
                                    document.getElementById('descripcionE_'+index).value = descripcionE;

                                }

                            }
                        });

                        return false;
                    }
                });
            });



//----------------------------------AGREGAR-------------------------------------------->

            // Add more
            $('#addmore').click(function add(){

                // Obtener la última identificación 
                var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
                var split_id = lastname_id.split('_');

                // Nuevo índice
                var index = Number(split_id[1]) + 1;

                // Crear fila con elementos de entrada
                var agregarfila = "<tr class='tr_input'><td><input type='text' class='codigoP' id='codigoP_"+index+"' placeholder='Enter código'></td><td><input type='text' class='descripcion' id='descripcion_"+index+"' ></td><td><input type='text' class='lote' id='lote_"+index+"' ></td><td><input type='date' class='ffab' id='ffab_"+index+"'></td><td><input type='text' class='fv' id='fv_"+index+"' ></td><td><input type='text' class='vidaUtil' id='vidaUtil_"+index+"' ></td><td><input type='text' class='codigoE' id='codigoE_"+index+"' placeholder='Enter código'></td><td><input type='text' class='descripcionE' id='descripcionE_"+index+"' ></td><td><input type='text' class='cant' id='cant_"+index+"' placeholder='Enter código'></td>/tr>";


                 // Agregar datos
                $('tbody').append(agregarfila);

            });



      });

//----------------------------------FECHAS-------------------------------------------->

function calcularFV(){



    //recojo la fecha de inicio
    var f_ini = document.getElementById("ffab_1").value;
    //recojo los dias a sumar
    var meses = document.getElementById("vidaUtil_1").value;

    //realiza el calculo
    var f_fin = calcularFecha(meses, f_ini);

    //actualiza el valor de fecha fin
    document.getElementById("fv_1").value = f_fin;
}



function calcularFecha(d, fecha)
{
     var Fecha = new Date();
     var sFecha = fecha || (Fecha.getDate() + "/" + (Fecha.getMonth() +1) + "/" + Fecha.getFullYear());
     var separador = sFecha.indexOf('/') != -1 ? '/' : '-'; 
     var arrayFecha = sFecha.split(separador);

     var fecha = arrayFecha[0]+'/'+arrayFecha[1]+'/'+arrayFecha[2];
     fecha= new Date(fecha);

     fecha.setMonth(fecha.getMonth()+parseInt(d));

     var anio=fecha.getFullYear();
     var dia= fecha.getDate();
     var mes= fecha.getMonth()+1;



     dia = (dia < 10) ? ("0" + dia) : dia;
     mes = (mes < 10) ? ("0" + mes) : mes;
     var fechaFinal = dia+separador+mes+separador+anio;

     return fechaFinal;

}

<body>
<div class="container">
<table style='border-collapse: collapse;' >
            <thead>
            <tr>
                <th>Codigo PT</th>
                <th>Descripción PT</th>
                <th>Lote</th>
                <th>Fecha de fabricación</th>
                <th>Fecha de vencimiento</th>
                <th>Vida Util</th>
                <th>Código de etiqueta</th>
                <th>Descripción de etiqueta</th>
                <th>Cantidad</th>
            </tr>
            </thead>
            <tbody>
            <tr class='tr_input' id="datos">
                <td><input type='text' class='codigoP' id='codigoP_1' placeholder='Enter código'></td>
                <td><input type='text' class="descripcion" id='descripcion_1' ></td>
                <td><input type='text' class="lote" id='lote_1' ></td>


                <td><input type='date' class='ffab' id='ffab_1' name="ffab" onchange="calcularFV()"></td>
                <td><input type='text' class="fv" id='fv_1' name="fven" ></td>      
                <td><input type='number' class="vidaUtil" id='vidaUtil_1' name="vida_util" onchange="calcularFV()"></td>


                <td><input type='text' class='codigoE' id='codigoE_1' placeholder='Enter código'></td>
                <td><input type='text' class="descripcionE" id='descripcionE_1' ></td>
                <td><input type='text' class="cant" id='cant_1' ></td>


            </tr>
            </tbody>
        </table>
        <br>
        <input type='button' value='Add more' id='addmore'>


</div>


1 respuesta 1

0

En tu codigo solo se va a ejecutar el autoagregado de la primera fila por que has definido tu funcion "calcularFV()" solo para esa fila.

Cuando agregas las filas ya se agregan los indices, lo que falta es que llames la funcion "calcularFV()" segun la fila, para eso debes pasarle el indice a la funcion:

function calcularFV(i){

    //recojo la fecha de inicio
    var f_ini = document.getElementById("ffab_"+i).value;
    //recojo los dias a sumar
    var meses = document.getElementById("vidaUtil_"+i).value;

    //realiza el calculo
    var f_fin = calcularFecha(meses, f_ini);

    //actualiza el valor de fecha fin
    document.getElementById("fv_"+i).value = f_fin;
  }

luego debes ponerle los indices a la funcion en las filas que vas a agregar en esta parte:

index+"' onchange='calcularFV("+index+")' ></td><td><input type='text' class='fv' id='fv_"+
index+"' ></td><td><input type='number' min=1 value=1 class='vidaUtil' id='vidaUtil_"+
index+"' onchange='calcularFV("+index+")'></td><td><input type='text' class='codigoE' id='codigoE_"+

ya luego te recomendaria que les pongas un minimo para que no ingresen numeros negativos al input y un valor inicial:

min=1 value=1

y con eso ya funciona el código:

  $(document).ready(function(){

    // Add more
    $('#addmore').click(function add(){

       // Obtener la última identificación 
       var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
       var split_id = lastname_id.split('_');

       // Nuevo índice
       var index = Number(split_id[1]) + 1;

       // Crear fila con elementos de entrada
       var agregarfila = "<tr class='tr_input'><td><input type='text' class='codigoP' id='codigoP_"+
       index+"' placeholder='Enter código'></td><td><input type='text' class='descripcion' id='descripcion_"+
       index+"' ></td><td><input type='text' class='lote' id='lote_"+
       index+"' ></td><td><input type='date' class='ffab' id='ffab_"+
       index+"' onchange='calcularFV("+index+")' ></td><td><input type='text' class='fv' id='fv_"+
       index+"' ></td><td><input type='number' min=1 value=1 class='vidaUtil' id='vidaUtil_"+
       index+"' onchange='calcularFV("+index+")'></td><td><input type='text' class='codigoE' id='codigoE_"+
       index+"' placeholder='Enter código'></td><td><input type='text' class='descripcionE' id='descripcionE_"+
       index+"' ></td><td><input type='text' class='cant' id='cant_"+
       index+"' placeholder='Enter código'></td>/tr>";


        // Agregar datos
        $('tbody').append(agregarfila);

    });
    
  });

function calcularFV(i){

    //recojo la fecha de inicio
    var f_ini = document.getElementById("ffab_"+i).value;
    //recojo los dias a sumar
    var meses = document.getElementById("vidaUtil_"+i).value;

    //realiza el calculo
    var f_fin = calcularFecha(meses, f_ini);

    //actualiza el valor de fecha fin
    document.getElementById("fv_"+i).value = f_fin;
  }

function calcularFecha(d, fecha)
{
     var Fecha = new Date();
     var sFecha = fecha || (Fecha.getDate() + "/" + (Fecha.getMonth() +1) + "/" + Fecha.getFullYear());
     var separador = sFecha.indexOf('/') != -1 ? '/' : '-'; 
     var arrayFecha = sFecha.split(separador);

     var fecha = arrayFecha[0]+'/'+arrayFecha[1]+'/'+arrayFecha[2];
     fecha= new Date(fecha);

     fecha.setMonth(fecha.getMonth()+parseInt(d));

     var anio=fecha.getFullYear();
     var dia= fecha.getDate();
     var mes= fecha.getMonth()+1;



     dia = (dia < 10) ? ("0" + dia) : dia;
     mes = (mes < 10) ? ("0" + mes) : mes;
     var fechaFinal = dia+separador+mes+separador+anio;

     return fechaFinal;

}
<html>
<head>

  <title>Ens AutoPopulate</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--script src="jquery-1.12.0.min.js" type="text/javascript"></script-->



  <body>
    <div class="container">
      <table style='border-collapse: collapse;' >
        <thead>
          <tr>
            <th>Codigo PT</th>
            <th>Descripción PT</th>
            <th>Lote</th>
            <th>Fecha de fabricación</th>
            <th>Fecha de vencimiento</th>
            <th>Vida Util</th>
            <th>Código de etiqueta</th>
            <th>Descripción de etiqueta</th>
            <th>Cantidad</th>
          </tr>
        </thead>
        <tbody>
          <tr class='tr_input' id="datos">
            <td><input type='text' class='codigoP' id='codigoP_1' placeholder='Enter código'></td>
            <td><input type='text' class="descripcion" id='descripcion_1' ></td>
            <td><input type='text' class="lote" id='lote_1' ></td>


            <td><input type='date' class='ffab' id='ffab_1' name="ffab" onchange="calcularFV(1)"></td>
            <td><input type='text' class="fv" id='fv_1' name="fven" ></td>      
            <td><input type='number' class="vidaUtil" id='vidaUtil_1' name="vida_util" onchange="calcularFV(1)" min=1 value=1></td>


            <td><input type='text' class='codigoE' id='codigoE_1' placeholder='Enter código'></td>
            <td><input type='text' class="descripcionE" id='descripcionE_1' ></td>
            <td><input type='text' class="cant" id='cant_1' ></td>

          </tr>
        </tbody>
      </table>
      <br>
      <input type='button' value='Add more' id='addmore'>

    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2
  • 1
    erika_chan, muchísimas gracias por tu respuesta, me sirvió mucho, saludos.
    – luz
    Commented el 8 oct. 2019 a las 14:39
  • @luz de nada amiga, no olvides marcar la respuesta si te resolvio el problema.
    – erika_chan
    Commented el 8 oct. 2019 a las 18:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.