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

emmx2012 · #1 (**permalink**) 27/08/2014, 09:06

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?

Cristian23CL4PTP · #2 (**permalink**) 27/08/2014, 09:26

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.

emmx2012 · #3 (**permalink**) 27/08/2014, 11:44

muchas gracias por el dato amigo, "vía hidden" te referís a input hidden verdad? voy a pensar en el codigo, gracias nuevamente

Cristian23CL4PTP · #4 (**permalink**) 27/08/2014, 11:47

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.

emmx2012 · #5 (**permalink**) 27/08/2014, 13:41

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>

Cristian23CL4PTP · #6 (**permalink**) 27/08/2014, 14:06

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

Código PHP:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    
    .hide
    {
      display: none
    }
  
  </style>
</head>
<body>
 
    <form class="form-horizontal" id="myForm">
        <label for="" class="col-lg-3 control-label">Precio:</label>
          <div class="col-lg-7">
           <input type="text" name="precio" id="precio" value="200000">        
         </div>
      </div>
 
        <label for="" class="col-lg-3 control-label">Cantidad:</label>
          <div class="col-lg-7">
            <input type="text" name="cantidad" id="cantidad" class="form-control input-sm">
 
        <label for="" class="col-lg-3 control-label"></label>
        <div class="col-lg-7">
            <button type="submit" id="boton" class="btn btn-default">Calcular</button>
      </form>
  </div>
 
  <div class="container">
    <div id="resultado" class="hide">
      
    </div>
  </div>
 
  
      <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
      <script type="text/javascript">
 
        $(document).ready(function() {
 
             $('#myForm').on('submit',function(e) {
              var precio = $("input#precio").val();
              var cantidad = $("input#cantidad").val();
                $.ajax({
                  url:'proceso.php',
                  data: "precio="+precio+"&cantidad="+cantidad,
                  type:  'POST',
                  success:  function (response) {
                        $("#resultado").removeClass('hide');
                        $("#resultado").html(response);
                   }
                  });
                 e.preventDefault();
            });
 
        });
 
      </script>
</body>
</html>

Código del archivo proceso.php

Código PHP:

Ver original<?php 
 
 
  $cantidad = $_POST['cantidad'];
  $precio = $_POST['precio'];
  $res = $cantidad * $precio;
 
  echo "El resultado es ".number_format($res,0,",",".");
 
 ?>

Espero te sirva para lo que deseas hacer. Salu2

emmx2012 · #7 (**permalink**) 27/08/2014, 14:33

funciona perfecto, lo voy a usar, muchisimas gracias amigo

cecitn · #8 (**permalink**) 02/12/2014, 18:25

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