Incrementar valor del input con más y menos
En este artículos vamos a explicar una de las formas más sencillas de tener un input de valores enteros con 2 botones para aumentar y disminuir el valor.
Lo primero que deberemos hacer es incluir en el <head> las funciones javascript necesarios para llevar a cabo lo que queremos:
<script language="JavaScript1.2">
function UpdateCartQuantity() {
document.cart_quantity.submit();
}
function changeQuantity(qty) {
document.cart_quantity['quantity'].value = Number(document.cart_quantity['quantity'].value)+Number(qty);
UpdateCartQuantity();
}
</script>
Como puedes ver vamos a utilizar 2 funciones; la función UpdateCartQuantity() nos actualiza el valor del input con el valor que se haya escrito al enviar el formulario y la función changeQuantity(qty) la utilizan los botones más y menos para incrementar o decrementar el valor del input.
Después en el <body> deberemos tener un formulario como el que sigue:
<form name="cart_quantity" method="post" action="index.php"> <a href="javascript:changeQuantity(-1)"><img src="images/minusBtn.gif"></a> <input name="quantity" id="quantity" value="<?php echo $_POST['quantity']; ?>" size="4" onChange="UpdateCartQuantity();" /> <a href="javascript:changeQuantity(1)"><img src="images/plusBtn.gif"></a> <input type="submit" name="enviar" value="Enviar" /> </form>
Dentro del formulario tenemos 2 links para las imágenes menos y más y un campo input text con el valor de la cantidad enviada. Y por último, tenemos un botón de Enviar.
Cuando pulsamos el botón de Enviar ejecutaríamos el siguiente código:
<?php
if (isset($_POST['enviar'])) {
echo '<p>Cantidad requerida: ' . $_POST['quantity'] . '</p>';
}
?>
En este caso lo único que estamos haciendo es imprimir por pantalla el valor del campo pero se podrían hacer otros procesos más sotisficados.
Autor
¿Buscas trabajo de programador?
5 respuestas a “Incrementar valor del input con más y menos”
Deja una respuesta
118 artículos que te podrían interesar
Ver más sobre
Hola. Me parece muy bueno y quiero utilizarlo pero, por algún error que estoy cometiendo no me funciona. En vez de salir el resultado sale
¿Alguna ayuda
Muchas gracias y saludos
Hola,
No pude ver que te sale. Si puedes enviarnos un enlace de tu sitio web para que pueda verlo, le puedo dar un vistazo rápido.
Saludos
I just want to say I’m new to blogging and certainly liked this website. Most likely I’m planning to bookmark your blog . You absolutely have wonderful articles. Thanks for sharing your website.
Me ha sido de gran ayuda, muchas gracias por compartir tus conocimientos.
Rattling superb visual appeal on this web site , I’d rate it 10 10.