{"id":2503,"date":"2012-04-13T20:54:00","date_gmt":"2012-04-13T20:54:00","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2503"},"modified":"2013-01-02T14:36:06","modified_gmt":"2013-01-02T14:36:06","slug":"incrementar-valor-de-un-input-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/","title":{"rendered":"Incrementar valor de un input con jQuery"},"content":{"rendered":"<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2523\" title=\"minus-mas\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png\" alt=\"\" width=\"148\" height=\"30\" \/><\/a>En este art\u00edculos vamos a explicar como disponer de un campo de texto num\u00e9rico 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.<\/p>\n<p>En nuestro &lt;head&gt; deberemos incluir la librer\u00eda jQuery y los scripts necesarios para decrementar y aumentar el valor del input.<\/p>\n<pre>&lt;script type=\"text\/javascript\" src=\"js\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0$('#min').click(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Solo si el valor del campo es diferente de 0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if ($('#quantity').val() != 0)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Decrementamos su valor\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#quantity').val(parseInt($('#quantity').val()) - 1);\r\n\u00a0\u00a0 \u00a0});\r\n\r\n\u00a0\u00a0 \u00a0$('#plus').click(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Aumentamos el valor del campo\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#quantity').val(parseInt($('#quantity').val()) + 1);\r\n\u00a0\u00a0 \u00a0});\r\n\r\n\u00a0\u00a0 \u00a0$('#enviar').click(function(){\u00a0\u00a0 \u00a0\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var quantity = $('#quantity').val();\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var dataString = 'quantity='+quantity;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$.ajax({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: \"POST\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url: \"quantity.php\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data: dataString,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 success: function(data) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#result').fadeIn(1000).html(data);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 });\u00a0\u00a0 \u00a0\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Con el script estamos esperando a que se pulse uno de los links que incrementar\u00e1n o disminuir\u00e1n el valor del input.<\/p>\n<p>Si pulsamos en el bot\u00f3n o link con id=\u00bbmin\u00bb decrementamos el valor del input solo si es mayor que 0 para evitar que entremos en n\u00famero negativos.<\/p>\n<p>Y si pulsamos en el bot\u00f3n o link con id=\u00bbplus\u00bb incrementamos el valor del input sin l\u00edmite de cantidad. Se podria poner un l\u00edmite condicionando el incremento.<\/p>\n<p>Lo siguiente no ser\u00eda necesaria pero podr\u00edamos tener un bot\u00f3n para enviar la cantidad que en este caso lo haremos utilizando AJAX mandando los datos mediante el m\u00e9todo POST al archivo \u00abquantity.php\u00bb.<\/p>\n<p>El archivo \u00abquatity.php\u00bb contiene lo siguiente:<\/p>\n<pre>&lt;?php\r\n$quantity = $_POST['quantity'];\r\necho 'Se van anadir '.$quantity.' productos.';\r\n?&gt;<\/pre>\n<p>El archivo simplemente recibe la cantidad enviada y la muestra en pantalla pero podr\u00edamos hacer otra serie de cosas como a\u00f1adir a un carrito o guardar en base de datos entre otros.<\/p>\n<p>Lo que se imprime en el archivo \u00abquantity.php\u00bb lo estamos depositando en un contenedor que tenemos vacio con id=\u00bbresults\u00bb que tendremos en nuestro &lt;body&gt;.<\/p>\n<pre>&lt;div id=\"result\"&gt;&lt;\/div&gt;<\/pre>\n<p>Despu\u00e9s tambi\u00e9n tendremos el formulario con 2 im\u00e1genes dentro de un link para realizar las funciones de incrementar y decrementar y el campo de texto donde se muestra la cantidad.<\/p>\n<pre>&lt;form method=\"post\"&gt;\r\n\u00a0\u00a0 \u00a0&lt;a id=\"min\" style=\"cursor:pointer;\"&gt;&lt;img src=\"images\/minusBtn.gif\"&gt;&lt;\/a&gt;\r\n\u00a0\u00a0 \u00a0&lt;input name=\"quantity\" id=\"quantity\" value=\"0\" size=\"4\" \/&gt;\r\n\u00a0\u00a0 \u00a0&lt;a id=\"plus\" style=\"cursor:pointer;\"&gt;&lt;img src=\"images\/plusBtn.gif\"&gt;&lt;\/a&gt;\r\n\u00a0\u00a0 \u00a0&lt;a id=\"enviar\" style=\"cursor:pointer;\"&gt;Enviar&lt;\/a&gt;\r\n&lt;\/form&gt;<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/plus-min-input\/\" target=\"_blank\">Ver el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculos vamos a explicar como disponer de un campo de texto num\u00e9rico 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 &lt;head&gt; deberemos incluir la librer\u00eda jQuery y los scripts necesarios para decrementar y [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2523,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,5],"tags":[84,79],"class_list":["post-2503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-jquery","tag-formularios","tag-inputs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Incrementar valor de un input con jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Incrementar valor de un input con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculos vamos a explicar como disponer de un campo de texto num\u00e9rico 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 &lt;head&gt; deberemos incluir la librer\u00eda jQuery y los scripts necesarios para decrementar y [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-13T20:54:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-01-02T14:36:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png\" \/>\n\t<meta property=\"og:image:width\" content=\"148\" \/>\n\t<meta property=\"og:image:height\" content=\"30\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/\",\"name\":\"Incrementar valor de un input con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png\",\"datePublished\":\"2012-04-13T20:54:00+00:00\",\"dateModified\":\"2013-01-02T14:36:06+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png\",\"width\":148,\"height\":30},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Incrementar valor de un input con jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Incrementar valor de un input con jQuery - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Incrementar valor de un input con jQuery - Jose Aguilar Blog","og_description":"En este art\u00edculos vamos a explicar como disponer de un campo de texto num\u00e9rico 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 &lt;head&gt; deberemos incluir la librer\u00eda jQuery y los scripts necesarios para decrementar y [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-04-13T20:54:00+00:00","article_modified_time":"2013-01-02T14:36:06+00:00","og_image":[{"width":148,"height":30,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/","name":"Incrementar valor de un input con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png","datePublished":"2012-04-13T20:54:00+00:00","dateModified":"2013-01-02T14:36:06+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/04\/minus-mas.png","width":148,"height":30},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/incrementar-valor-de-un-input-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Incrementar valor de un input con jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2503"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2503\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/2523"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}