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>