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>

Ver el ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(8 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

6 respuestas a “Incrementar valor de un input con jQuery”

  1. […] 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. […]

  2. Gibran Salazar dice:

    Gracias me sirvió un fragmento del código que aumenta el valor del input al darle clic a un botón.

  3. ANGEL dice:

    muy bueno su aporte , pero el archivo referente al jquery.js? puede indicar la pagina para descargar el script

  4. Santi F. dice:

    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!!

  5. shore excursions in St.Petersburg, Russia dice:

    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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre