Foros del Web » Programando para Internet » PHP »

Mostrar resultado de una operacion en el momento sin tener que actualizar

Estas en el tema de Mostrar resultado de una operacion en el momento sin tener que actualizar en el foro de PHP en Foros del Web. Hola, resulta que tengo que mostrar el precio de un producto (lo hago con php), y en la misma página quiero que el usuario seleccione ...
  #1 (permalink)  
Antiguo 27/08/2014, 09:06
 
Fecha de Ingreso: agosto-2014
Mensajes: 35
Antigüedad: 7 años, 10 meses
Puntos: 0
Mostrar resultado de una operacion en el momento sin tener que actualizar

Hola, resulta que tengo que mostrar el precio de un producto (lo hago con php), y en la misma página quiero que el usuario seleccione la cantidad del producto, me gustaría mostrar el total del precio (multiplicar el precio unidad por cantidad elegida) en el mismo instante, se puede con js o algo? me pueden ayudar?
  #2 (permalink)  
Antiguo 27/08/2014, 09:26
 
Fecha de Ingreso: agosto-2013
Ubicación: Talca
Mensajes: 40
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Mostrar resultado de una operacion en el momento sin tener que actualizar

Antes que nada un saludo.

Obviamente se puede y no es tan complicado como parece.

Yo use la función onkeyup de jQuery para hace algo parecido.

Puedes hacer lo siguiente:

Envías la cantidad que tecleo el usuario y el valor del producto (vía hidden) a otra pagina, y el resultado lo muestras en la misma pagina a través de jQuery en un div oculto, que solamente se muestra al darle clic al botón de calcular total o algo parecido, que en mi caso no use botón porque el total se iba calculando mientras el usuario escribía (por eso use onkeyup).

Espero te sirva la info.
  #3 (permalink)  
Antiguo 27/08/2014, 11:44
 
Fecha de Ingreso: agosto-2014
Mensajes: 35
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Mostrar resultado de una operacion en el momento sin tener que actualizar

muchas gracias por el dato amigo, "vía hidden" te referís a input hidden verdad? voy a pensar en el codigo, gracias nuevamente
  #4 (permalink)  
Antiguo 27/08/2014, 11:47
 
Fecha de Ingreso: agosto-2013
Ubicación: Talca
Mensajes: 40
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Mostrar resultado de una operacion en el momento sin tener que actualizar

Si, un input type hidden, y obtienes las variables a traves de jquery.
Si tienes problemas, me avisas y yo puedo guiarte o ayudarte.
Salu2.
  #5 (permalink)  
Antiguo 27/08/2014, 13:41
 
Fecha de Ingreso: agosto-2014
Mensajes: 35
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Mostrar resultado de una operacion en el momento sin tener que actualizar

No me sale, no sé javascript, o sea me gustaría que funcione para el input type number, probé con onclick, o sea algo asi (ésto no funciona xq no se javascript:P )
<html>
<head>
<title></title>
<script language='javascript'>
var precio = 170;
var porName=document.getElementsByName("cantidad")[0].value;
function up() {

var resultado = precio * porName;
document.forms[0].b.value = resultado;
}
</script>
</head>

<body>
<form>
Escoge cantidad:
<input type='number' id='cantidad' name='cantidad' value='1' required onclick="up()" />
<br>
onclick cambia: <input type="text" name="b" />
</form>
</body>
</html>
  #6 (permalink)  
Antiguo 27/08/2014, 14:06
 
Fecha de Ingreso: agosto-2013
Ubicación: Talca
Mensajes: 40
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Mostrar resultado de una operacion en el momento sin tener que actualizar

Puedes usar jQuery y ajax, aqui te deo un ejemplo 100% funcional, puedes copiar y pegar:

Código PHP:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style type="text/css">
  7.    
  8.     .hide
  9.     {
  10.       display: none
  11.     }
  12.  
  13.   </style>
  14. </head>
  15. <body>
  16.  
  17.     <form class="form-horizontal" id="myForm">
  18.         <label for="" class="col-lg-3 control-label">Precio:</label>
  19.           <div class="col-lg-7">
  20.            <input type="text" name="precio" id="precio" value="200000">        
  21.          </div>
  22.       </div>
  23.  
  24.         <label for="" class="col-lg-3 control-label">Cantidad:</label>
  25.           <div class="col-lg-7">
  26.             <input type="text" name="cantidad" id="cantidad" class="form-control input-sm">
  27.  
  28.         <label for="" class="col-lg-3 control-label"></label>
  29.         <div class="col-lg-7">
  30.             <button type="submit" id="boton" class="btn btn-default">Calcular</button>
  31.       </form>
  32.   </div>
  33.  
  34.   <div class="container">
  35.     <div id="resultado" class="hide">
  36.      
  37.     </div>
  38.   </div>
  39.  
  40.  
  41.       <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  42.       <script type="text/javascript">
  43.  
  44.         $(document).ready(function() {
  45.  
  46.              $('#myForm').on('submit',function(e) {
  47.               var precio = $("input#precio").val();
  48.               var cantidad = $("input#cantidad").val();
  49.                 $.ajax({
  50.                   url:'proceso.php',
  51.                   data: "precio="+precio+"&cantidad="+cantidad,
  52.                   type:  'POST',
  53.                   success:  function (response) {
  54.                         $("#resultado").removeClass('hide');
  55.                         $("#resultado").html(response);
  56.                    }
  57.                   });
  58.                  e.preventDefault();
  59.             });
  60.  
  61.         });
  62.  
  63.       </script>
  64. </body>
  65. </html>


Código del archivo proceso.php

Código PHP:
Ver original
  1. <?php
  2.  
  3.  
  4.   $cantidad = $_POST['cantidad'];
  5.   $precio = $_POST['precio'];
  6.   $res = $cantidad * $precio;
  7.  
  8.   echo "El resultado es ".number_format($res,0,",",".");
  9.  
  10.  ?>

Espero te sirva para lo que deseas hacer. Salu2
  #7 (permalink)  
Antiguo 27/08/2014, 14:33
 
Fecha de Ingreso: agosto-2014
Mensajes: 35
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Mostrar resultado de una operacion en el momento sin tener que actualizar

funciona perfecto, lo voy a usar, muchisimas gracias amigo
  #8 (permalink)  
Antiguo 02/12/2014, 18:25
Avatar de cecitn  
Fecha de Ingreso: noviembre-2014
Ubicación: misiones
Mensajes: 44
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Mostrar resultado de una operacion en el momento sin tener que actualizar

espectacularrrrr..... como hago para q guarde en la bd? el resultado final

Etiquetas: momento, operacion, resultado, tener
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:04.