How to create dynamic checkboxes?

Following these instructions in the Docs I have created a Dynamic Menu

The code in my form page that produces the dynamic select menu is this:

<div is="dmx-checkbox-group" id="group1" class="form-check-input" type="checkbox" dmx-bind:value="trainings.data.query[0].int_events+trainings.data.query[0].training_title+trainings.data.query[0].training_details+trainings.data.query[0].training_code+trainings.data.query[0].date_start+trainings.data.query[0].date_expire"></div>

Now I want to create dynamic Check box fields in the form that look like this –

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="1" id="inp_int_event" name="int_event1">
<label class="form-check-label col-form-label" for="inp_int_event1" id="training1">Name of Event Training 1</label>
</div>

I want these to be generated dynamically, too. The menu list is connected to a table with multiple records – a different event and its details in each row.

If a new event row is added to this table in the back end then the list of 7 checkboxed options should dynamically result in 8 checkboxed options.

This is a PHP to mysql project. In PHP I’ve created dynamic lists linked to a table but what are the Wappler components and steps to convert the Dynamic Select Menu into a checkbox list like this?

The easiest way is to create a repeat children region and place the checkbox control inside it. Here’s how it looks in the App Structure:

You will need to make the checkbox id and value dynamic, as well as the for attribute of the label. The code looks like:

<div id="repeat1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.query">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="checkboxes[]" dmx-bind:id="'checkbox'+id" dmx-bind:value="id">
                <label class="form-check-label" dmx-bind:for="'checkbox'+id">{{airport}}</label>
            </div>
        </div>

Which with my sample data source results in:

Thank you, @Teodor !

This should be a Tutorial in the Docs!

Just one more detail for me to use it.

Each checkbox clicked has to post that value into a separate field in the form table --
name=int_event1
name=int_event2
name=int_event3

in sequence and ending in field "int_event7"

A manually created checkbox input looked like this

<input class="form-check-input" type="checkbox" value="2" id="inp_int_event2" name="int_event2">
  <label class="form-check-label" for="inp_int_event1">Training event 2</label>

When checked the value is '1' or '2' or '3' etc, etc.
When any of the check boxes are not checked the value passes a '0'

In my insert API I set the default values --

So I have to modify the dynamic list checkbox I have now so that the name is dynamically generated for each output checkbox field -- which I suppose is "int_event"+

I've tried something like this -- it doesn't produce errors but I doubt I have done this correctly

 <div id="repeat2" is="dmx-repeat" dmx-bind:repeat="trainings.data.query">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="int_event.trainings.data.query[0].int_events" dmx-bind:id="'checkbox'+id" dmx-bind:value="trainings.data.query[0].int_events" dmx-bind:name="int_event.trainings.data.query[0].int_events">
                    <label class="form-check-label" dmx-bind:for="'int_event'+id">{{training_title}}</label>
                </div>
            </div>

Not sure i understand your idea here. You need these checkboxes to be dynamic, but are they always 7? So you always know their exact number and name?

Yes. 7 fields because this is not a check box group say, saved to an array held in one field.

Client wants to see multiple submissions from the same user over time where Separate events have their own field or column if it is an Excel sheet.

At any rate — and each checkbox sends the event id number into a field devoted to the history of registrations to that event.

On submission Event 1 when clicked sends value 1 to event_id1
On submission Event 2 when clicked sends value 2 to event_id2
On submission Event 3 when clicked sends value 3 to event_id3
On submission Event 4 when clicked sends value 4 to event_id4

As my query image shows.

The dynamic query code I now have looks like this in my form –

<div id="repeat2" is="dmx-repeat" dmx-bind:repeat="trainings.data.query">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="int_event.trainings.data.query[0].int_events" dmx-bind:id="'checkbox'+id" dmx-bind:value="trainings.data.query[0].int_events" dmx-bind:name="int_event.trainings.data.query[0].int_events">
                    <label class="form-check-label" dmx-bind:for="'int_event'+id">{{training_title}}</label>
                </div>
            </div>

The unique field id is just a number 1 or 2 or 3 which I wanted to use to append to the input name=“event_id”+" in effect –

which is what I was trying with:

name="int_event.trainings.data.query[0].int_events" hoping that it would write out name=“event_id1”
and next dynanic row would read – name=“event_id2” etc etc

because

each eents table record starts with event_id = 1
event_id = 2
event_id = 3
and now with 4 records of events –
event_id =4

But when I check the output on submit in
Developer Tools it shows one dynamic check box input all with same value= “1”
The dynamic labels are working so it is stepping through the table

            <input class="form-check-input" type="checkbox" is="dmx-checkbox" value="1" id="checkbox">
            <label class="form-check-label" for="int_event">Profiler-Training: Blasenentzündung</label>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" is="dmx-checkbox" value="1" id="checkbox">
            <label class="form-check-label" for="int_event">Soventol® Sommerberatungstraining</label>
        </div>

It’s still not clear to me. Can you answer the questions as shortly and simply as possible?

  1. Are your checkboxes always going to be 7 and exactly 7? (yes / no)
  2. If the answer to previous question is yes - do you want to store each checkbox value in a separate database column?
  3. If the answer is no - how do you want to handle the values if the checkboxes are not exactly 7?
  1. Are your checkboxes always going to be 7 and exactly 7? (yes / no) NO
  1. If the answer to previous question is yes - do you want to store each checkbox value in a separate database column? In 2022 the client expects have no more than 6 events. I added one spare field the 7th record.

IF the Events table expands to 6 events then the purpose of the dynamic query I've spent this day on is to immediately output a form online that now has the same number of checkboxes with the appropriate title, etc. And dynamically the sequence of value for each checkbox ascends from 1 to 6,
And, yes, six different fields will be waiting in the register event table for each checkbox result.

  1. If the answer is no - how do you want to handle the values if the checkboxes are not exactly 7?

Due to the peculiarity of the client & the fact that they want simple to read Excel sheets generated every week to track who is registering and what events they've added on multiple visits to the form this is the way it is, for now.

Never had a problem in just straight php.

My only problem here is understanding your logic, and after each of your post ... i get lost.

So correct me if i am wrong but from my understanding, your case is:

You have a database table which always has the following event_id columns from 1 to 7:

but on the page you can have 1 or 3 or 6 etc. checkboxes, not always 7?

I just want something like this generated DYNAMICALLY

I’ve done this for over 12 years, If the client goes into the dashboard and adds a couple more events then immediately the user logging in to register now sees new checkboxes with a description for each.
The value output is just an inteeger, not a varchar.

For this client I always have a few extra fields waiting in the database table when they change their minds later and I have to be flexible.

Doing it this way the client can get a simple Excel export from the app online and can more easily follow the columnns, with the numbers always visually reminding them that a value of 3 means the 3rd event. Blah blah…

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="1" id="inp_int_event" name="int_event1">
<label class="form-check-label col-form-label" for="inp_int_event1" id="training1">Name of Event Training 1</label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="2" id="inp_int_event2" name="int_event2">
  <label class="form-check-label" for="inp_int_event2”>Training event 2</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="3" id="inp_int_event3" name="int_event3">
  <label class="form-check-label" for="inp_int_event3">Training event 3</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="4" id="inp_int_event4" name="int_event4">
  <label class="form-check-label" for="inp_int_event4">Training Event 4</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="5" id="inp_int_event5" name="int_event5">
  <label class="form-check-label" for="inp_int_event5">Training Event 5</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="6" id="inp_int_event6" name="int_event6">
  <label class="form-check-label" for="inp_int_event6">Training event 6</label>
</div>

And which part is challenging for you exactly?
I posted you an example how to create dynamic checkboxes. Then you started with some long posts which i really have hard time understanding. Try shorter and clearer questions please.

So - which part of:

is not clear for you or you can't achieve?

Yes, they were long responses.
Describing precisely the problem.

The name of the field and its value have to also iterate with each repeating loop.

The method which I appreciated and thanked you for does not quite achieve this

The only difference in the successive checkboxes created dynamically is the LABEL

I need each NAME to match the database field (which changes from int_event1 to int_event2, etc, and VALUE for each has to match the number fetched from the key field.

lI appreciate everything.

I’ll go work this out.

Thank you

So the answer is you need a dynamic name and value?
Well then go to dynamic attributes and add a dynamic name and value.

<div id="repeat1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.query">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" dmx-bind:name="'int_event'+$index+1" dmx-bind:id="'inp_int_event'+$index+1" dmx-bind:value="$index+1">
                <label class="form-check-label" dmx-bind:for="'inp_int_event'+$index+1"> {{dynamic_title_here}}</label>
            </div>
        </div>

Maybe for you, using your terms and explanations.

Thank you, Teodor.

At least an hour ago I posted the code I was trying to use to achieve this.
And describing how it was not producing what i hoped for and explained it.

Let me check this out!

Changing @Teodor 's suggested code worked like this for me –

In the browser each input is dynamically produced from the contents of the online “trainings” table –
The id and name are alike but most importantly the name=" " matches the relevant field it is to be saved in to at the “trainingsform” table.

                <input class="form-check-input" type="checkbox" is="dmx-checkbox" value="1" id="int_event1" name="int_event1">

                <label class="form-check-label"> Soventol® Sommerberatungstraining</label>
            </div>

I substituted a dynamic query variable “int_events” for $index (which gave me ascending numbers 01, 11, 21, 31, 41 – wouldn’t work) to get single digits 1,2,3,4,5 while providing the appropriate Value= and Name=“event_id1” until it reached checkbox input name=“event_id5”.

                <input class="form-check-input" type="checkbox" dmx-bind:id="'int_event'+int_events" dmx-bind:value="int_events" dmx-bind:name="'int_event'+int_events">

                <label class="form-check-label" dmx-bind:for="'int_event'$index"> {{training_title}}</label>
            </div>
        </div>