0

estoy realizando un cotizador de precios, el cual multiplica una cantidad por un precio fijos en 2 items con un subtotal, los cuales luego los suma para dar un total final. El problema es que ese total final no debe dar nunca un resultado menor a $3500, ya que ese es el precio mínimo de la licencia a comprar. Este precio final mínimo de $3500 es el que no logro desarrollar. Como ven el cotizador, multiplica y suma correctamente, pero la variable minimo ($3500) no se como aplicarla.

function totalCalc() {
    var qtys = +$(this).closest('tr').find('[name=quantity]').val();
    var prices = +$(this).closest('tr').find('[name=prices]').val();
    var sub = qtys * prices;
    $(this).closest('tr').find('.subtotal').val(sub);
    var sum = 0;
    var minimo = 3500;
    $('.subtotal').each(function() {
        var intermediate = +$(this).val();
        sum += +intermediate;
    });
    $('.sum-total').val(sum.toFixed(2));
}



$(document).ready(function(){
    var row = $('#price-calc tbody tr');
    row.on('mouseenter', function() {
        $(this).addClass('highlighted');
        $(this).siblings().not('.checked').addClass('blured');
    });
    row.on('mouseleave', function() {
        $(this).removeClass('highlighted');
        $(this).siblings().removeClass('blured');
    });
    row.each(function(idx){

        $(this).find('[type=checkbox]').on('change', function(){
            
            var qtys = +$(this).closest('tr').find('[name=quantity]').val();
            var prices = +$(this).closest('tr').find('[name=prices]').val();
            var sub = qtys * prices;
            var visibility = $(this).closest('tr').find('[name=quantity], [name=prices]');
            var subtotal = $(this).closest('tr').find('.subtotal');
            if($(this).is( ':checked' )) {
                $(this).closest('tr').addClass('checked');
                visibility.prop('disabled', false);
                subtotal.val(sub);
                var sum = 0;
                $('.subtotal').each(function() {
                    var intermediate = +$(this).val();
                    sum += intermediate;
                });
                $('.sum-total').val(sum.toFixed(2));
            } else {
                $(this).closest('tr').removeClass('checked');
                visibility.prop('disabled', true);
                var nosub = 0;
                var sum = +$('.sum-total').val() - sub;
                subtotal.val(nosub);
                $('.sum-total').val(sum.toFixed(2));
            }
        })

        $(this).find('.quantity').on('change', totalCalc);
    });
    $('.reset-btn').on('click', function() {
        $('[name=quantity], [name=prices]').prop('disabled', true);
        $('tr').removeClass('checked');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <form>
    <table id="price-calc">

      <tbody>
        <tr class="tabla-fijos">
          <td>Fijos</td>
          <td><input type="number" min="3" max="12" value="" name="quantity" class="quantity"></td>
          <td class="precios-flex">$ <input type="text" class="prices" value="75" name="prices" readonly></td>
          <td class="precios-flex">$ <input type="text" class="subtotal" value="0" name="subtotal" readonly></td>
        </tr>
        <tr class="tabla-itinerantes">
          <td>Itinerantes</td>
          <td><input type="number" min="1" max="5" value="" name="quantity" class="quantity" ></td>
          <td class="precios-flex">$ <input type="text" class="prices" value="275" name="prices" readonly></td>
          <td class="precios-flex">$ <input type="text" class="subtotal" value="0" name="subtotal" readonly></td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="tabla-total">
          <th colspan="4">Total</th>
          <th>$ <input type="text" id="Total" class="sum-total" value="" min="3500" name="" onChange="totalCalc()" readonly/>
          </th>
        </tr>

      </tfoot>
    </table>
  </form>
</div>

Este precio final mínimo de $3500 es el que no logro desarrollar. Como ven el cotizador, multiplica y suma correctamente, pero la variable minimo ($3500) no se como aplicarla.

1

2 respuestas 2

1

faltaba solo agregar una condición : if (sum >= minimo) ... else ..

aca te dejo como tendria que quedar el codigo

function totalCalc() {
    var qtys = +$(this).closest('tr').find('[name=quantity]').val();
    var prices = +$(this).closest('tr').find('[name=prices]').val();
    var sub = qtys * prices;
    $(this).closest('tr').find('.subtotal').val(sub);
    var sum = 0;
    var minimo = 3500;
    $('.subtotal').each(function() {
        var intermediate = +$(this).val();
        sum += +intermediate;
    });
    if(sum >= minimo)
      $('.sum-total').val(sum.toFixed(2));
    else 
       $('.sum-total').val(minimo.toFixed(2))
}



$(document).ready(function(){
    var row = $('#price-calc tbody tr');
    row.on('mouseenter', function() {
        $(this).addClass('highlighted');
        $(this).siblings().not('.checked').addClass('blured');
    });
    row.on('mouseleave', function() {
        $(this).removeClass('highlighted');
        $(this).siblings().removeClass('blured');
    });
    row.each(function(idx){
       
        $(this).find('[type=checkbox]').on('change', function(){
            
            var qtys = +$(this).closest('tr').find('[name=quantity]').val();
            var prices = +$(this).closest('tr').find('[name=prices]').val();
            var sub = qtys * prices;
            var visibility = $(this).closest('tr').find('[name=quantity], [name=prices]');
            var subtotal = $(this).closest('tr').find('.subtotal');
            if($(this).is( ':checked' )) {
                $(this).closest('tr').addClass('checked');
                visibility.prop('disabled', false);
                subtotal.val(sub);
                var sum = 0;
                $('.subtotal').each(function() {
                    var intermediate = +$(this).val();
                    sum += intermediate;
                });
                $('.sum-total').val(sum.toFixed(2));
            } else {
                $(this).closest('tr').removeClass('checked');
                visibility.prop('disabled', true);
                var nosub = 0;
                var sum = +$('.sum-total').val() - sub;
                subtotal.val(nosub);
                $('.sum-total').val(sum.toFixed(2));
            }
        })

        $(this).find('.quantity').on('change', totalCalc);
    });
    $('.reset-btn').on('click', function() {
        $('[name=quantity], [name=prices]').prop('disabled', true);
        $('tr').removeClass('checked');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <form>
    <table id="price-calc">

      <tbody>
        <tr class="tabla-fijos">
          <td>Fijos</td>
          <td><input type="number" min="3" max="12" value="" name="quantity" class="quantity"></td>
          <td class="precios-flex">$ <input type="text" class="prices" value="75" name="prices" readonly></td>
          <td class="precios-flex">$ <input type="text" class="subtotal" value="0" name="subtotal" readonly></td>
        </tr>
        <tr class="tabla-itinerantes">
          <td>Itinerantes</td>
          <td><input type="number" min="1" max="5" value="" name="quantity" class="quantity" ></td>
          <td class="precios-flex">$ <input type="text" class="prices" value="275" name="prices" readonly></td>
          <td class="precios-flex">$ <input type="text" class="subtotal" value="0" name="subtotal" readonly></td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="tabla-total">
          <th colspan="4">Total</th>
          <th>$ <input type="text" id="Total" class="sum-total" value="" min="3500" name="" onChange="totalCalc()" readonly/>
          </th>
        </tr>

      </tfoot>
    </table>
  </form>
</div>

1
  • Muchísimas gracias Federico, me diste una gran ayuda. Commented el 15 abr. 2019 a las 15:02
0

Un modo sencillo en tu desarrollo es comprobar el valor de sum respecto al valor mínimo y si es inferior a este cambiarlo antes de asignar dicho valor al input. He puesto el ejemplo con un valor mínimo de 1000 para que veas el funcionamiento, ya que en función de los límites de tus inputs el valor máximo del total siempre es inferior a 3500 (12 fijos + 5 itinerantes arrojan un total de 2275), con lo que no tendría sentido realizar el cálculo ya que el total siempre sería inferior al mínimo. Espero que te sirva.

function totalCalc() {
    var qtys = +$(this).closest('tr').find('[name=quantity]').val();
    var prices = +$(this).closest('tr').find('[name=prices]').val();
    var sub = qtys * prices;
    $(this).closest('tr').find('.subtotal').val(sub);
    var sum = 0;
    var minimo = 1000;
    $('.subtotal').each(function() {
        var intermediate = +$(this).val();
        sum += +intermediate;
    });
    if(sum < minimo) { sum = minimo; }
    $('.sum-total').val(sum.toFixed(2));
}



$(document).ready(function(){
    var row = $('#price-calc tbody tr');
    row.on('mouseenter', function() {
        $(this).addClass('highlighted');
        $(this).siblings().not('.checked').addClass('blured');
    });
    row.on('mouseleave', function() {
        $(this).removeClass('highlighted');
        $(this).siblings().removeClass('blured');
    });
    row.each(function(idx){

        $(this).find('[type=checkbox]').on('change', function(){
            
            var qtys = +$(this).closest('tr').find('[name=quantity]').val();
            var prices = +$(this).closest('tr').find('[name=prices]').val();
            var sub = qtys * prices;
            var visibility = $(this).closest('tr').find('[name=quantity], [name=prices]');
            var subtotal = $(this).closest('tr').find('.subtotal');
            var minimo = 1000;
            if($(this).is( ':checked' )) {
                $(this).closest('tr').addClass('checked');
                visibility.prop('disabled', false);
                subtotal.val(sub);
                var sum = 0;
                $('.subtotal').each(function() {
                    var intermediate = +$(this).val();
                    sum += intermediate;
                });
                if(sum < minimo) { sum = minimo; }
                $('.sum-total').val(sum.toFixed(2));
            } else {
                $(this).closest('tr').removeClass('checked');
                visibility.prop('disabled', true);
                var nosub = 0;
                var sum = +$('.sum-total').val() - sub;
                subtotal.val(nosub);
                if(sum < minimo) { sum = minimo; }
                $('.sum-total').val(sum.toFixed(2));
            }
        })

        $(this).find('.quantity').on('change', totalCalc);
    });
    $('.reset-btn').on('click', function() {
        $('[name=quantity], [name=prices]').prop('disabled', true);
        $('tr').removeClass('checked');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <form>
    <table id="price-calc">

      <tbody>
        <tr class="tabla-fijos">
          <td>Fijos</td>
          <td><input type="number" min="3" max="12" value="" name="quantity" class="quantity"></td>
          <td class="precios-flex">$ <input type="text" class="prices" value="75" name="prices" readonly></td>
          <td class="precios-flex">$ <input type="text" class="subtotal" value="0" name="subtotal" readonly></td>
        </tr>
        <tr class="tabla-itinerantes">
          <td>Itinerantes</td>
          <td><input type="number" min="1" max="5" value="" name="quantity" class="quantity" ></td>
          <td class="precios-flex">$ <input type="text" class="prices" value="275" name="prices" readonly></td>
          <td class="precios-flex">$ <input type="text" class="subtotal" value="0" name="subtotal" readonly></td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="tabla-total">
          <th colspan="4">Total</th>
          <th>$ <input type="text" id="Total" class="sum-total" value="" min="3500" name="" onChange="totalCalc()" readonly/>
          </th>
        </tr>

      </tfoot>
    </table>
  </form>
</div>

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.