Update form with dynamic checkboxes

Wappler General Need Help
1

This is driving me nuts! I’ve gone through these forums and all the docs but I just can’t get this to work.

Here’s the scenario.

I have a table containing most of the data. I also have a many-to-many table for the airports. In the update form I have a Checkbox Group which is populated from a query of all the airports in the airports table. My Server Action has the main query and also a query for the airports.

I’ve followed all the docs and thought I had it working but it’s actually only ticking the first airport that’s in the query, not all of them.

Here is a snippet of code to hopefully show where I’m going wrong.

<div class="form-group" is="dmx-checkbox-group" dmx-bind:value="connAccommodation.data.queryAirports[0].AirportID">
								<label for="inp_accomAirports">Airports</label>
								<div class="form-check form-check-inline" dmx-repeat:repeatairports="connAllAirports.data.queryAllAirports">
									<input class="form-check-input" type="checkbox" dmx-bind:id="inp_airport_{{$index}}" name="airport[]" dmx-bind:value="AirportID">
									<label class="form-check-label" dmx-bind:for="inp_airport_{{$index}}" dmx-text="airportName"></label>
								</div>
							</div>

Is someone able to either spot the error or provide a guide for how to do this? The docs seem to not be the same scenario.

Many thanks.

2

Any chance of some help with this, please?

3

Hello @sitestreet
You are currently passing the first record only:

dmx-bind:value="connAccommodation.data.queryAirports[0].AirportID"

to the checkbox group. That’s why only one checkbox is checked. You need to pass an array with the values, so that all the checkboxes’ values which are returned by the query are checked.

What value is the AirportID returning?

4

Thanks @Teodor. AirportID is returning the ID of the airport for each checkbox (I outputted it in the loop to check).

I figured the bind value was wrong and shouldn’t have the [0] in it but couldn’t see what it should be instead.

5

Is it a numeric value, or a string?

6

Numeric.

7

So this should be entered then in the checkbox group value:

connAccommodation.data.queryAirports.values(&quot;AirportID&quot;).map(&quot;$value.toString()&quot;)
1 Like
8

It works!

Slight tweak needed:

connAccommodation.data.queryAirports.values("AirportID")

as it didn’t need to be converted to a string.

Thank you!

I can now see how Wappler works with arrays so will keep that in mind for the future.

9

That's why I initially asked if the value is a number or not :slight_smile:

10

Sorry, I possibly misunderstood.

Thanks again. Would be great to have a tutorial for this as I can’t believe I’m the only person to need this info.

1 Like
11

I was having this same issue. I thought I had looked through all the posts but must have missed this one. I spent two days on this! Glad I found this post.

1 Like