1

estoy intentando con JavaScript hacer la suma de dos input, los cuales se llenan con los datos de un select en el cual se determina la cantidad de niños y por separado de adultos que participaran de una fiesta. La primera etapa la logré seleccionar la cantidad de personas, multiplicarla por el valor de la entrada y que me pinte el imput con el resultado correspondiente. No logro poder hacer que esos dos imput ya con valores se puedan sumar. Espero haber sido claro. Les paso el codigo a ver si me dan una mano. Muchas Gracias

    <div style="margin-bottom: 10px">Cantidad niños:</div>
    <div style="margin-bottom: 5px"><select name="ninios" id="ninios">
    <option value="" disabled selected>Seleccionar...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select></div>
    <div style="margin-bottom: 5px"><input name="precioninios" type="text" 
    id="precioninios" value=""></div>
    <div style="margin-bottom: 10px">Cantidad Adultos:</div>
    <div style="margin-bottom: 5px"><select name="adultos" id="adultos">
    <option value="" disabled selected>Seleccionar...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    
    </select></div>
    <div style="margin-bottom: 5px"><input type="text" id="precioadultos" value=""> 
    </div>
    <div style="margin-bottom: 10px">Total:</div>
    <div style="margin-bottom: 5px"><input type="text" id="total" value="0" readonly/> 
    </div>

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"> 
</script>
<script>
$(function(){
$(document).on('change','#ninios',function(){ //detectamos el evento change
    var value = $(this).val();//sacamos el valor del select
    var valorninios = value * 25000.00;
  $('#precioninios').val(valorninios);//le agregamos el valor al input (notese que el 
input debe tener un ID para que le caiga el valor)
});
$(document).on('change','#adultos',function(){//detectamos el evento change
var value1 = $(this).val();//sacamos el valor del select
var valoradultos = value1 * 50000.00;
$('#precioadultos').val(valoradultos);
});
var adultos = valoradultos;
var ninios = valorninios;
var total = adultos + ninios;
$('#total').val(total);
});
</script>

1 respuesta 1

3

Tu código se confunde entre tantas declaraciones de variables repetitivas e innecesarias.

Una forma de lograr lo que quieres sería declarar las variables inicializadas a 0 (aunque hay mejores formas, ver al respecto el segundo fragmento de código y los comentarios en el mismo).

Luego, debes actualizar el total en cada on change, porque ambos pueden cambiar el valor final.

Observa que además se escuchan los cambios específicos, por el id de los elementos, sin tener que pasar por document

$(function() {
  var ninios = 0;
  var adultos = 0;
  var total = 0;
  $("#ninios").on('change', function() {
    ninios = $(this).val() * 25000.00;
    $('#precioninios').val(ninios);
    total = adultos + ninios;
    $('#total').val(total);
  });
  
  $("#adultos").on('change', function() {
    adultos = $(this).val() * 50000.00;
    $('#precioadultos').val(adultos);
    total = adultos + ninios;
    $('#total').val(total);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div style="margin-bottom: 10px">Cantidad niños:</div>
<div style="margin-bottom: 5px">
  <select name="ninios" id="ninios">
    <option value="" disabled selected>Seleccionar...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>
<div style="margin-bottom: 5px"><input name="precioninios" type="text" id="precioninios" value=""></div>
<div style="margin-bottom: 10px">Cantidad Adultos:</div>
<div style="margin-bottom: 5px">
  <select name="adultos" id="adultos">
    <option value="" disabled selected>Seleccionar...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>

  </select>
</div>
<div style="margin-bottom: 5px"><input type="text" id="precioadultos" value="">
</div>
<div style="margin-bottom: 10px">Total:</div>
<div style="margin-bottom: 5px"><input type="text" id="total" />
</div>


Pero el código podría simplificarse aún más, ya que se pueden escuchar varios elementos a la vez, sea por su id, sea asignádoles una clase (lo haremos de este modo). Luego, programáticamente, podemos jugar con los ids de los elementos, para hacer las asignaciones que correspondan.

He puesto comentarios en cada parte para que se entienda lo que ocurre en cada etapa.

$(function() {
  /*Objeto para los múltiplos, 
  usamos el id de cada elemento 
  para asociarlo a un valor*/
  var multiplo = {
    ninios: 25000.00,
    adultos: 50000.00
  };
  /*Escuchamos los cambios de todos los elementos 
  que tengan class="totalizable"*/
  $(".totalizable").on('change', function() {
    /*Determinamos el id 
    del elemento que cambió usando this*/
    var id = this.id;
    /*Determinamos el input a cambiar 
    usando la cadena "precios" 
    más el id del elemento que cambió*/
    var theInput = `#precio${id}`;
    /*Hacemos el cálculo de 
    valor * múltiplo y los asignamos*/
    $(theInput).val($(this).val() * multiplo[id]);
    /*Sumamos el total de los inputs que tengan class="total"
    usando para ello un bucle each*/
    var total=0;
    $('.total').each(function() {
      total += parseFloat(this.value);
    });
    //Asignamos el valor al input con id="total"
    $('#total').val(total);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div style="margin-bottom: 10px">Cantidad niños:</div>
<div style="margin-bottom: 5px">
  <select name="ninios" id="ninios" class="totalizable">
    <option value="" disabled selected>Seleccionar...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>
<div style="margin-bottom: 5px"><input name="precioninios" type="text" id="precioninios" value="0" class="total"></div>
<div style="margin-bottom: 10px">Cantidad Adultos:</div>
<div style="margin-bottom: 5px">
  <select name="adultos" id="adultos" class="totalizable">
    <option value="" disabled selected>Seleccionar...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>

  </select>
</div>
<div style="margin-bottom: 5px"><input type="text" id="precioadultos" class="total" value="0">
</div>
<div style="margin-bottom: 10px">Total:</div>
<div style="margin-bottom: 5px"><input type="text" id="total" />
</div>

La ventaja de este tipo de programación es que permite un código más abreviado, flexible y fácil de mantener. Supongamos que en un futuro se necesita otro select llamado ancianos. Sólo tienes que agregar ese select, agregar un input para el precio y un valor para el múltiplo. Todo lo demás funcionaría sin tener que hacer ningún cambio en el código.

2
  • Sos un genio, gracias Cedano Commented el 5 sept. a las 22:24
  • @AlejandroArla me alegro de que te haya servido. Cuando puedas revisa la última parte de la respuesta, donde podrás ver una forma aún más simple de hacerlo, jugando con los ids y reutilizando código.
    – A. Cedano
    Commented el 5 sept. a las 22:41

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.