Store IDs of checked checkboxes into local storage

[sitestreet]

I’ve gone blank with this one but am sure it’s easy.

I have a dynamic table with one column containing a checkbox. I want to be able to tick any number of them but instead of passing them to a server action, I want to store the IDs in an array in local storage so I can then do other things with them.

I’ve put it all in a form but I’m not sure that’s necessary.

What’s the technique for doing this?

[sitestreet]

Perhaps this isn’t as easy as I hoped. Can anyone assist me at all?

[TomD]

Here’s a snippet from a test file I created a while ago, when the array component was introduced:

<input class="form-check-input" type="checkbox" value="" id="id_checkbox_cell" name="idlist[]" dmx-bind:checked="id_checkbox_all.checked" dmx-bind:value="stock_id" dmx-on:updated="id_checkbox_cell.checked == true ? arrayChecked.addUniq(stock_id) : arrayChecked.remove(stock_id)">

It’s within a repeat as you would expect. There may well be other/better ways of doing this.

I forgot to mention that I use a dynamic event on the Array (on updated) to update it with the list of IDs.

[Teodor]

Well you can setup a localstorage manager and add a variable in it which will store the items.
Then with a checkbox group component, use the on:updated event and store its value there:

<div is="dmx-checkbox-group" id="group1" class="checkbox-group" dmx-on:updated="local1.set('items',value)">
    <div dmx-repeat:repeat1="serverconnect1.data.query1">
        <label><input id="checkbox1" type="checkbox" dmx-bind:value="country_code"> {{country_name}}</label>
    </div>
</div>

[sitestreet]

Thanks for the assistance. I already have a Bootstrap 4 table using the generator so the

is="dmx-repeat" dmx-generator="bs4table"

is already there.

I’ve added a column to the table and put the checkbox there:

<td class="text-center">
  <div>
    <input class="form-check-input" type="checkbox" name="RegistrantID[]" dmx-bind:value="RecordID" dmx-bind:id="inp_registrant_id_{{$index}}" value="0">
  </div>
</td>

Where should the dmx-on:updated go?

[Teodor]

So you are not using the checkbox group component but separate checkboxes?

[sitestreet]

Yes, but happy to use the checkbox group component if that’s how I should do it. I think where I’m confused is the repeat part as the checkbox group component seems to need to have its own repeat.

[sitestreet]

Would you able to give me a steer on this?

Anyone?

[sitestreet]

Sorry to keep posting but I’m at a loss with this.

[sitestreet]

How should I use a checkbox group component within a generated bootstrap table?

[Teodor]

Quite a lot of activity here One reply is just enough @sitestreet, we do our best to reply the questions here even during the weekends, when the office is closed.

If you are using checkboxes in a table and not with a checkbox group component then you can use the array component.

1. On click store the selected items in the array component

• Add new dynamic event to the checkbox, on changed and check if the item is already in the array, if it’s there remove it and if it’s not - add it: arr1.items.contains(value) ? arr1.remove(value) : arr1.addUniq(value)

2. Use the dynamic events of the array component - on updated and and set its value to the local storage.

[sitestreet]

Thanks @Teodor. Sorry for all the posts, I have literally spent hours trying to get this sorted and kept seeing my post drop down the thread. Shall I remove them?

I’ll go through what you’ve suggested now but it’s looking very promising.

I appreciate all the time you spend in the forum and the speed you reply, even during the weekends.

[sitestreet]

Brilliant @Teodor. I’ve not used the Array Component before and that was the key. I’m sure to use it much more now I know about it.

I do, however, have one thing not quite right. It’s working perfectly except 80% of the time, the first checkbox I click doesn’t store the value. Further clicks work fine but the first one becomes out of sync - checked is NOT in the array, unchecked IS in the array but only that one checkbox. All the others work fine.

Any ideas why this might be?

[Teodor]

Just tested this but it works fine here …

[sitestreet]

Hmm, it’s a strange one. I shall do some more testing. I’ve had the breakthrough I needed and am extremely grateful for that. I should be able to sort this issue.

Thanks again

[sitestreet]

I’ve found the issue but am at a loss as to why!

I’ve changed this:

dmx-on:changed

to this:

dmx-on:click

and it’s now working reliably.

[Teodor]

This has been improved in Wappler 5.2.1. Now there are two new dynamic events for the checkboxes - checked and unchecked, so you can run different actions depending on the checkbox status.