DEV Community

Viktor H. Morales
Viktor H. Morales

Posted on

HTML Input: add plus and minus buttons with JavaScript (or jQuery)

This is a translation from my spanish version written on my personal blog: https://viktormorales.com/diseno-y-desarrollo-web/html-input-agregar-botones-mas-y-menos-con-javascript/

A customer asked me to add plus (+) and minus (-) button before and after an HTML Input of type "number" for his WooCommerce store.

Add plus and minus buttons with jQuery

As the customer website is running on WordPress and as this platform has the library jQuery on it, I developed a solution using that library:

Add plus and minus buttons with JavaScript

So I was happy with the result but I wanted to code it in plain JS as well:

🍻 Cheers!

Top comments (2)

Collapse
 
leigh_j profile image
Leigh

Hey @viktormorales - thanks for sharing this... this is exactly what I'm looking to include on one of my Wordpress forms, using Gravity Forms. Is that possible?

Collapse
 
viktormorales profile image
Viktor H. Morales

Dear Leigh, it is totally possible as we use JavaScript for that porpuse. This code will add plus and minus button to all input fields with type "number". I already answered your email so I can help you out with this.