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!

Comments

[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?

[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.