show/hide a field

[FRW]

Could anyone give an example to show and hide a field, depending on the value of another field using the new JS event functions?

Field A (single select) with values 1 and 2

Field B shown, if value of field A = 1 and hidden if field A = 2

 

[FRW]

Try and error:

within formsconfigurator I give the name of the function to field A: onchange:dadabik_test

in custom_function.js I wrote:

function dadabik_test(field)
{
if (field.value === 'A') {
alert('A');
}
else
{
alert('B');
}

This works. But how can I say "hide" and "show" to the html-element span id="B" ?

 

[FRW]

Next try:

function dadabik_test(field)
{
if (field.value === 'A') {
$("#B").show;
}
else
{
$("#B").hide;;
}

Will show/hide the inputfield depending on the selected value. how to get the label to show/hide also?

 

[FRW]

For all other:

function dadabik_test(field)
{
if (field.value === 'A') {
$('label[for="B"]').show();
$("#B").show();
}
else
{
$('label[for="B"]').hide();
$("#B").hide();
}

 

[eugenio]

Hi,
that's a clever use of the JS event functions!
I think, however, that can hide some problems because even if you hide a field, the code "expects" the field is there ... the first things that come to my mind are:

- when the form is reloaded because you have a validation error (e.g. you didn't fill a required field) I guess that hidden fields become visible again

- the save / insert function expects the (now hidden) field to be there (because it has the permission for that form) so I am not sure if everything is going to work correctly.

There could be other issues as well.

Best,

 

[FRW]

OK, thank you for the hint!

I changed it now to:

function dadabik_test(field)
{
if (field.value === 'A') {
$('label[for="B"]').css('visibility', 'visible');
$("#B").css('visibility', 'visible');
}
else
{
$('label[for="B"]').css('visibility', 'hidden');
$("#B").css('visibility', 'hidden');
}

 

[Deleted member 75341]

Please Mr. FRW/Mr.Tacchini is possible to have the same funcion for Dadabik 8.3 (PHP)?
Thank you in advance.

 

[eugenio]

Hello,
I am sorry but the JS custom functions is a feature introduced in DaDaBIK 9 and it won't be added to DaDaBIK 8.3.

Best,

 

[Deleted member 75341]

I understood about JS function but what I mean is if something like this can be done using dadabik_calculate and in case positive how to do.
Thanks in advance.

 

[FRW]

I think the problem is the trigger (on change, on clock aso...) this will only happen with dadabik 9 an JS custom functions

 

[eugenio]

Hello,
no, you cannot run JS functions using calculated fields.

Best,

 

[Rox]

Thanks to both. I've used the same code of FRW, but I tried to compact the field when not visible.
Here the results (I'm not a coder, so it's just a try that work):

function dadabik_test(field)
{
if (field.value === "A"){
$('label[for="B"]').css('visibility', 'visible');
$("#B").css('visibility','visible');
$('label[for="B"]').css('display', 'block');
$("#B").css('display', 'block');
$('label[for="B"]').css('max-height', '250px');
$("#B").css('max-height', '250px');
}
else
{
$('label[for="B"]').css('visibility', 'hidden');
$("#B").css('visibility','hidden');
$('label[for="B"]').css('display', 'block');
$("#B").css('display', 'block');
$('label[for="B"]').css('max-height', '0px');
$("#B").css('max-height', '0px');
}
}

I would like to create another JS function that, on page load, automatically hidden the field B, so that it will be show only if field A has the value "A"... Something like:
function dadabik_defaulthidden(field)
{
$('label[for="B"]').css('visibility', 'hidden');
$("#B").css('visibility','hidden');
$('label[for="B"]').css('display', 'block');
$("#B").css('display', 'block');
$('label[for="B"]').css('max-height', '0px');
$("#B").css('max-height', '0px');
}

Unfortunately it's seems that the unload and onbeforeonload trigger doesn't work... Any suggest?

My system info are:
You are using DaDaBIK version 9.0-Monterosso enterprise, installed on 16-08-2018 (installation code: 0), the latest version of DaDaBIK is 9.0-Monterosso released on 05-07-2018

You are runnning the last release of DaDaBIK

PHP Version: 7.2.7

mysql version: 5.7.21

Web server: Apache/2.2.34 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.2.7 mod_ssl/2.2.34 OpenSSL/1.0.2o DAV/2 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.9 Perl/v5.24.0

Client: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15

Ale

 

[FRW]

I have done this with a custom css-file:

for default set the visibility to hidden an then use the JS-Event onchange in the Form to make it visible

 

[Rox]

How can you set a specific field to hidden in the css file if you don't know the label associated to the field itself?
In your example, how can set the field "B" in hidden mode?

Thanks in advance

FRW Wrote:
-------------------------------------------------------
> I have done this with a custom css-file:
>
> for default set the visibility to hidden an then u
> se the JS-Event onchange in the Form to make it vi
> sible

 

[FRW]

In my custom css. I wrote:

[pre]
select[name="stat_grund"] {visibility:hidden;}
label[for="stat_grund"] {visibility:hidden;}

input[name="stat_datum"] {visibility:hidden;}
label[for="stat_datum"] {visibility:hidden;}

span[id="aenderung"] {visibility:hidden;}
label[for="aenderung"] {visibility:hidden;}
[/pre]

Before I looked into the sourcecode to see, (f.e.) wich span-id I have to use.

 

[Rox]

Thank you for you reply. I'll try to do the same

 

[Rox]

I used this code to reduce the "white space" when field is hidden in the custom css:
span[id="your_id_field"] {display:block; visibility:hidden; max-height:0px;}
label[for="your_id_field"] {visibility:hidden;}

 

[FRW]

Thx for the hint - I'll give it a try ;-)

 

[drashrafsabry]

will it be in any future release to put the hide fields depending on value of a drop down for e.g

 

[FRW]

You can do it right now!
The js event onchange will work on a select_single field.

We wait further to get it work on select_single_radio or select_multi_checkbox...