DMXzone App Connect Support Product Page

Answered

Dynamic Event when checkbox is checked

Asked 10 Apr 2017 09:53:19
1
has this question
10 Apr 2017 09:53:19 Firdaus Rohman posted:
It would be great if I can set a value of other element when a checkbox is checked. Purpose: to pass value of checked checkbox as a value of other element like variable, input, filter etc. When the checkbox is not checked, the value of target element should return to its default value or no value.

Replies

Replied 12 Apr 2017 22:23:06
12 Apr 2017 22:23:06 George Petrov replied:
Hi Firdaus,

Actually what you want is not a Dynamic Event, but just to make other inputs disabled/hidden based on the checked state on a specific checkbox.

So what you want is for example when the checkbox is checked that the other field needs to be disabled and hidden. Disabled so it won't be submitted and hidden - just to hide it from the user

This can be done easily by going to the other field and adding there a Dynamic Attribute / Input / Disabled and choosing as a value !checkboxname.checked (use the thunder picker to select it and then add ! in front)

Then if you also want to hide it just select the field or a DIV container with its label around it - and add again Dynamic Attribute / Display / Hide: and specify as value again !checkboxname.checked

So that is all about it - you should always think with App Connect to make layouts data dependent - so when data changes - layout changes. And not by firing events.

Greetings,
George
Replied 13 Apr 2017 04:11:59
13 Apr 2017 04:11:59 Firdaus Rohman replied:
Hello George,

Thank you for your response.

However, what I really wish is something like;

set Dynamic Attributes of an input where checkbox.checked == true, output the value of checkbox

Right now, when I set dmx-bind:value="checkbox.value" it will output checkbox value regardless of the checkbox is checked or not. When I set dmx-bind:value="checkbox.checked, it will output true or false. I need the Dynamic Attributes to be able to get the value of a checkbox, when only it is checked.

Right now I do it with jQuery by triggering on checkbox change;

onChange="$('#target_input').val(this.checked ? $(this).val() : '')"

Back to what I wish for App Connect, when there are few checkboxes checked, Dynamic Attributes should be able to get those checked checkboxes values as an array like value1, value2, value 3 and so on. Of Course this can be achieved using jQuery or javascript but it would be neat if it can be implemented in App Connect.

Cheers.
Replied 13 Apr 2017 06:38:36
13 Apr 2017 06:38:36 George Petrov replied:

QuoteBack to what I wish for App Connect, when there are few checkboxes checked, Dynamic Attributes should be able to get those checked checkboxes values as an array like value1, value2, value 3 and so on. Of Course this can be achieved using jQuery or javascript but it would be neat if it can be implemented in App Connect.


Hi Firdaus,

Actually this is already possible - we have therefore a special "checkbox group" control - which makes a group of checkboxes and when you ask its value it will return an array with the checked values only. When you set its value to another array - it will automatically check only the checkboxes included in the array.

So go check it out!

Greetings,
George
Replied 13 Apr 2017 07:26:58
13 Apr 2017 07:26:58 Firdaus Rohman replied:
QuoteActually this is already possible - we have therefore a special "checkbox group" control - which makes a group of checkboxes and when you ask its value it will return an array with the checked values only.


Great! Is there tutorial on this subject?
Replied 13 Apr 2017 08:07:48
13 Apr 2017 08:07:48 George Petrov replied:
We will be making more in detail videos for the checkbox and radio groups. So it is coming up.

But it is really easy - just insert the "checkbox group" control in a form and you will see it. You can add it from the App Connect { + ) menu and then Forms

Greetings,
George
Replied 14 Apr 2017 00:13:18
14 Apr 2017 00:13:18 Firdaus Rohman replied:
I've checked it out but not sure if I did the right step.

In Checkbox Group Properties, I select corresponding checkbox value as Value.
Then, to get the checked checkbox values for an input field, I chose value of the Checkbox Group as Value.
But this doesn't output the value on the input field.
I also tried to put the checkbox inside Checkbox Group div and get same result.

<input name="checkbox" type="checkbox" id="checkbox" value="value" >
<div id="group1" is="dmx-checkbox-group" dmx-bind:value="checkbox.value"> </div>
<input type="text" id="text1" dmx-bind:value="group1.value[0].$value">

Further assistance on this is much appreciated.
Replied 14 Apr 2017 06:56:39
14 Apr 2017 06:56:39 George Petrov replied:
Hi Firdaus,

The checkboxes that are within a group - must be nested inside that group and have same name (id's can be different and unique), so in your case it will be something like:

<div id="group1" is="dmx-checkbox-group" dmx-bind:value="['val1','val2']">
   <input name="checkbox" type="checkbox" id="checkbox1" value="val1" >Checkbox 1
   <input name="checkbox" type="checkbox" id="checkbox2" value="val2" >Checkbox 2
   <input name="checkbox" type="checkbox" id="checkbox2" value="val3" >Checkbox 3
</div>
<input type="text" id="text1" dmx-bind:value="group1.value">


In the above sample the default value for the group is an array with two values - and those checkboxes get selected. As you see also in the text field below, the array of selected checkboxes values gets displayed - array is converted to command separated string automatically for display.

Hope it is a bit clearer now

Greetings,
George

Replied 19 Apr 2017 14:24:44
19 Apr 2017 14:24:44 Firdaus Rohman replied:
Works wonders!

Mystery solved ;-)

Thank you.

Reply to this topic