Incrementar valor de un input con jQuery
En este artículos vamos a explicar como disponer de un campo de texto numérico en el cual podremos decrementar y aumentar su valor con 2 links o botones situados a su costado tal como vemos en la imagen utilizando jQuery.
En nuestro <head> deberemos incluir la librería jQuery y los scripts necesarios para decrementar y aumentar el valor del input.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#min').click(function(){
//Solo si el valor del campo es diferente de 0
if ($('#quantity').val() != 0)
//Decrementamos su valor
$('#quantity').val(parseInt($('#quantity').val()) - 1);
});
$('#plus').click(function(){
//Aumentamos el valor del campo
$('#quantity').val(parseInt($('#quantity').val()) + 1);
});
$('#enviar').click(function(){
var quantity = $('#quantity').val();
var dataString = 'quantity='+quantity;
$.ajax({
type: "POST",
url: "quantity.php",
data: dataString,
success: function(data) {
$('#result').fadeIn(1000).html(data);
}
});
});
});
</script>
Con el script estamos esperando a que se pulse uno de los links que incrementarán o disminuirán el valor del input.
Si pulsamos en el botón o link con id=»min» decrementamos el valor del input solo si es mayor que 0 para evitar que entremos en número negativos.
Y si pulsamos en el botón o link con id=»plus» incrementamos el valor del input sin límite de cantidad. Se podria poner un límite condicionando el incremento.
Lo siguiente no sería necesaria pero podríamos tener un botón para enviar la cantidad que en este caso lo haremos utilizando AJAX mandando los datos mediante el método POST al archivo «quantity.php».
El archivo «quatity.php» contiene lo siguiente:
<?php $quantity = $_POST['quantity']; echo 'Se van anadir '.$quantity.' productos.'; ?>
El archivo simplemente recibe la cantidad enviada y la muestra en pantalla pero podríamos hacer otra serie de cosas como añadir a un carrito o guardar en base de datos entre otros.
Lo que se imprime en el archivo «quantity.php» lo estamos depositando en un contenedor que tenemos vacio con id=»results» que tendremos en nuestro <body>.
<div id="result"></div>
Después también tendremos el formulario con 2 imágenes dentro de un link para realizar las funciones de incrementar y decrementar y el campo de texto donde se muestra la cantidad.
<form method="post"> <a id="min" style="cursor:pointer;"><img src="images/minusBtn.gif"></a> <input name="quantity" id="quantity" value="0" size="4" /> <a id="plus" style="cursor:pointer;"><img src="images/plusBtn.gif"></a> <a id="enviar" style="cursor:pointer;">Enviar</a> </form>
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
[…] Para incrementar y decrementar el valor de un campo de texto también llegamos a usar algo como lo que se indica en Incrementar valor de un input con jQuery. […]
Gracias me sirvió un fragmento del código que aumenta el valor del input al darle clic a un botón.
muy bueno su aporte , pero el archivo referente al jquery.js? puede indicar la pagina para descargar el script
Puede descargar la última versión de jQuery en su página oficial -> https://jquery.com
Hola Jose, lo primero felicitarte por el blog. Resulta muy útil para los que sabemos poco de programación.
Tb he llegado a través de Google, intentando resolver una pregunta parecida. Verás, quisiera implementar en mi web una especie de contador de solicitudes, parecido a los ejemplos que tienes en la web. La diferencia es que lo que quiero es que vaya conservando la cantidad.
Es decir, me gustaría poner una pregunta en la web, que diga: «los interesados en este tipo de productos pueden expresar aquí su interés, cuando se alcance un número significativo crearé una nueva versión». Pondría al lado un botón o link simple, de forma que cada vez que alguien pinchara se fuera sumando una unidad a la cifra total.
No sé si comprendes lo que te digo. Te lo pondré tb en un correo, pero como no he encontrado respuesta a mi pregunta a través de los buscadores, creo que podría estar bien si respondes por aquí para el resto de personas (desde luego será una información única a día de hoy).
Un saludo y gracias de antemano!!
Hola http://www.jose-aguilar.com. Encontré su sitio web a través de Google en la búsqueda de una cuestión similar, su sitio web tiene aquí arriba. Parece bueno. He marcado en mis favoritos de Google para volver más tarde.