Dynamically Check Multiple Checkboxes

In this tutorial we will show you how to check multiple checkboxes, based on a database value. This is useful if you are using an update record form, or some details page which show multiple checkboxes that rely on a dynamic value.
In our case this is our update record page, which shows reservations info:

We insert the values from the checkboxes in our database in a single field, comma separated:

So, let’s add the checkboxes on the page. Select where you want to add them:

Select Multiple Checkbox Group:

Change the group label to whatever you need it to be:

You can edit or remove the dummy checkboxes added in the group. Also you can add more.
In order to edit a checkbox, just select it in the App Structure then add a value for it:

Then select its label and edit it:

When you are done editing the checkboxes or adding new ones, select the form group holding them(1) and click the dynamic data picker for the value(2):

Select the binding, which returns the checkbox data from your database and click the format data button:

Right click your binding, then open the Manipulation category and select Split:

Set , (comma) in the character field:

Click Select to apply the selection:

And you are done. The multiple checkbox group automatically checks the checkboxes which values are stored in the database:


WapplerPrevious   WapplerNext


9 Likes

@Teodor good to know! I would have done this with a help table, but thats also good here!

Yes, you can store these in another table, but most of our users are storing them in a single field :slight_smile:

2 Likes

A created a checkbox form a little differently but it seems to work when retrieving the data.

Here is part of the code:

<label for="inp_Category" class="col-form-label col-5 col-md-2 col-sm-3">Category<BR>(Pick up to 3)</label>
<div class="col-7 offset-sm-0 col-sm-8">
	<div is="dmx-checkbox-group" id="categories" class="checkbox-group" dmx-bind:value="1">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" value="1" id="inp_Category1" name="Category" dmx-bind:checked="getadinfo.data.query1.Category.contains(1)" data-rule-maxitems="3" data-msg-maxitems="Please select no more than {0} items.">
			<label class="form-check-label" for="inp_Category">Copiers</label>
			<BR>
			<input class="form-check-input" type="checkbox" value="2" id="inp_Category2" name="Category" dmx-bind:checked="getadinfo.data.query1.Category.contains(2)">
			<label class="form-check-label" for="inp_Category">Digital Presses</label>
			<BR>
			<input class="form-check-input" type="checkbox" value="3" id="inp_Category3" name="Category" dmx-bind:checked="getadinfo.data.query1.Category.contains(3)">
			<label class="form-check-label" for="inp_Category">Large Format</label>
			<BR>
		</div>
	</div>
</div>

What is the proper way to update the database with this info? I have a form with 8 categories that you can check. I named all of the names for all 8 checkboxes as “category”. When the update occurs it updates 1 at a time so only the highest number is saved.

Basically, if I select boxes 1,3 and 5, it will update the database to 1, then 3, then 5 – so only the 5 is saved. How do I get it to enter “1,3,5” into the database field.

Thanks,
Tom

Can you send a screenshot of your server action with the $_POST Global shown as well as a second screenshot with your database insert/update shown.

Basically you are going to POST an array of all the values checked from your checkbox group and then you are going to use a formatter of join to send the comma separated list of values into your database.
Your database field type will also need to be a varchar or something so it can take integers and commas as well.

I was able to get it to work by adding a “categories” hidden field using the following value:

dmx-bind:value=“categories.inp_Category1.checked.then(categories.inp_Category1.value,’’)+’,’+categories.inp_Category2.checked.then(categories.inp_Category2.value,’’)+’,’+categories.inp_Category3.checked.then(categories.inp_Category3.value,’’)+’,’+categories.inp_Category4.checked.then(categories.inp_Category4.value,’’)+’,’+categories.inp_Category5.checked.then(categories.inp_Category5.value,’’)+’,’+categories.inp_Category6.checked.then(categories.inp_Category6.value,’’)+’,’+categories.inp_Category7.checked.then(categories.inp_Category7.value,’’)+’,’+categories.inp_Category8.checked.then(categories.inp_Category8.value,’’)”>

I changed the update sql to use the “post_categories” field instead of the category field for the update.

Probably not the correct way or best way of doing this.

If there is a better way, I would love to know how to code it.

Attached are the 2 screenshots.

hey Teodor,

About this post, how to make this work using a database table?

best!