Being a novice to this topic, I would like to ask how to save the results of a checkbox group as an array, and then afterward save the array to a database when the form is submitted.
Here’s a screenshot image of the form’s checkbox group:
Checkbox1 value = Board, Checkbox2 value = Day, Checkbox3 value = Night. Whatever is checked would be saved as a comma separated value to the School Type column of the database.
Any help is very appreciated. Thank you for your consideration.
Edit: Sorry I didn’t read the paragraph after the screenshot, my instructions are not taking this in consideration. I’ve added a 2nd edit down below after my original reply to cover that case
Original reply below:
Receive 3 variables, for the checkboxes:
$_GET.board
$_GET.day
$_GET.night
In your Server Action steps, place a Group step:
Group checkboxes
Set Value board = $_GET.board
Set Value day = $_GET.day
Set Value night = $_GET.night
Then Database Insert, select the group variable you’ve created to insert into a column - hopefully that works. If it doesn’t work you might need to use the .toJSON() formatter to convert to a JSON string
In the database store as JSON/JSONB datatype, or as string
Edit 2:
Can you use the “join” formatter on the Group variable to join by a comma? The output would be a string
Thank you Apple! I appreciate your time and expertise.
I will be working on this today. If you don’t mind, I may refer to you if any issue pops up during my attempt to completed this page.
Where do these variables go?
In your Server Action steps, place a Group step:
Group checkboxes
Set Value board = $_GET.board
Set Value day = $_GET.day
Set Value night = $_GET.night
How is this done?
Thank you for helping my understanding.
Hi @revjrblack
Sorry for my bad english, in argentina we do what we can.
This is what you want to achieve?
Good afternoon Franse!
Yes, that is what I would like to do. The checkbox checked would render the output of either: Boarding, Day or Night.
I was trying to follow Apple’s instructions, however, I don’t think I’m able to follow some of the instructions.
Thanks for your assistance. And you don’t ever have to apologize for your English.
if you name all your checkboxes in the form the same for example check[] (the brackets create the array) this will then when you import to the server action be a POST value with multiple selected.
Then if you use $_POST.check.join(',') on the insert/update it will input a comma seperated array
This is what i do, but dont know if it is the best practice:
In server side:
I have an api action (insertarray.php) :
In the client side:
I have a checkbox group and a form, with a hidden input binded to the array from the checkbox group:
Here is the code:
<div class="container">
<div is="dmx-checkbox-group" id="group1" class="checkbox-group">
<input id="checkbox1" type="checkbox" value="board">
<input id="checkbox2" type="checkbox" value="day">
<input id="checkbox3" type="checkbox" value="night">
</div><form id="form1" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/insertarray.php">
<input id="text1" name="value_arrays" type="hidden" class="form-control" dmx-bind:value="group1.value"><button id="btn1" class="btn" type="submit">Button</button>
</form>
</div>
I’m going to give it a try. Afterward, I’ll let you all know how it turned out. Thanks again for your help!
It seems others jumped in with a slightly different approach that mine. If you need me again, feel free to ping me!
I sure will. Thanks!
Thank you all for your help and suggestions. Each had a perspective that ultimately helped me to arrive at a successful end, and I appreciate it very much!
This is what I finally settled on. After playing around with all the differing solutions. I started thinking with logic and finally the following dawned on me:
<div id="inp_school_type" class="form-group col" is="dmx-checkbox-group">
<legend class="pb-2" style="font-size: 16px;">School Type</legend>
<!-- group checkboxes -->
<div class="form-check form-check-inline mr-5">
<input class="form-check-input" type="checkbox" id="inlineCheckboxBoarding" value="Boarding" checked>
<label class="form-check-label" for="inlineCheckboxBoarding">Boarding</label>
</div>
<div class="form-check form-check-inline mr-5">
<input class="form-check-input" type="checkbox" id="inlineCheckboxDay" value="Day" checked>
<label class="form-check-label" for="inlineCheckboxDay">Day</label>
</div>
<div class="form-check form-check-inline mr-0">
<input class="form-check-input" type="checkbox" id="inlineCheckboxNight" value="Night" checked>
<label class="form-check-label" for="inlineCheckboxNight">Night</label>
</div>
<!-- group checkboxes -->
<!-- {{inlineCheckboxBoarding.checked.then('Boarding', '')+' '+inlineCheckboxDay.checked.then('Day', '')+' '+inlineCheckboxNight.checked.then('Night', '')}} -->
</div>
<input type="hidden" name="school_type" dmx-bind:value="(inlineCheckboxBoarding.checked.then(' Boarding ', '')+' '+inlineCheckboxDay.checked.then(' Day ', '')+' '+inlineCheckboxNight.checked.then(' Night ', ''))" id="school_type">
It works perfectly.
Thanks @revjrblack
Actually, I had looked at your post several days earlier.
But the checkboxes you use are hard-coded and don’t rely on dynamic values.
My checkboxes are generated after reading how many options and values exist in the source table.
It saves time and code and the same code will work again when the options change in another form on another project. All I have to do is have the User Admin save their own specific options.
My problem this time is that I have to allow Multiple Options to BE SELECTED, so I need the commas separating each option value selected.
However, maybe the code syntax you are using in the last part I can use.
Here’s what worked for me:
<div id="inp_school_type" class="form-group col-xl-8 mb-4" is="dmx-checkbox-group">
<legend class="pb-2" style="font-size: 16px;">Select All Applicable School Types</legend>
<!-- group checkboxes -->
<div class="form-check form-check-inline mr-5">
<input class="form-check-input" type="checkbox" id="inlineCheckboxBoarding" value="Boarding" checked>
<label class="form-check-label" for="inlineCheckboxBoarding">Boarding School</label>
</div>
<!-- Boarding -->
<div class="form-check form-check-inline mr-5">
<input class="form-check-input" type="checkbox" id="inlineCheckboxDay" value="Day" checked>
<label class="form-check-label" for="inlineCheckboxDay">Day Classes</label>
</div>
<!-- Day -->
<div class="form-check form-check-inline mr-0">
<input class="form-check-input" type="checkbox" id="inlineCheckboxNight" value="Night" checked>
<label class="form-check-label" for="inlineCheckboxNight">Night Classes</label>
</div>
<!-- Night -->
<!-- School Type -->
<input id="school_type" class="form-control" type="hidden" name="school_type" dmx-bind:value="(inlineCheckboxBoarding.checked.then('Boarding ', '')+' '+inlineCheckboxDay.checked.then('Day ', '')+' '+inlineCheckboxNight.checked.then('Night', ''))">
<!-- School Type -->
<!-- {{inlineCheckboxBoarding.checked.then('Boarding', '')+' '+inlineCheckboxDay.checked.then('Day', '')+' '+inlineCheckboxNight.checked.then('Night', '')}} -->
<!-- group checkboxes -->
</div>
<!-- SCHOOL TYPE -->Thank you. Unfortunately, the value[] solution can’t work with my code because the repeat looping just outputs as many value[] as the options themselves.
There needs to be only one value[] .
If 3 checkboxes are selected the insert sees 3 separate inserts and the only value inserted will be the last one.
Only the dropdown list I use handles a comma-separated string the correct way. Because it is not an array, it is simply one string of text with some commas.
If you want have only one of the series of checkboxes or radio buttons to be selected, then you will have to name all the inputs names the same. The values can be different, but the name must be the same. My example is different in that it is more static than dynamic. I needed a selection that would allow the user to choose to check only one or all selected.
You could take a look at what Teo said about dynamic checkboxes:
TeodorTeam
So this should be entered then in the checkbox group value:
connAccommodation.data.queryAirports.values("AirportID").map("$value.toString()")
Or go here: