0

Buenas, tengo un formulario de venta, mas o menos terminado.

En esa formulario tengo una tabla que se agregan filas dinámicas extraídas de otra tabla en un modal.

$('.a').on('click',function(){
var trPrincipal = this.offsetParent.parentElement; //Buscamos el TR principal
// var firstName = trPrincipal.children[0].outerText; //Capturamos el FirstName
var idproducto=trPrincipal.children[0].outerText;
var nombreprod=trPrincipal.children[1].outerText;
var peso=trPrincipal.children[3].outerText+' '+trPrincipal.children[2].outerText;
var precio=trPrincipal.children[5].outerText;

// var lastName = trPrincipal.children[1].outerText+' '+trPrincipal.children[2].outerText; //Capturamos el LastName

$(".othertable").append("<tr><td>"+
idproducto+"</td><td>"+
nombreprod
+"</td><td>"+
peso+"</td><td>"+
precio+"<td><input type='number' placeholder='Ingresar cantidad'/></td><td><p class='subTotal'></p></td><td><input type='button' class='btneli' id='idbotoneli' value='Eliminar'></td></tr>");
  trPrincipal.style.display = "none"; //Ocultamos el TR de la Primer Tabla
  var btn_ = document.querySelectorAll(".btneli"); // Buscamos todos los elementos que tengan la clase .btneli
  for(var a in btn_){ //Iteramos la variable btn_
var b = btn_[a];
if(typeof b == "object"){ //Solo necesitamos los objetos
  b.onclick = function (){ //Asignamos evento click
    var trBtn = this.offsetParent.parentElement; // buscamos el tr principal de la segunda tabla
    var firstNameBtn = trBtn.children[0].outerText; //Capturamos el FirstName de la segunda tabla
    trBtn.remove(); // eliminamos toda la fila de la segunda tabla
    var tbl = document.querySelectorAll(".table td:first-child"); //Obtenemos todos los primeros elementos td de la primera tabla
    for(var x in tbl){ //Iteramos los elementos obtenidos
      var y = tbl[x];
      if(typeof y == "object"){ //solo nos interesan los object
        if (y.outerText == firstNameBtn){ //comparamos el texto de la variable y vs el firstNameBtn
           var t = y.parentElement; //capturamos el elemento de la coincidencia
          t.style.display = ""; //actualizamos el estilo display dejándolo en vacío y esto mostrará nuevamente la fila tr de la primera tabla
        }
      }
    }
  }
} //Termina onclick
  }//Termina For

    //Emprezamos buscando todos los inputs tipo Number
  var a = document.querySelectorAll("input[type='number']");
  if(a != undefined || a != null){
a.forEach(function (x){ //De todo el resultado iteramos con un Foreach
  var precio = Number(x.parentElement.previousSibling.textContent); // Localizamos el Precio dentro de la tabla
  x.onkeyup = function (){ //Asignamos un Metodo del teclado; 
    this.offsetParent.nextElementSibling.children[0].innerHTML = (precio * x.value); //Calculamos el subtotal y se lo agregamos en la columna
    generarTotal(); // Ejecutamos una funcion que se genera el Total
  }
});//Foreach
  }//if

  function generarTotal(){ //Funcion que genera el total
var a = document.querySelectorAll(".subTotal"); //Buscamos todos los subtotales
if(a != undefined || a != null){
  var total = new Number(); //creamos variable tipo Number llamada Total
  a.forEach(function (x){ //Iteramos el array a que contiene los subtotales
    total += Number(x.textContent); // Vamos sumando todos los subtotales en la variable total
  });
  var t_ = document.getElementById("total"); //Buscamos el input que tiene Id: total
  t_.value = total.toFixed(2);  // le asignamos por la propiedad value el valos de todos los subtotales con 2 decimales
  generarIGV(); // Generamos el IVa General de las Ventas con la funcion generarIGV
}
  }

  function generarIGV(){ //Funcion que calcula el IVA
var a = document.getElementById("total"); //Buscamos el elemento Total para extraer el total de las ventas
var igv = 0.18; //AQUI se coloca el iva que deseas calcular, par este efecto he puesto el 18%. 
var b = document.getElementById("igv"); // Buscamos el campo con Id igv
var operacion = Number(a.value) * igv; // calculamos el IGV
b.value = operacion.toFixed(2); // Le asignamos al campo con Id igv el IVA mediante la propiedad value.
generartotaltotal();

}

function generartotaltotal(){
  var txtigv=document.getElementById("igv");
  var txttotal=document.getElementById("total");
  var txttotaltotal=document.getElementById("totaltotal");
  var operaciontotal=Number(txtigv.value)+Number(txttotal.value);
  txttotaltotal.value=operaciontotal.toFixed(2);

}




});
table{
  margin:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<table id="idsecond" class="table table-bordered table-hover">
                  <thead bgcolor="skyblue">
                    <tr>
                <th>#</th>
                <th>Articulo</th>
                <th>Unidad M.</th>
             
             <th>Peso/Volumen</th>
                <th>Categoria</th>
                <th>P.Unitario</th>

                <th>Accion</th>
                      
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                    <td>1</td>
                    <td>Arroz</td>
                    <td>Kilo</td>
                    <td>4</td>
                    <td>---</td>
                    <td>18</td>
                    <td><button class="a">Agregar</button></td>
                    </tr>
                    <tr>
                    <td>2</td>
                    <td>Sal</td>
                    <td>Kilo </td>
                    <td>2</td>
                    <td>---</td>
                    <td>14</td>
                    <td><button class="a">Agregar</button></td>
                    </tr>
                    <tr>
                    <td>3</td>
                    <td>Maiz</td>
                    <td>Kilo</td>
                    <td>3</td>
                    <td>---</td>
                    <td>12</td>
                    <td><button class="a">Agregar</button></td>
                    </tr>
                  </tbody>
              </table>


<table class="othertable col-xs-12 table-condensed table-hover table-bordered">
	            <thead>
	            <tr>
	                <th>#</th>
	                <th>Nombre</th>
	                <th>Peso/Volumen</th>
	                <th>Precio</th>
	                <th>Cantidad</th>
	                <th>SubTotal</th>
	                <th>Accion</th>
	            </tr>
	            </thead>
	            <tbody>
	            
	            </tbody>
	        </table>

	        <br />
	        <br />
	        <br />
	        <br />
          <br />
	        <br />


	            <div class="form-group col-sm-4">
			      <label for="igv">IGV:</label>
			        <input type="text" class="form-control"disabled id="igv">
			    </div>
			    
			    <div class="form-group  col-sm-4">
			      <label for="total">SubTotal:</label>
			        <input type="text" class="form-control" disabled id="total">
			    </div>


				<div class="form-group  col-sm-4">
			      <label for="totaltotal">Total:</label>
			        <input type="text" class="form-control" disabled id="totaltotal">
			    </div>

Esta seria la base de datos donde quiero insertar mis valores:

introducir la descripción de la imagen aquí

Por ejemplo en el siguiente snippet, se muestra una tabla mandando filas a otra.

Esa tabla vendría a ser la descripcion de una boleta o factura. En esa descripcion especifica el id_producto(La columna del numeral #), el nombre del producto, y otros datos que describen al producto, como su precio unitario, este precio unitario es multiplicado por el input text/numérico de la columna cantidad y de esta se calcula el subtotal del producto.

Usualmente suelo insertar datos de un formulario normal, por el nombre(name) de cada elemento. Pero en el caso de una tabla dinámica, como lo haría? Como capturaría el id_producto y su cantidad(indicada) correspondiente de venta para insertarlo en mi base de datos?

Agradecería enormemente la ayuda.

1 respuesta 1

2

Una manera sencilla es agregar el id del producto en un data-product-id en el momento que obtienes las filas de la base de datos y los muestras en tu tabla de productos.

De base de datos a la tabla

<?php
for($product in $products) {?>
    <tr data-product-id="<?= $product.id ?>">
       <td><?= $product.name ?></td>
       <td><img src="<?php echo base64_encode($product.image)" /></td>
       <td><?= $product.price ?></td>
       // el resto de datos del producto
    <tr>
<?php
}

Fíjate que hemos guardado el id de cada producto en un atributo data-product-id para poder usarlo luego.

Pasar de tabla productos a tabla de compra

Cuando pasas el producto de la tabla productos a la tabla compras, jalas el data-product-id junto con otros datos que desees.

function addProductToCart(button) {
  var row = button.parentNode.parentNode;
  var productId = row.getAttribute('data-product-id');
  // extras los datos que deseas de la fila
  // y las agregas a la tabla de compras y
  // le asignas igualmente el id del productp
  var cartRow = /* */;
  cartRow.setAttribute('data-product-id', productId);
  // agregas la nueva fila creada a la tabla de compras
  document.getElementById('#tbl-compras').appendChild(cartRow)
  // desactivas el botón 'Agregar'
  button.disabled = true;
}

Hasta aquí ya tienes los productos deseados en la tabla compras. Finalmente, resta juntar esos datos con el formulario de factura y persistir esos datos.

Persistir la compra

Primero obtenemos el IGV, Subtotal (que tú has puesto total) y Total (que lo has llamado totaltotal).

En tu form de venta, asocias al submit del form, una función en donde se procesará toda la información:

<form onsubmit="savePurchase(event)">

La función donde se procesará toda la info es sencilla. Solo hace lo siguiente:

  1. Obtener los valores e #igv, #total y #totaltotal.
  2. Recorrer las filas de la tabla compras, para obtener de todas ellas los siguientes datos:

    • ID de cada producto
    • Cantidad

      function savePurchase(e) {
          var form = e.target;
          var igv = form.querySelector('#igv');
          var subtotal = form.querySelector('#total');
          var total = form.querySelector('#totaltotal');
          var products = {};
          var rows = null;
          var formData = new FormData();
          var QTY_INDEX = 3; // índice de la celda cantidad
      
          rows = document.getElementById('#tblCompra')
                      .querySelectorAll('tr');
          // recorre todas las filas para obtener
          // los ids  de los productos a comprar
          rows.forEach(function(row) {
              var productId = row.getAttribute('data-product-id');
              var qtyCell = row.querySelector('nth-child(' + QTY_INDEX + ')');
              var qtyInput = qtyCell.querySelector('input');
              products.push({
              id: productId,
              quantity: qtyInput.value
              });
          });
      
          // en el objeto FormData guardamos
          // allí todos los datos a enviar
          formData.append('igv', igv);
          formData.append('subtotal', subtotal);
          formData.append('total', total);
          formData.append('products', products);
      
          e.preventDefault();
      }
      

Aquí es donde obtenemos los datos de los productos:

var productId = row.getAttribute('data-product-id');
var qtyCell = row.querySelector('nth-child(' + QTY_INDEX + ')');
var qtyInput = qtyCell.querySelector('input');

Fíjate que estamos obteniendo un input por si tienes un <input type="number" />, pero si tienes la cantidad en texto, debers usar qtyCell.innerText.

Envío de formulario

En este punto ya tienes los datos de la compra. Lo que bastaría hacer es hacer un submit del formulario. La mejor forma es hacerlo mediante AJAX.

var xhr = new XMLHttpRequest();
xhr.open('POST', '/tu/fichero.php');
xhr.onload = function() {
  if(xhr.status === 200 && xhr.readyState === 4) {
    // hacer algo cuando ya se hayan guardado
    // la data en la bbdd
  }
}
xhr.send(formData);

Finalmente, obtienes los datos en el servidor:

$purchaseData = array(
    'igv' => $_POST['igv'],
    'subtotal' => $_POST['subtotal'],
    'total' => $_POST['total'],
    'products' => $_POST['products']
);
4
  • existe alguna otra alternativa de hacerlo sin ajax?
    – Raphael
    Commented el 26 jun. 2016 a las 8:04
  • En realidad sí, pero con AJAX es mucho más cómodo y provees una mejor experiencia de usuario (UX). Por ejemplo, puedes poner un timer que muestre una animación "cargando" mientras se guarda en la base de datos. Esto hace tu aplicación mucho más usable y visualmente agradable.
    – gugadev
    Commented el 26 jun. 2016 a las 12:44
  • Es que soy bastante nuevo con el tema de AJAX, y me es algo difícil entenderlo. Si he visto bonitas animaciones que me gustaría implementarlas, pero por motivos de tiempo y desconocimiento del tema, me resulta complicado. Se que es demasiado lo que estoy pidiendo, pero en estos momentos me resultaría mas fácil no usar AJAX.
    – Raphael
    Commented el 26 jun. 2016 a las 14:49
  • 1
    Tendrías que añadir <input type="hidden" /> al formulario para añadir todos los datos de las compras al hacer submit. Mucho más trabajo que hacerlo con AJAX. Utilizar AJAX no es para anda complicado. Apuntas una URL y envías/recibes datos al/del servidor.
    – gugadev
    Commented el 26 jun. 2016 a las 15:27

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.