Aumentar y disminuir valor de textbox con javascript o PHP

[imerburu]

Buenas. Estoy construyendo un carrito de la compra, y cuando muestro los productos en el carrito en detalle me aparece la cantidad (por defecto 1) de unidades de cada producto.

Lo que me gustaría hacer es colocar un botón de + a la derecha y otro de - a la izquierda del campo de texto con el valor cantidad de unidades, para ir subiendo o bajando dicho valor y que el resultado se vea en la misma página.

¿Alguien tiene un ejemplo sencillo de esto en PHP o Javascript por el cual me pueda guiar para culminar mi carrito?

Gracias

[WeSoRz]

Depende de como tengas planteado el carrito hay varias formas de hacerlo más o menos complejas. Si es en AJAX, se podría hacer que al cambiar el valor del campo cantidad se actualizase automáticamente en la BBDD.
Si por el contrario tienes un botón llamado "actualizar" o similar, bastará con hacer un JS que aumente o disminuya el valor del campo de cantidad.

En qué caso nos encontramos?

[imerburu]

Hola WeSorz

El carrito que he usado es exactamente este:

http://www.programacionweb.net/articulos/articulo/?num=329

Es de los más conocidos por lo que he podido ver por la red.

me decanto más por la solución que me has dicho de javascript, porque es más o menos lo que tenía pensado en mi primer boceto, a partir de ahí, soy todo oidos qué me puedes ofrecer? :D

Al principio intenté poner un botón sumar que me llevara a otro php la variable, le sumara uno y me redireccionara otra vez a la anterior página, pero soy un poco patán y no lo he logrado... :(

[WeSoRz]

Por lo que he visto tienes esto:

Código HTML:

<input name="cantidad" type="text" id="cantidad" value="<?php echo $v['cantidad'] ?>" size="8">
 

Aunque las ids deberían ser únicas, para el ejemplo me sirve:

Código HTML:

<a href="#" onclick="document.getElementById('cantidad').value = parseInt(document.getElementById('cantidad').value) - 1" title="">-</a>
<input name="cantidad" type="text" id="cantidad" value="3" size="8">
<a href="#" onclick="document.getElementById('cantidad').value = parseInt(document.getElementById('cantidad').value) + 1" title="">+</a>
 

Creo que con eso te sobra para lo que quieres. Aunque te recomiendo que te crees por ejemplo una funcion para aumentar o disminuir la cantidad, así el código será muchísimo más legible. Pero la base al menos ya la tienes :)

[imerburu]

Muchas gracias, en un rato lo pruebo y te cuento que tal me ha ido ;)

[GatorV]

Tema movido desde PHP a Javascript

[imerburu]

WeSoRz, ya está resuelto, ha quedado perfecto.

Nada más he tenido que cambiar unas cosillas, y sin función funciona perfectamente, muchas gracias!

Espero verte por aquí en algún otro momento para que me saques las castañas del fuego ;)

[WeSoRz]

Me alegra que te sirviese :)

Por aquí espero estar algún tiempo más, que en un par de días o 3 que llevo activo ha sido gratificante ayudar a la gente ;)

[TylerD]

WeSoRz , una pregunta sobre el codigo que has puesto un poco mas arriba.. he usado eso en unas funciones tal que asi:

Código HTML:

 <script>
 function suma(obj)
  { document.getElementById('cantidad').value = parseInt(document.getElementById('cantidad').value) + 1; }
  function resta(obj)
 { document.getElementById('cantidad').value = parseInt(document.getElementById('cantidad').value) - 1; }
 </script> 

pero el problema es que por ejemplo si tengo 4 filas en el carrito le doy a cualquiera de los signos '+' y se suma solo el primero porque no le especifico en que formulario es ( sin embargo se lo paso como argumento ) como lo asocio para que sepa en que formulario buscar el id de cantidad? pensaba en algo como esto:

Código HTML:

document.obj.getElementById('cantidad').value = parseInt(document.obj.getElementById('cantidad').value) + 1;

pero no sirve :/


EDITO: ya esta solucionado , he cambiado las funciones directamente a las imagenes de + y - en cada formulario y en 'cantidad' he puesto un codigo para cada uno.

[WeSoRz]

Efectivamente, la solución era un identificador para cada uno, ya que las ids son únicas.

[TylerD]

WeSoRz!! otra dudilla que tengo :P

estoy haciendo una funcion en javascript que compruebe al darle actualizar que el numero en el campo cantidad no sea menor que 0 ni mayor que el stock de ese producto , lo que estoy intentando hacer es algo como esto:

esta es la linea de codigo de la imagen actualizar donbde llamo a la funcion de javascript con los argumentos (form , cant ) que vendrian siendo el nombre del formulario y el nombre del campo cantidad :

Código:

      
   <input name="imageField" type="image" src="actualizar.gif" width="20" height="20" border="0" onclick="comp(<?php echo $pepe ?>,<?php echo $v['cod_prod'] ?>)"></td>

y esta es la funcion:

Código:

 
 <script>
 function comp(formss,cant){

  if (document.formss.cant.value < 1 )
    { 
	 alert("no puedes tener menos de 1 producto")
return false;
   } 
	document.formss.action='agregacar.php';
    document.formss.submit();
 }
 </script>

y no funciona.. :/

[_cronos2]

Al acceder al formulario de manera literal JS busca el form 'formss' y el campo 'cant'. Lo que puedes hacer es usar colecciones:

Código Javascript:

var campo = document.forms[formss].elements[cant];
 

Saludos (:

[TylerD]

he puesto lo siguiente:

Código:

 
<script>
 function comp(formss,cant){

var campoc = document.forms[formss].elements[cant];
  if (campoc < 1)
    { 
	 alert("si")
   }

 }

mas que todo por probar y no me sale :( estoy entrando en desesperamiento xD

[_cronos2]

campoc es un elemento HTML, y estás comprobando si es menor que 1, no tiene mucho sentido, ¿verdad?
Saludos (:

[TylerD]

y como manejo un elemento HTML? xD :(

[_cronos2]

Accede a su value.

[TylerD]

Tambien lo probe asi , pero me no me salio ;_;

@EDITO: ya solucione todos los problemas que tenia sobre este tema , muchas gracias ^^

[marx-pola]

Hola TylerD: estoy tratando de hacer lo mismo que tú, lo de incrementar la cantidad de producto por cada fila ingresada en el listado del carrito. ¿Podrías postear el código y script que utilizaste por favor para solucionarlo?
Muchas gracias y saludos.
Marx.