Continuo con el diseñando un formulario el objetivo que tengo :
- Agregar producto, mostrar características de dicho producto como lo es cantidad precio, para calcular precio y costo de un determinado producto.(Actualmente funciona).
- Eliminar o remover el producto si es el caso de que se requiera remover el producto.(No funciona)
- En base a los productos mostrados calcular total a pagar(Actualmente funciona)
- Y al final colocar un botón de finalizar para cerrar la compra donde se coloque un cuadro de texto y se solicite la cantidad recibida para mostrar el cambio si es que aplica.
El código que estoy usando para esto es el siguiente:
en la página de visualización:
El código usado para realizar el calculo y la visualización es:
<?php
require_once("admin/dbcontroller.php");
$db_handle = new DBController();
$sql = "SELECT * from sales_oper where 1 order by sales_id ASC";
$faq = $db_handle->runQuery($sql);
?>
<!DOCTYPE html>
<style>
.green-text {
color: #008000;
}
.orange-text {
color: orange;
}
.back-text {
color: black;
}
.font-30{
font-size: 30px;
}
</style>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="alert alert-success" style="display:none;"></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<table class="table table-striped">
<thead>
<tr>
<th scope=>Product code</th>
<th scope="col">Name</th>
<th scope="col">Quantity</th>
<th scope="col">Unit price</th>
<th scope="col">Total price</th>
<th scope="col">Accion </th>
</tr>
</thead>
<tbody>
<?php
foreach($faq as $k=>$v) {
?>
<tr id="fila-<?php echo $v['sales_id']; ?>" >
<th scope="row"><?php echo $v['sales_id']; ?></th>
<td><?php echo $v['product_id']; ?></td>
<td><input type="number" class="form-control cantidad" value="1"></td>
<td><input type="number" class="form-control precio" value="<?php echo $v['price']; ?>" readonly></td>
<td class="precioTotal"></td>
<td>
<a class="btn btn-secondary delete" href="#" data="<?php echo $v['sales_id']; ?>"><i class="fa fa-remove"></i> Eliminar</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table width="30%" border=1 >
<tr><td class="orange-text font-30" >Sub- Total</td><td><div class="orange-text font-30" id="subtotal"></div></td></tr>
<tr><td class="black-text font-30" >IVA</td><td><div class="black-text font-30" id="iva"></div></td></tr>
<tr><td class="green-text font-30">Total</td><td><div class="green-text font-30" id="total"></div> </td></tr>
</table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function actualizarTabla() {
var cantidades = [];
var precios = [];
var preciosTotal = [];
var total = 0;
$(".table tbody > tr").each(function(index) {
var cantidad = Number($(this).find('.cantidad').val());
cantidades.push(cantidad);
var precio = Number($(this).find('.precio').val());
precios.push(precio);
var total_unitario = cantidad * precio;
preciosTotal.push(total_unitario);
$(this).find('.precioTotal').text(total_unitario+' Pesos');
total += total_unitario;
});
document.getElementById("subtotal").innerHTML= number_format(total, 2, '.', ',' )+' Pesos';
document.getElementById("iva").innerHTML= '0'+0.16+' %';
document.getElementById("total").innerHTML =number_format(total*1.16, 2, '.', ',' )+' Pesos';
}
actualizarTabla();
$(".table").on('change', function() {
actualizarTabla();
});
});
function number_format(number, decimals, decPoint, thousandsSep){
decimals = decimals || 0;
number = parseFloat(number);
if(!decPoint || !thousandsSep){
decPoint = '.';
thousandsSep = ',';
}
var roundedNumber = Math.round( Math.abs( number ) * ('1e' + decimals) ) + '';
var numbersString = decimals ? roundedNumber.slice(0, decimals * -1) : roundedNumber;
var decimalsString = decimals ? roundedNumber.slice(decimals * -1) : '';
var formattedNumber = "";
while(numbersString.length > 3){
formattedNumber += thousandsSep + numbersString.slice(-3)
numbersString = numbersString.slice(0,-3);
}
return (number < 0 ? '-' : '') + numbersString + formattedNumber + (decimalsString ? (decPoint + decimalsString) : '');
}
$(document).ready(function() {
$('.delete').on('click', function(e) {
e.preventDefault();
var parent = $(this).parent().parent().attr('id');
var item = $(this).attr('data');
var dataString = 'file='+item;
$.ajax({
type: "POST",
url: "delete_itemorder.php",
data: dataString,
success: function(response) {
$('.alert-success').empty();
$('.alert-success').append(response).fadeIn("slow");
$('#'+parent).fadeOut("slow");
actualizarTabla();
}
});
});
});
</script>
El apoyo que necesito es para saber como podría eliminar la fila entera ya que en este momento solo se esta desapareciendo el botón eliminar y requiero remover toda la fila entera.
Nota: La eliminación en la tabla de la base de datos la realiza correctamente, sin embargo como he comentado no actualiza el cambio en la pagina.
De antemano gracias por su apoyo.
Saludos