0

Tengo este script que agrega un input y en el input total <input type="number" name="total" id="total" value="0"> no me suma el input que viene por default, el resto me los suma y no me arroja ningun error.

Me podrían ayudar a resolverlo?

index.php

$(document).ready(function() {
  $(".add_item_btn").click(function(e) {
    e.preventDefault();
    $("#show_item").prepend(`<div class="append_item"><div>
            <input type="text" name="product[]" required>
            <input type="number" class="precio-input" name="precio[]" required>
            <input type="number" class="cantidad-input" name="cantidad[]" required>
            <button class="remove_item_btn">Quitar</button>
            </div></div>`);
  });

  $(document).on('click', '.remove_item_btn', function(e) {
    e.preventDefault();
    let row_item = $(this).parent().parent();
    $(row_item).remove();
  });

  $(document).on('input', '.precio-input, .cantidad-input', function() {
    updateTotal();
  });

  function updateTotal() {
    let total = 0;
    $('.append_item').each(function(index, element) {
      const precio = parseFloat($(element).find('.precio-input').val()) || 0;
      const cantidad = parseFloat($(element).find('.cantidad-input').val()) || 0;
      total += precio * cantidad;
    });
    $('#total').val(total.toFixed(2));
  }

  $("#add_form").submit(function(e) {
    e.preventDefault();
    $("#add_btn").val('Cargando...');
    $.ajax({
      url: 'action.php',
      method: 'post',
      data: $(this).serialize(),
      success: function(response) {
        console.log(response);
        // $("#add_btn").val('Add');
        // $("#add_form")[0].reset();
        // $(".append_item").remove();
        // $("#show_alert").html(`<div></div>`);
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST" id="add_form">
  <div id="show_item">
    <input type="text" name="product[]" required>
    <input type="number" class="precio-input" name="precio[]" required>
    <input type="number" class="cantidad-input" name="cantidad[]" required>
    <button class="add_item_btn">Agregar</button>
  </div>

  <input type="number" name="total" id="total" value="0">

  <input type="submit" value="add" id="add_btn">
</form>

action.php

<?php

print_r($_POST);

// $conn = new PDO('mysql:host=localhost;dbname=pruebas','root','');

// $code = rand();
// $fecha = date('Y-m-d');

// foreach($_POST['product'] as $key => $value){
//  $sql = "INSERT INTO detalle (code, producto, precio, cantidad) VALUES (:code, :producto, :precio, :cantidad)";
//  $stmt = $conn->prepare($sql);
//  $stmt->execute([
//      'code' => $code,
//      'producto' => $value,
//      'precio' => $_POST['precio'][$key],
//      'cantidad' => $_POST['cantidad'][$key],
//  ]);
// }

// $sql_venta = "INSERT INTO venta (code, fecha) VALUES (:code, :fecha)";
// $stmt_venta = $conn->prepare($sql_venta);
// $stmt_venta->execute(['code' => $code, 'fecha' => $fecha]);

// echo 'Ok';

echo $_POST['total'];

?>

Agradezco la ayuda de antemano!

3
  • no me suma el input que viene por default, ¿qué input es ese?
    – A. Cedano
    Commented el 9 ago. 2023 a las 17:41
  • Este fragmento es el que no me toma el precio: ` <div id="show_item"> <input type="text" name="product[]" required> <input type="number" class="precio-input" name="precio[]" required> <input type="number" class="cantidad-input" name="cantidad[]" required> <button class="add_item_btn">Agregar</button> </div>`
    – user101604
    Commented el 9 ago. 2023 a las 18:07
  • El error radica en que los elementos que generas dinamicamente se generan dentro del contendor append_item, y los que ya tienes generados desde un principio nunca los recorres, para ello deberías recorrerlos también dentro de la misma función pero indicándole el contenedor show_item. Commented el 9 ago. 2023 a las 18:17

1 respuesta 1

2

Como te mencione en el comentario, el error radica en que creas una función que genera el contenedor con inputs dinámicos llamado append_item y recorres sus elementos en la funcion updateTotal(), los inputs que mencionas como default jamas los recorres, ya que se encuentran en el contenedor con id="show_item". Te recomendaría generar un contenedor padre y dentro de ese con la clase append_item nombrar a los que ya están por defecto, y los generados dinamicamente también asignarles la misma clase pero dentro del contenedor padre show_item de esta manera:

$(document).ready(function() {
  $(".add_item_btn").click(function(e) {
    e.preventDefault();
    $("#show_item").prepend(`<div class="append_item">
            <input type="text" name="product[]" required>
            <input type="number" class="precio-input" name="precio[]" required>
            <input type="number" class="cantidad-input" name="cantidad[]" required>
            <button class="remove_item_btn">Quitar</button>
            </div>`);
  });

  $(document).on('click', '.remove_item_btn', function(e) {
    e.preventDefault();
    let row_item = $(this).parent();
    $(row_item).remove();
  });


  $(document).on('input', '.precio-input, .cantidad-input', function() {
    updateTotal();
  });

  function updateTotal() {
    let total = 0;
    $('.append_item').each(function(index, element) {
      const precio = parseFloat($(element).find('.precio-input').val()) || 0;
      const cantidad = parseFloat($(element).find('.cantidad-input').val()) || 0;
      total += precio * cantidad;
    });
    $('#total').val(total.toFixed(2));
  }

  $("#add_form").submit(function(e) {
    e.preventDefault();
    $("#add_btn").val('Cargando...');
    $.ajax({
      url: 'action.php',
      method: 'post',
      data: $(this).serialize(),
      success: function(response) {
        console.log(response);
        // $("#add_btn").val('Add');
        // $("#add_form")[0].reset();
        // $(".append_item").remove();
        // $("#show_alert").html(`<div></div>`);
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST" id="add_form">
  <div id="show_item">
    <div class="append_item">
      <input type="text" name="product[]" required>
      <input type="number" class="precio-input" name="precio[]" required>
      <input type="number" class="cantidad-input" name="cantidad[]" required>
      <button class="add_item_btn">Agregar</button>
    </div>

    <input type="number" name="total" id="total" value="0">

    <input type="submit" value="add" id="add_btn">
  </div>

</form>

Nota: Considera que al eliminar los inputs dinámicos se deberían de restar de la sumatoria total.

4
  • Muchas gracias, entiendo a lo que apuntas, pero de esta forma deja de funcionar la opción de quitar los input. El remove_item_btn puede ir fuera de la funcion updateTotal()?
    – user101604
    Commented el 9 ago. 2023 a las 19:35
  • Cierto, modifico el código, andaba haciendo pruebas y se me paso corregirlo. Commented el 9 ago. 2023 a las 19:41
  • Ya lo corregí, también observa que corregí el preppend, ya que generabas dos div cosa que no es necesaria, en el remove ya solo es con un parent para acceder contenedor padre que detona el evento. Commented el 9 ago. 2023 a las 19:47
  • No hay problema, muchas gracias igual. Con lo que tu me dices al menos no estaba errado yo, jajajaja.
    – user101604
    Commented el 9 ago. 2023 a las 19:52

Tu Respuesta

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