CalcBuilder Forum

Conditional showing of input fields in the form layout

User adk 2018-11-11 20:09:49

Sorry to bother you again and I hope you do not find me too demanding.

I have the next question.

In the calculator of our product the user can choose with a YES/NO field if he wants windows in our product.
When the user chooses YES than some extra input fields should appear:
1. a number field with how may windows
2. a radiobutton field with the options 'opening by hand' or 'opening by electric motor'.
When the user chooses NO the mentioned number and radiobutton fields should not appear in the form layout. Is this possible?

Can this be done by a default method in your Calc Builder or do I have to use special javascript?

Or in other word, is it possible to show only certain input fields when a YES/NO condition is met?

Best regards,

AdK

Moonsoft support 2018-11-12 10:14:17

Hi,
there is no special setting for adding this function at the default configuration, but it can be easily added with some javascript at the tab 'executed on loaded page'

The first step would be to enclose the section you want to hide/show inside any container you can identify afterwards, at the form layout, for ex, inside a div with id="mysection"

Then at the javascript tab, you only need to hide the section, and show it when checkbox is checked.

//hide by default
CB("#mysection").hide();

//show when checkbox is checked, we attach a change event , change XXXXX for your chech field nama

CB("input").change(function(){
//hide by default again
CB("#mysection").hide();
//show if checked
if(CB(this).is(':checked'))
CB("#mysection").show();
});

That should do the work
Hope this helps, regards

...
Support/development

Perfect for small code changes or to correct any bug at your site

Buy now!
...
CalcBuilder

Create dynamic calculators

Buy now!