0
<tr>
<td>
    <label class="title">Chocolate: </label><br>
 <label><?php echo $ver[4];  ?></label>
</td> 

<td> 
    <input type="hidden" name="ChocolateIn" value="<?php echo $ver[4];  ?>">

    <input type="number" class="form-control form-control-lg" name="Chocolate" placeholder="Saldo" required >
</td>

    <input type="hidden" id="preciochocolate"  value="500"/>


<td>
    <input type="text" class="form-control form-control-sm"  id="RChocolate" name="RChocolate" value="0" readonly>

</td>  


Limonada:

    <label><?php echo $ver[5];  ?></label>
</td>

<td>  
    <input type="hidden" name="LimonadaIn" value="<?php echo $ver[5];  ?>">

    <input type="number" class="form-control form-control-lg" name="Limonada" placeholder="Saldo" required>
</td>

    <input type="hidden" id="preciolimonada" value="350"/>

<td>
    <input type="text" class="form-control form-control-sm" id="RLimonada" name="RLimonada" value="0" readonly >
</td>

**Nesesito que reste el valor del input "ChocolateIn" que resulta de una consulta sql. lo reste con el valor del input "Chocolate" que lo ingrese el usuaio manualmente el resultado de esa operacion lo multiplique con el valor del input "preciochocolate" el resultado de eso quede almacenado en el input "RChocolate" asi mismo con la otra fila de "Limonada"

al final me muestre la suma de los input "RChocolate y RLimonada" sin hacer uso de botones gracias soy nuevo pero aprendo rapido, uso php html, como debo de realizar estas operaciones gracias **

2 respuestas 2

1

Coloca esto codigo javascript despues de todo tu html:

<script>
 
 document.querySelector("input[name=Chocolate]").addEventListener("input", function(e){
    var chocoin= document.querySelector("input[name=ChocolateIn]").value;
 var chocolate= e.target.value;  
 var chocoprecio= document.getElementById("preciochocolate").value; 
 var rescho= ( parseInt(chocoin) - parseInt( chocolate)) * parseInt(  chocoprecio);

 document.querySelector("input[name=RChocolate]").value=    (  chocolate.length == 0 ||  rescho === NaN || rescho === undefined) ? 0 : rescho ;


});

   document.querySelector("input[name=Limonada]").addEventListener("input", function(e){
    var limoin= document.querySelector("input[name=LimonadaIn]").value;
 var limonada=  e.target.value; 
 var limoprecio= document.getElementById("preciolimonada").value;
 var reslim= ( parseInt(limoin) - parseInt( limonada)) * parseInt(  limoprecio);
 document.querySelector("input[name=RLimonada]").value=    (  limonada.length == 0 || reslim === NaN || reslim === undefined) ? 0 : reslim ;
/**************************/
//nueva linea a agregar
var totalf= rescho +reslim;
document.getElementById("result-final").value= totalf;
/**agrega un input a tu formulario

<input type="number" id="result-final" readonly/>
   }) ;

 

 </script>

Los eventos tipo input son utiles para campos donde vas tipeando valores y quieres capturar sus valores reales en el momento que escribes nuevos digitos. Ademas no necesitaras botones con este codigo

13
  • Muhcas gracias funciono a la perfeccion, como la varibles que agrego son muchas, como debo de implementar el codigo para usarlo no al final de mi html, si no, en otra pagina .js para que no quede tan cargado una pagina con tanto codigo gracias Commented el 22 sept. 2018 a las 18:39
  • copia todo eso codigo javascript (pero sin los tags <script></script>), solo el contenido y lo guardas en un archivo con extension js, de preferencia guardalo en la misma ubicacion de tu archivo html. Y despues del body agregas esta linea: <script type="text/javascript" src="tuarchivo.js"></script> Commented el 22 sept. 2018 a las 19:35
  • listo lo hice como me dijiste me sale este error operaciones.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null at operaciones.js:1 Commented el 22 sept. 2018 a las 23:34
  • Si te da ese error, lo mas probable es que no esta encontrando el elemento html al que se pretende asignar el evento, donde haz colocado la linea de <script.... ? Postealo y analizaremos que es lo que falla Commented el 22 sept. 2018 a las 23:43
  • como me dijiste lo puse debajo del body <head> <meta charset="utf-8"> <title>Menu</title> </head> <body> <script type="text/javascript" src="operaciones.js"></script> Commented el 22 sept. 2018 a las 23:48
1

listo ya pude realizar la suma de los inputs dinamicos, busque en foros de nuestra plataforma y encontre este codigo que me funciono, sumando las clases. Muchas graciasa Sonia Toledo por todo su apoyo.

    <script >

  function suma() {
      var add = 0;
      $('.form-control-sm').each(function() {
          if (!isNaN($(this).val())) {
              add += Number($(this).val());
          }
      });
      $('#totalventa').val(add);
    
  };
</script>

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.