Title: Using buttons to increase/decrease the value
Last modified: September 18, 2022

---

# Using buttons to increase/decrease the value

 *  Resolved [miikkaj](https://wordpress.org/support/users/miikkaj/)
 * (@miikkaj)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/using-buttons-to-increase-decrease-the-value/)
 * Hi,
 * What is the most straightforward way to add -/+ buttons around or next to the
   number field?
 * I already added the buttons, wrote the OnClick functions that increase and decrease
   the value by one when clicked. However, with this solution the calculation isn’t
   working properly. I guess my solution isn’t the correct one. Do you have some
   ready solution for this kind of need?
 * And thank you for the awesome plugin!

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/using-buttons-to-increase-decrease-the-value/#post-16020776)
 * Hello [@miikkaj](https://wordpress.org/support/users/miikkaj/)
 * Thank you very much for using our plugin.
 * The number fields have spinner icons included by the browser. But if you prefer
   using button fields, you can follow the steps below:
 * 1. Enter the `spinner` class name through its “Add CSS Layout Keywords” attribute
   in the number field.
 * 2. Insert an “HTML Content” field in the form and enter the following piece of
   code through its content:
 *     ```
       <script>
       fbuilderjQuery(document).one('showHideDepEvent', function(){
       jQuery('#fbuilder .spinner input')
       .after('<button type="button" class="up">+</button>')
       .before('<button type="button" class="down">-</button>');	
       });
   
       jQuery(document).on( 'click', '#fbuilder .spinner .up', function(){
       	var e = jQuery(this).closest('.spinner').find('[type="number"]'), v = e.val()*1;
       	if(1 <= v) v = FLOOR(SUM(v,1));
       	else v = SUM(v,0.1);
       	e.val(PREC(v,1,true));
       });
       jQuery(document).on( 'click', '#fbuilder .spinner .down', function(){
       	var e = e = jQuery(this).closest('.spinner').find('[type="number"]'), v = e.val()*1;
       	if(1 < v) v = CEIL(v-1);
       	else v = v-0.1;
       	e.val(PREC(v,1,true));
       });
       </script>
       ```
   
 * Best regards.
 *  Thread Starter [miikkaj](https://wordpress.org/support/users/miikkaj/)
 * (@miikkaj)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/using-buttons-to-increase-decrease-the-value/#post-16021178)
 * Hi [@codepeople](https://wordpress.org/support/users/codepeople/)
 * Your support is simply awesome. I think I’m going to update to Developer to support
   your business 🙂
 * But one more thing, using -+ buttons changes the values but the calculator’s 
   dynamic evaluating is not working with this method. I have selected the option
   to eval on onchange and keyup events. The result updating requires typing the
   value.
 * What should I add to the code to enable the dynamic evaluating when -/+ buttons
   clicked?
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/using-buttons-to-increase-decrease-the-value/#post-16021266)
 * Hello [@miikkaj](https://wordpress.org/support/users/miikkaj/)
 * Please, triggers the onchange event after assigning the field’s values.
 * Edit the piece of code `e.val(PREC(v,1,true));` (please, note it appears twice
   in the block of code) as follows `e.val(PREC(v,1,true)).change();`
 * Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Using buttons to increase/decrease the value’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [3 years, 8 months ago](https://wordpress.org/support/topic/using-buttons-to-increase-decrease-the-value/#post-16021266)
 * Status: resolved