Hello everyone, my problem is as follows I based on an example that I found to make dynamic inputs me genra and do the calculations that I need but I do not understand very well how to insert all my data since the dynamic inputs are saved in a json and I do not understand how to extract them to insert them Can you help me I'm a newbie in PHP
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
function mostrarOcultar(id){
var elemento = document.getElementById(id);
if(!elemento) {
return true;
}
if (elemento.style.display == "none") {
elemento.style.display = "block"
} else {
elemento.style.display = "none"
};
return true;
}
</script>
<meta charset="utf-8">
<script type="text/javascript">
function RefrescaProducto() {
var ip = [];
var i = 0;
//$('#guardar').attr('disabled', 'disabled'); //Deshabilito el Boton Guardar
$('.iProduct').each(function(index, element) {
i++;
ip.push({
id_pro: $(this).val()
});
});
// Si la lista de Productos no es vacia Habilito el Boton Guardar
if (i > 0) {
$('#guardar').removeAttr('disabled', 'disabled');
}
var ipt = JSON.stringify(ip); //Convierto la Lista de Productos a un JSON para procesarlo en un controlador
$('#ListaPro').val(encodeURIComponent(ipt));
}
function agregarProducto() {
var sel = $('#pro_id').find(':selected').val(); //Capturo el Value del Producto
var text = $('#pro_id').find(':selected').text(); //Capturo el Nombre del Producto- Texto dentro del Select
var sptext = text.split();
var newtr = '<tr class="item" data-id="'+sel+'">';
newtr = newtr + '<td><input class="form-control" type="text" id="plazo[]" name="lista[]" size="1%" value=" " autocomplete="off" required /></td><td>Semanas</td><td><input class="form-control" type="text" id="precunit[]" name="lista[]" size="2" autocomplete="off" onkeyUp="Calcular(this);" value="0"/></td><td><input class="form-control" size="2" type="text" id="totalitem[]" name="lista[]" readonly /></td><td><input class="form-control" size="2" type="text" id="utilidad[]" name="lista[]" readonly /></td><td><input class="form-control" size="2" type="text" id="importe[]" name="lista[]" readonly /></td>';
newtr = newtr + '<td><button type="button" class="btn btn-danger btn-xs remove-item" >X</button></td></tr>';
$('#ProSelected').append(newtr); //Agrego el Plazo al tbody de la Tabla con el id=ProSelected
RefrescaProducto(); //Refresca plazos
$('.remove-item').off().click(function(e) {
var costot = document.getElementById("costot");
costot.innerHTML = parseFloat(costot.innerHTML) - parseFloat(this.parentNode.parentNode.childNodes[3].childNodes[0].value);
$(this).parent('td').parent('tr').remove(); //En accion elimino el Producto de la Tabla
if ($('#ProSelected tr.item').length == 0)
$('#ProSelected .no-item').slideDown(300);
RefrescaProducto();
Calcular(e.target);
});
$('.iProduct').off().change(function(e) {
RefrescaProducto();
});
}
function RefrescaProducto2() {
var ip2 = [];
var i2 = 0;
//$('#guardar').attr('disabled', 'disabled'); //Deshabilito el Boton Guardar
$('.iProduct2').each(function(index, element) {
i2++;
ip2.push({
id_pro: $(this).val()
});
});
// Si la lista de Productos no es vacia Habilito el Boton Guardar
if (i2 > 0) {
$('#guardar').removeAttr('disabled', 'disabled');
}
var ipt2 = JSON.stringify(ip2); //Convierto la Lista de Productos a un JSON para procesarlo en un controlador
$('#ListaPro2').val(encodeURIComponent(ipt2));
}
function agregarProducto2() {
var sel2 = $('#pro_id2').find(':selected').val(); //Capturo el Value del Producto
var text2 = $('#pro_id2').find(':selected').text(); //Capturo el Nombre del Producto- Texto dentro del Select
var sptext2 = text2.split();
var newtr2 = '<tr class="item" data-id="'+sel2+'">';
newtr2 = newtr2 + '<td><input class="form-control" type="text" id="plazo2[]" name="lista[]" onkeyUp="Calcular(this);" size="1" value=" " autocomplete="off" required /></td><td>Pza./Mts</td><td><input class="form-control" type="text" id="precunit2[]" name="lista[]" size="2" autocomplete="off" onkeyUp="Calcular(this);" value=" "/></td><td><input class="form-control" size="2" type="text" id="totalitem2[]" name="lista[]" readonly /></td><td><input class="form-control" size="2" type="text" id="utilidad2[]" name="lista[]" readonly /></td><td><input class="form-control" size="2" type="text" id="utiltotal[]" name="lista[]" readonly /></td>';
newtr2 = newtr2 + '<td><button type="button" class="btn btn-danger btn-xs remove-item" >X</button></td></tr>';
$('#ProSelected2').append(newtr2); //Agrego el Plazo al tbody de la Tabla con el id=ProSelected
RefrescaProducto2(); //Refresca cuentas
$('.remove-item').off().click(function(e) {
var costot = document.getElementById("costot");
costot.innerHTML = parseFloat(costot.innerHTML) - parseFloat(this.parentNode.parentNode.childNodes[3].childNodes[0].value);
$(this).parent('td').parent('tr').remove(); //En accion elimino el Producto de la Tabla
if ($('#ProSelected tr.item').length == 0)
$('#ProSelected .no-item').slideDown(300);
RefrescaProducto2();
Calcular(e.target);
});
$('.iProduct').off().change(function(e) {
RefrescaProducto2();
});
}
function Calcular(ele) {
//valores a obtener
var valor = document.getElementById("costoneto").value; //costo neto
var porcentaje = document.getElementById("porcentaje").value; //porcentaje de utilidad
var importe = document.getElementById("importe").value;
///variables donde se van a guardar los resultados
var costot = document.getElementById('costot');
var preciom = document.getElementById('preciom');
var utilidadm = document.getElementById('utilidadm');
var costotfinal = document.getElementById('costotfinal');
var utilidadf = document.getElementById('utilidadf');
var preciof = document.getElementById('preciof');
//le descuentas el 8% y lo agregas al HTML
var descuento = parseFloat(valor)*0.16; //se saca la
var costotfinal = parseFloat(valor) + parseFloat(descuento);
var utilidadf = parseFloat(costotfinal)*parseFloat(porcentaje)/100;
var preciof = parseFloat(costotfinal)+ parseFloat(utilidadf);
var importet = parseInt(importe);
//agrega los resultados al DOM
costot.innerHTML = costotfinal;
preciom.innerHTML = preciof;
utilidadm.innerHTML = utilidadf;
importet.innerHTML = importet;
///////////////////////////////////////////////////
var plazo=0, precunit = 0, totalitem = 0 , utilidad = 0, utiltotal = 0, importe=0, totalitem2=0 ,precunit2=0, totaal=1392;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].firstChild.id == 'plazo[]') {
plazo = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.id == 'precunit[]') {
precunit = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.id == 'totalitem[]') {
anterior = nodes[x].firstChild.value;
totalitem = parseFloat((precunit*(costotfinal)/100),10);
nodes[x].firstChild.value = totalitem + costotfinal ;
}
if (nodes[x].firstChild.id == 'importe[]') {
importe = parseFloat((((totalitem + costotfinal) - importet)/plazo),10);
nodes[x].firstChild.value = importe;
}
if (nodes[x].firstChild.id == 'utilidad[]') {
utilidad = parseFloat((precunit*(costotfinal)/100),10);
nodes[x].firstChild.value = utilidad;
}
if (nodes[x].firstChild.id == 'precunit2[]') {
precunit2 = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.id == 'totalitem2[]') {
totalitem2 = parseFloat(((100-precunit2)*totaal)/100,10);
nodes[x].firstChild.value = totalitem2;
}
if (nodes[x].firstChild.id == 'utilidad2[]') {
utilidad = parseFloat((precunit*(costotfinal)/100),10);
nodes[x].firstChild.value = utilidad;
}
if (nodes[x].firstChild.id == 'utiltotal[]') {
utiltotal = parseFloat((utilidad+totalitem+costotfinal),10);
nodes[x].firstChild.value = utiltotal;
}
}
// Resultado final de cada fila ERROR, al editar o eliminar una fila
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
//
}
total.innerHTML = parseFloat(total.innerHTML)+totalitem -anterior;
}
</script>
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<label class="text-center" id="fecha" style="margin-left:80%; margin-top:-0.5%; margin-bottom:0%;" > <?php $date = new DateTime();
echo 'Fecha: '. $date->format('d-m-Y');?></label>
<legend class="text-center" >Alta de Productos</legend>
<form method="post" action="guardados/guardaproducto.php" >
<label for="colaborador" style="margin-left:8%;" >Codigo del Articulo:</label>
<input type="text" name="colaborador" id="colaborador" size="1 " style='text-align:center;' value=" " disabled />
<br></br>
<label for="apellido_p" style="margin-left:8%;">SKU(Codigo de Barras)*:</label>
<input type="text" name="apellido_p" id="SKU" value=" " autocomplete="off" required />
<div style="margin-left:35%; margin-top:-1.8%;" ><strong>Categoria*:</strong> <select name="categoria" id="categoria">
<option value="0"> </option>
<option value='Computo' >Computo</option>
<option value='Impresion' >Impresion</option>
<option value='Accesorios'>Accesorios</option>
<option value='Software' >Software</option>
</select></div>
<br>
<div style="margin-left:50%; margin-top:-3%" ><strong>Marca*:</strong> <select name="marca" id="marca">
<option value="0"> </option>
<option value='Acer' >Acer</option>
<option value='Dell' >Dell</option>
<option value='Lanix' >Lanix</option>
<option value='Lenovo'>Lenovo</option>
<option value='HP' >HP</option>
</select></div>
</br>
<br>
<label for="nombre" style="margin-left:8%;" >Nombre del Articulo*:</label>
<input type="text" name="articulo" id="articulo" value=" " autocomplete="off" required />
<label for="calle" style="margin-left:2%;" >Descripcion*:</label>
<input type="text" name="descripcion" id="descripcion" value=" " size="100" autocomplete="off" required />
</br>
<br>
<div style="margin-left:8%; margin-top:0%" ><strong>Unidad de Medida*:</strong> <select name="medida" id="medida">
<option value="0"> </option>
<option value='Kit'> Kit</option>
<option value='Kg'> Kg</option>
<option value='Mt'> Mt</option>
<option value='M.O.'>M.O.</option>
<option value='Lt'> Lt</option>
<option value='Pz'> Pz</option>
<option value='Mbps'>Mbps</option>
</select></div>
</br>
<label for="tel2" style="margin-left:8%;" >Cantidad por Articulo*:</label>
<input type="text" name="cantidad" id="cantidad" value=" " autocomplete="off" required/>
<label for="rfc" style="margin-left:2%;">Componentes*:</label>
<input type="text" name="componentes" id="componentes" value=" " autocomplete="off" required />
<div style="margin-left:60%; margin-top:-2%" ><strong>Tipo de Costo*:</strong> <select name="tipocosto" id="tipocosto">
<option value="1">Fijo</option>
<option value="2">Fluctuante</option>
</select></div>
<br>
<label for="nss" style="margin-left:8%;"><strong>Costo Neto Antes de IVA*:</strong></label>
<input id="costoneto" type="text" autocomplete="off" onkeyUp="Calcular(this);" >
<label for="nss" style="margin-left:2%;" ><strong>% de utilidad minimo*:</strong></label>
<input id="porcentaje" type="text" autocomplete="off" onkeyUp="Calcular(this);">
<label for="nss" style="margin-left:2%;" ><strong>importe*:</strong></label>
<input id="importe" type="text" autocomplete="off" onkeyUp="Calcular(this);">
<br>
<br>
<strong style="margin-left:20%;" >Costo total: $ <span style="margin-left:0%;" id="costot"> </span></strong>
<strong style="margin-left:4%;" >Precio minimo: $ <span style="margin-left:0%;" id="preciom"> </span></strong>
<strong style="margin-left:4%;" >Utilidad minima: $ <span style="margin-left:0%;" id="utilidadm"></span></strong>
</br>
</br>
<div class="container">
<from>
<h2>Planes de pago</h2>
<!-- Trigger the modal with a button -->
<input type="hidden" id="ListaPro" name="ListaPro" value="" required="">
<table id="TablaPro" class="table">
<thead>
<tr>
<th>Plazo</th>
<th> </th>
<th>Utilidad %</th>
<th>Precio</th>
<th>Utilidad Plan</th>
<th>Pago minimo</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody id="ProSelected">
</table>
<!--Agregue un boton en caso de desear enviar los productos para ser procesados-->
<div class="form-group">
<input class="btn btn-info" onclick="agregarProducto()" type="button" id="agregar" name="agregar" value="Agregar" />
</div>
</from>
<br>
</br>
<label for="ficha" style="margin-left:76%;">Datos Adjuntos:</label><input class="btn btn-info" style="margin-left:73%; margin-top:0%;" type="file" name="img" accept=".pdf,.jpg,.png" multiple ><br><br>
<br>
<div class="text-center">
<input type="submit" name="insertar" value="Guardar" class="btn btn-info"/>
<button type="submit" class="btn btn-warning active">
<?php // @returnConfirmSubmit es para mandar a llamar la funcion de script para mandar mensaje de alerta
echo "<a onclick='return confirmSubmit()' href ='index.php'> Regresar </a>";
?>
</button>
</div>
</br>
</div>
</form>
</body>
</html>