0

Tengo este formulario en html, quiero que cada uno de los input se sume y el resultado se muestre en "Subtotal". Primero en la sección de "Micro procesador" el valor se regresa de un input radio hacia un input text, en la sección de "Disco duro" el valor se regresa de un select a un input text.

Estos valores que se regresan al input text quiero que se sumen automáticamente, de acuerdo a lo que el usuario seleccione y el resultado de la suma se muestre en el input text "Subtotal". Coloqué la función onkeyup="sumar();" en los dos input text, sin embargo no logro hacer que el código funcione, me ayudaría mucho a saber cuál es mi error, muchas gracias.

    $("input").change(function(){

   
$("#rInput2").val($("input:radio[name=procesador]:checked").val());

    
});

  $(document).on('change', '#disco', function(event) {
     $('#Option').val($("#disco option:selected").val());
});

  function sumar() {

  var total = 0;

  $(".monto").each(function() {

    if (isNaN(parseFloat($(this).val()))) {

      total += 0;

    } else {

      total += parseFloat($(this).val());

    }

  });

  document.getElementById('Subtotal').innerHTML = total;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  
  <form id="form">
    
<fieldset>

<h3> Micro Procesador</h3>

<input type="radio" id="input2" name="procesador" value="1000" checked=""  />i3<br />
<input type="radio" name="procesador" value="2500" />i5<br />
<input type="radio" name="procesador" value="6000" />i7<br />

<div id="resultado2"><input id="rInput2" type="text" placeholder="1000" onkeyup="sumar();" class="monto"></div>


<h3>Disco duro</h3>


    <select name="disco" id="disco" >
     
      <option value="800" selected>Disco 512 GB</option>
      <option value="1200">Disco 1024 GB</option>
      <option value="1500">Disco 2048 GB</option>

 <div id="resultado3"><input id="Option" type="text" placeholder="800" onkeyup="sumar();" class="monto"></div>
<br>

  
    </select>


<div id="resultado4"><input id="Subtotal" type="text" > SUBTOTAL</div>
   

<br>
<input type="reset" name="borrar" value="LIMPIAR" id="borrar">
  </fieldset>


  </form>
</body>

1 respuesta 1

1

La primera línea de tu script no es correcta $("input").change(function(){, porque aplica para cualquier elemento input, no solo al radio. Luego, asignaste eventos onkeyup para los campos con clase monto, pero esos no los debe modificar el usuario, así que están de sobra.

Solución, luego de hacer cambio de procesador o disco duro, se actualizan los campos y se ejecuta sumar():

$("input[type='radio']").on('change', function(){
    $("#rInput2").val($("input:radio[name=procesador]:checked").val());
    sumar();
    
});
$('#disco').on('change', function(event) {
     $('#Option').val($("#disco option:selected").val());
     sumar();
});

function sumar() {
  var total = 0;
  $(".monto").each(function() {

    if (isNaN(parseFloat($(this).val()))) {

      total += 0;

    } else {

      total += parseFloat($(this).val());

    }

  });
  $('#Subtotal').val(total);

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  
  <form id="form">
    
<fieldset>

<h3> Micro Procesador</h3>

<input type="radio" name="procesador" value="1000" checked=""  />i3<br />
<input type="radio" name="procesador" value="2500" />i5<br />
<input type="radio" name="procesador" value="6000" />i7<br />

<div id="resultado2"><input id="rInput2" type="text" placeholder="1000" class="monto"></div>


<h3>Disco duro</h3>


    <select name="disco" id="disco" >
     
      <option value="800" selected>Disco 512 GB</option>
      <option value="1200">Disco 1024 GB</option>
      <option value="1500">Disco 2048 GB</option>

 <div id="resultado3"><input id="Option" type="text" placeholder="800" class="monto"></div>
<br>

  
    </select>


<div id="resultado4"><input id="Subtotal" type="text" disabled> SUBTOTAL</div>
   

<br>
<input type="reset" name="borrar" value="LIMPIAR" id="borrar">
  </fieldset>


  </form>
</body>

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.