Boolean question: how to get checkbox inside a repeat table to update value in a Data Store on change?

Wappler General
#1

Hi all boolean experts

I have a checkbox in the repeat table below:
<tbody id="poll_question_table" is="dmx-repeat" dmx-bind:repeat="questions.data" key="$id">

Checkbox:
<input class="form-check-input float-right position-static" type="checkbox" checked="" value="1" id="randomise" name="poll_random" dmx-on:changed="questions.update({$id: '$id'},{randomise: checked})" dmx-bind:checked="randomise">

The checkbox updates the data store Boolean value “randomise” on Value Changed, but I can not get the checkbox to work.

Where am I going wrong?

On repeat row creation I want the checkbox to be empty and then on change to be checked or unchecked by updating the data store boolean value on Value Changed. It loos like nothing is changing on Value Changed or alternatively Value Updated.

I just can not get it to work.

Any help to show how this should be and why if possible would be great :smiley:

#2

OK Upodate:

This is the closest I could get it to work. I have been unable to get the checkbox showing the Data store value even if “true”.

So I have reverted to clearing the check box on refresh by setting the Value to '' so the user has to select it again.
<tbody id=“poll_question_table” is=“dmx-repeat” dmx-bind:repeat=“questions.data” key="$id">

<input class=“form-check-input float-right position-static” type=“checkbox” id=“randomise” dmx-bind:id=“randomise{{$id}}” name=“poll_random” dmx-on:updated=“questions.update({$id: $id},{randomise: checked})” dmx-bind:value=“checked”>
<label class=“form-check-label float-right col-form-label-sm” for=“randomise” dmx-bind:for=“randomise{{$id}}” id=“check_randomise_label”>Randomise Answer Options</label>

Anyone know how to correctly show the true or false value in a check box pulling data from a data store?

#3

So is what you want to do - when the user checks the checkbox - store it’s value in the data store and when unchecked - remove the value from there?

#4

HI @Teodor

I have that bit working and seems to work just fine.

But if I refresh the page the fields in the form which ref the datastore are showing the correct value as in the data store, except the checkboxes and I just can’t seem to work out how to correctly display the checkbox based on the datastore value,

If the datastore boolean is ‘true’ the checkbox should be checked and when the datastore is false the checkbox should display unchecked. But all my attempts have failed.

Can this be done?

#5

I don’t understand what is the purpose of this in your checkbox code:

dmx-bind:value=“checked”

Why are you not using static value like 1 there? Why using a dynamic value?

In order to check or uncheck the checkbox based on an expression then use the dynamic checked attribute.

Example:

dmx-bind:checked="some_expression == 1"

will check the checkbox when some_expression equals 1. Replace some_expression with the expression you want to check and 1 with the value you expect it to return.

#6

Thanks @Teodor

This gave me an idea and this works:

questions.data[$index].randomise and returns the Data store value is persistent after refresh.

Final code for the checkbox in a repeat to update the Data store and return the Data store value.

<input class="form-check-input float-right position-static" type="checkbox" id="randomise" dmx-bind:id="randomise{{$id}}" name="poll_random" dmx-on:updated="questions.update({$id: $id},{randomise: checked})" dmx-bind:checked="questions.data[$index].randomise" value="1">

<label class="form-check-label float-right col-form-label-sm" for="randomise" dmx-bind:for="randomise{{$id}}" id="check_randomise_label">Randomise Answer Options</label>