0

Estoy intentando insertar una factura entonces al momento de seleccionar el producto ya existente en la bd, cuando lo selecciono en un ComboBox este me debe mostrar en un input el costo definido y al agregar la cantidad en otro input se debe mostrar el importe (Costo x Cant).

<div class="row">
<div class="col-sm-6">
    <div class="form-group">
        <label class="control-label">Descripción del Producto</label>
        <select class="form-control chosen-select" id="product_id" name="product_id[]">
            <?php foreach ($product as $row): ?>
                <option value=<?=$row->product_id?> ><?=$row->product_code?> - <?=$row->product_name?></option> 
            <?php  endforeach;?>
        </select> 
    </div>
</div>
<div class="col-sm-1">
    <div class="form-group">
        <label class="control-label">Cantidad</label>
        <input type="text" class="form-control text-right" id="product_cant" name="product_cant[]">
    </div>
</div>
<div class="col-sm-1">
    <div class="form-group">
        <label class="control-label">Costo</label>
        <input type="text" class="form-control text-right" id="product_cost" name="product_cost[]">
    </div>
</div>
<div class="col-sm-1">
    <div class="form-group">
        <label class="control-label">Importe</label>
        <input type="text" class="form-control text-right" id="product_amount" name="product_amount[]">
    </div>
</div>

El problema es que estoy bastante flojo en Javascript y no tengo la menor idea de como se realiza eso, he revisado varias variantes pero no me funciona ninguna. Gracias de antemano.

1

2 respuestas 2

0

Ya lo vi disculpa. Funciona rebien. Gracias por la ayuda. No se si notastes pero en el name de los input es un arreglo pues con otro codigo js agrego filas dependiendo de los productos a agregar, cuando le agrego uno nuevo me pone el costo en el primero, el codigo de ese js seria este:

<script type="text/javascript">
var max_prod = 20;   //max 20 row
var x = 0;
$('#add_prod').click (function(e) {
        e.preventDefault();     //prevenir nuevos clicks
        if (x < max_prod) {
                $('#prods').append('<div class="row">\
                                        <div class="col-sm-6">\
                                            <div class="form-group">\
                                                <select class="form-control chosen-select" id="product_id" name="product_id[]">\
                                                    <?php foreach ($product as $row): ?>\
                                                       <option value="<?=$row->product_id?>" costo="<?=$row->product_cuc_cost?>"> <?=$row->product_code?> - <?=$row->product_name?></option>  \
                                                    <?php  endforeach;?>\
                                                </select>\
                                            </div>\
                                        </div>\
                                        <div class="col-sm-1">\
                                            <div class="form-group">\
                                                <input type="text" class="form-control text-right product_cant" id="product_cant" name="product_cant[]">\
                                            </div>\
                                        </div>\
                                        <div class="col-sm-1">\
                                            <div class="form-group">\
                                                <input type="text" class="form-control text-right" id="product_cost" name="product_cost[]" disabled>\
                                            </div>\
                                        </div>\
                                        <div class="col-sm-1">\
                                            <div class="form-group">\
                                                <input type="text" class="form-control text-right" id="product_amount" name="product_amount[]" disabled>\
                                            </div>\
                                        </div>\
                                        <div class="col-sm-1">\
                                            <div class="form-group">\
                                                <a href="#" class="del_prod btn btn-default"><i class="fa fa-trash"></i></a>\
                                            </div>\
                                        </div>\
                                     </div>');

                $('.chosen-select').chosen({
                    width: '100%'
                });

                $(".chosen-select").change((e) => {

                  let fila = $(e.target).parents(".row");
                  let costo = fila.find(".chosen-select option:selected").attr("costo");
                  fila.find("#product_amount, #product_cant").val("");
                  fila.find("#product_cost").val(costo);

                });

                $(".product_cant").keyup((e) => {

                   let fila = $(e.target).parents(".row");
                   var cantidad = (isNaN($(e.target).val().trim())) ? 0 : parseFloat($(e.target).val());
                   let costo = parseFloat(fila.find(".chosen-select option:selected").attr("costo"));
                   let importe = cantidad * costo;
                   fila.find("#product_amount").val(importe);

                });

                x++;
        }
});
// Remover el div anterior
$('#prods').on("click",".del_prod",function(e) {
        e.preventDefault();
        $(this).parent('div').parent('div').parent('div').remove();
    x--;
});

$(".chosen-select").change((e) => {

  let fila = $(e.target).parents(".row");
  let costo = fila.find(".chosen-select option:selected").attr("costo");
  fila.find("#product_amount, #product_cant").val("");
  fila.find("#product_cost").val(costo);

});

$(".product_cant").keyup((e) => {

   let fila = $(e.target).parents(".row");
   var cantidad = (isNaN($(e.target).val().trim())) ? 0 : parseFloat($(e.target).val());
   let costo = parseFloat(fila.find(".chosen-select option:selected").attr("costo"));
   let importe = cantidad * costo;
   fila.find("#product_amount").val(importe);

});

Como podria decirle que es otra fila?

3
  • Ok ya lo edito en mi respuesta para que te fijes dame unos minutos Commented el 10 sept. 2018 a las 17:59
  • El que me envias funciona perfectamente pero edite el js mio y me agrega el costo de la primera fila en todas las otras, agregue las funciones que me envias fuera de la funcion de agregar fila para que me sirva en la primera y despues lo vuelvo a agregar en la funcion de agregar fila y me hace lo que te comento Commented el 12 sept. 2018 a las 12:48
  • edite el js que te puse para que entiendas lo que te digo. Saludos Commented el 12 sept. 2018 a las 12:49
0

Aquí tienes un código que acabo de hacer para que te guies:

$(document).ready(() => {

  $.fn.eventos()

});

$.fn.eventos = () => {
  
  $("#agregar").unbind('click');
  $("#agregar").click(() => {

    let nuevaFila = `<div class="row">
                      <div class="col-6">
                        <div class="form-group">
                            <label class="control-label">Descripción del Producto</label>
                            <select class="form-control chosen-select" id="product_id" name="product_id[]">
                             <option value="" disabled selected>Seleccione</option>
                             <option value="1" costo="10">Producto1</option>
                             <option value="2" costo="25">Producto2</option>
                             <option value="3" costo="2.5">Producto3</option>
                            </select> 
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="control-label">Cantidad</label>
                            <input type="text" class="form-control text-right product_cant" id="product_cant" name="product_cant[]">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="control-label">Costo</label>
                            <input type="text" class="form-control text-right" id="product_cost" name="product_cost[]" disabled>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label class="control-label">Importe</label>
                            <input type="text" class="form-control text-right" id="product_amount" name="product_amount[]" disabled>
                        </div>
                    </div>
                   </div>`;

    $("#prods").append(nuevaFila);
    
    $.fn.eventos()

  });
  
  $(".chosen-select").unbind('change');
  $(".chosen-select").change((e) => {
     
    let fila = $(e.target).parents(".row");
    let costo = fila.find(".chosen-select option:selected").attr("costo");
    fila.find("#product_amount, #product_cant").val("");
    fila.find("#product_cost").val(costo);
    
    $.fn.eventos()

  });
  
  $(".product_cant").unbind('keyup');
  $(".product_cant").keyup((e) => {

     let fila = $(e.target).parents(".row");
     var cantidad = (isNaN($(e.target).val().trim())) ? 0 : parseFloat($(e.target).val());
     let costo = parseFloat(fila.find(".chosen-select option:selected").attr("costo"));
     let importe = cantidad * costo;
     fila.find("#product_amount").val(importe);
     
     $.fn.eventos()

  });
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<button id="agregar" class="btn btn-success">Agregar fila</button>
<br><br>
<div id="prods">
<div class="row">
  <div class="col-6">
    <div class="form-group">
        <label class="control-label">Descripción del Producto</label>
        <select class="form-control chosen-select" id="product_id" name="product_id[]">
         <option value="" disabled selected>Seleccione</option>
         <option value="1" costo="10">Producto1</option>
         <option value="2" costo="25">Producto2</option>
         <option value="3" costo="2.5">Producto3</option>
        </select> 
    </div>
</div>
<div class="col-6">
    <div class="form-group">
        <label class="control-label">Cantidad</label>
        <input type="text" class="form-control text-right product_cant" id="product_cant" name="product_cant[]">
    </div>
</div>
<div class="col-6">
    <div class="form-group">
        <label class="control-label">Costo</label>
        <input type="text" class="form-control text-right" id="product_cost" name="product_cost[]" disabled>
    </div>
</div>
<div class="col-6">
    <div class="form-group">
        <label class="control-label">Importe</label>
        <input type="text" class="form-control text-right" id="product_amount" name="product_amount[]" disabled>
    </div>
</div>
</div>
</div>

Si te fijas hay un evento change sobre el combo que captura el costo almacenado en pseudo atributo, ese atributo lo llenas de la BD y luego al seleccionar signo al campo costo, luego al campo cantidad le asigno un evento keyup el cual detecta que valor estas introduciendo, si es numero lo multiplica por el costo y setea el valor del importe, espero te sirva

EDITADO

Agregue otra fila y modifique los eventos para que veas como interactuan con dos filas con los mismos elementos, pruebalo

8
  • Y como lleno el valor costo ese del que me hablas??? mirando en el HTML no veo donde debo indicar que valor del costo es el de la base de datos en este caso seria <?=$row->product_cuc_cost?> row que es la fila especificada del arreglo $product. Commented el 10 sept. 2018 a las 17:04
  • Listo ya edite mi respuesta, alli veras dos filas y podras probar lo que dices Commented el 10 sept. 2018 a las 18:17
  • El que me envias funciona perfectamente pero edite el js mio y me agrega el costo de la primera fila en todas las otras, agregue las funciones que me envias fuera de la funcion de agregar fila para que me sirva en la primera y despues lo vuelvo a agregar en la funcion de agregar fila y me hace lo que te comento. Edite el js que te puse para que entiendas lo que te digo. Saludos Commented el 12 sept. 2018 a las 12:56
  • Ha se me habi pasado poner en HTML que toda la fila la encierro en <div id="prods"> </div> y por eso en el Js $('#add_prod') me adiciona una nueva fila Commented el 12 sept. 2018 a las 13:00
  • que te funcione tiene algo que ver con esto??? <div class="col-6 2"> Commented el 12 sept. 2018 a las 13:08

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.