3

Estoy usando el siguiente script que encontré acá y funciona perfectamente para inputs. Ahora cuando yo le agrego valores desde selects si no agrego ningún número en un input y es todo select no me hace la suma, por lo que debo hacer al final de todo un input donde debo agregar el valor 0 y quisiera evitar esto.

Quisiera agregar un botón de ultima que diga Calcular y al hacer clic haga todo el cálculo.

PD: Olvide mencionar que calculo 3 montos y las funciones en javascript tienen los nombres sumar, sumar2 y sumar3.

function sumar3() {
  var total = 0;
  $(".moto3").each(function() {
    if (isNaN(parseFloat($(this).val()))) {
      total += 0;
    } else {
      total += parseFloat($(this).val());
    }
  });
  //alert(total);
  document.getElementById('spTotal3').value = total;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="moto3 form-control col-sm-12" onkeyup="sumar3();" >
        <option value="0">Sin Datos</option>
        <option value="500">1</option>
        <option value="1000">2</option>
        <option value="1500">3</option>
        <option value="2000">4</option>
</select>

<select class="moto3 form-control col-sm-12" onkeyup="sumar3();" >
        <option value="0">Sin Datos</option>
        <option value="500">1</option>
        <option value="1000">2</option>
        <option value="1500">3</option>
        <option value="2000">4</option>
</select>

<select class="moto3 form-control col-sm-12" onkeyup="sumar3();" >
        <option value="0">Sin Datos</option>
        <option value="500">1</option>
        <option value="1000">2</option>
        <option value="1500">3</option>
        <option value="2000">4</option>
</select>

<input type="text" id="txt_campo_1" class="moto3" onkeyup="sumar3();"  style="border: 1px solid black;"/ >

<input id="spTotal3" class="inputcentrado2"  name="total" placeholder="RESULTADO">

2 respuestas 2

1

El evento que estas buscando es onchange. Puedes hacerlo asi:

function sumar3() {
  var total = 0;
  $(".moto3").each(function() {
    if (isNaN(parseFloat($(this).val()))) {
      total += 0;
    } else {
      total += parseFloat($(this).val());
    }
  });
  //alert(total);
  document.getElementById('spTotal3').value = total;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="moto3 form-control col-sm-12" onchange="sumar3();" >
        <option value="0">Sin Datos</option>
        <option value="500">1</option>
        <option value="1000">2</option>
        <option value="1500">3</option>
        <option value="2000">4</option>
</select>

<select class="moto3 form-control col-sm-12" onchange="sumar3();" >
        <option value="0">Sin Datos</option>
        <option value="500">1</option>
        <option value="1000">2</option>
        <option value="1500">3</option>
        <option value="2000">4</option>
</select>

<select class="moto3 form-control col-sm-12" onchange="sumar3();" >
        <option value="0">Sin Datos</option>
        <option value="500">1</option>
        <option value="1000">2</option>
        <option value="1500">3</option>
        <option value="2000">4</option>
</select>

<input type="text" id="txt_campo_1" class="moto3" onkeyup="sumar3();"  style="border: 1px solid black;"/ >

<input id="spTotal3" class="inputcentrado2"  name="total" placeholder="RESULTADO">

2
  • Perfecto eso me re sirvio, ahora tengo otro problema tengo un select al seleccionar me da "valores".Este input no se suma hasta que seleccione otro select. <input type="hidden" id='costototal' value="Sin especificar" class="monto" onchange="sumar();" /> el javascript que hace esto es var opciones = { "0": ["", "", "", "", "Sin especificar"], "1": ["1", "1", "tipo", "3000", "900"] } function cambioOpciones() { var combo = document.getElementById('opciones'); var opcion = combo.value; document.getElementById('costototal').value = opciones[opcion][3]; }
    – DMGse
    Commented el 23 may. 2019 a las 16:06
  • Eso lo deberias plantear en otra pregunta.
    – alanfcm
    Commented el 23 may. 2019 a las 16:19
1

EL evento onkeyup funciona para input dónde puedas escribir, para el select es el evento onchange al hacer un cambio en sus valores, así te debería funcionar.

function sumar3() {
  var total = 0;
  $(".moto3").each(function() {
    if (isNaN(parseFloat($(this).val()))) {
      total += 0;
    } else {
      total += parseFloat($(this).val());
    }
  });
  //alert(total);
  document.getElementById('spTotal3').value = total;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="moto3 form-control col-sm-12" onchange="sumar3();" >
        <option value="0">Sin Datos</option>
        <option value="500">1</option>
        <option value="1000">2</option>
        <option value="1500">3</option>
        <option value="2000">4</option>
</select>

<select class="moto3 form-control col-sm-12" onchange="sumar3();" >
        <option value="0">Sin Datos</option>
        <option value="500">1</option>
        <option value="1000">2</option>
        <option value="1500">3</option>
        <option value="2000">4</option>
</select>

<select class="moto3 form-control col-sm-12" onchange="sumar3();" >
        <option value="0">Sin Datos</option>
        <option value="500">1</option>
        <option value="1000">2</option>
        <option value="1500">3</option>
        <option value="2000">4</option>
</select>

<input id="spTotal3" class="inputcentrado2"  name="total" placeholder="RESULTADO">

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.