numeric field with up/down buttons controls

lucchini_silvio 04 Jan, 2016
Hi,
What is the best way to implement numeric field with up/down buttons controls?
thanks
GreyHead 05 Jan, 2016
Hi lucchini_silvio,

You can add a Custom element in the Designer tab and add HTML like this
<input name="text1" id="text1" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="number" min='2' max='99' />
This is the same HTML as a standard ChronoForms text input with type='text' replaced by type="number" min='2' max='99'

You can do the same with any of the other types - BUT note that they may not work correctly in older browsers AND the treatment varies between the current HTML 5 browsers :-( See this QuirkeMode page.For example, in Chrome you get a neat clicker - in Edge you get a mysterious 'x' and an error message on hover.

Another option is to use the jQuery UI spinner - you need to have the jQuery UI library loaded in the page, if it isn't already there on your site the jQueryEasy extension can help you manage this. Then add a Load JavaScript action in the form ON Load event and move it up before the HTML (Render form) action and add code like this for a basi spinner
jQuery(document).ready(function(jQ) {
  jQ('#text3').spinner();
});
For more options see the docs here

Check my test form here to see these two examples.

Bob
lucchini_silvio 07 Jan, 2016
Hi Bob,
I chose jquery

I managed to create an input field with jquery ui spinner
Now I have problems of conflict jquery (other parts of the site do not work anymore)
lucchini_silvio 07 Jan, 2016
solved with jQueryEasy extension
tankyou very much Bob
This topic is locked and no more replies can be posted.