Working with Updatable Checkboxes & Radio Buttons

I’ve got a rather large form that has multiple checkboxes, and a number of Yes / No radio buttons. All of the checkboxes are static, and have a value of ✓

Any suggestions of how to retrieve the database content for these so they can be used in the detail form for updates?

What do you mean? What value do your checkboxes have?
Also are they single checkboxes or are they in group?

Yes, they are single.

They are a required field used to indicate the person has read the instructions, and afterward, checks the box before preceding to the next question. The value of the checkbox field is the ASCII code for the check mark seen. I didn’t realize the code would be interpreted as a check mark. Ha!

So the database actually saves the “✓”

Is there a specific reason not to use 0/1 as a value?

The only reason is that the client wanted a check mark in the printout of their response. At the time, it was a quick way to give them what they wanted.

Well that’s not the greatest solution. You could print the symbol without storing this in the database…
For single checkboxes just use the dynamic attributes > checked > when DB value == ‘value’
But I strongly suggest setting ‘1’ as a value for the static checkboxes.

Good idea. I will convert the checkbox values on the two insert and update pages. Then make the necessary changes to the queries.

Now, as for the radio buttons, they are grouped. I have the input name set as i.e., ‘name’, and then the choice set as either ‘name-yes’ or ‘name-no’.

To set the response for the detail page, would I need to setup a query for the radio buttons? Or how does that work? It seems I recall a DMXzone tutorial video for DW that suggested that technique.

You need to add the radio group component and your radio buttons inside. Add values to them (each radio needs a different value of course).
Then bind your database value in the radio group value field. Radio group will automatically check the proper radio button (depending on the database value).

1 Like

Teodor, I must be blind… the rest of the form fields populate and update with no problem. However, I’m still trying to figure out how to get these radio buttons to reflect the data from the database.

When you inspect the element (right-click page to see inspect element), as you click the Edit Buttons, you can see the data is being put in the dmx-bind:value, but it is not rendered in the html radio button, nor when it’s changed via radio button, it is not being updated in the database. Although every other field is being updated when changed.

Here’s the page:

You need to add a radio group component and place the radio buttons inside it. Radio buttons must have static values and the dynamic value must be added to the radio group.
Radio group will automatically select the radio button depending on the dynamic value.

Also, for the update record value you need to add radio group value.

Please excuse my ignorance… When I add a radio-group, and the radio inputs, this is what I now have in the form.

  <div class="form-group">
    <legend class="col-form-label">Morning / Afternoon</legend>
    <div class="form-check">
      <input class="form-check-input" type="radio" value="AM" id="am_pm_1" name="am_pm" dmx-bind:value="EXAMPLE_1">
      <label class="form-check-label" for="am_pm">AM</label>

      <input class="form-check-input" type="radio" value="PM" id="am_pm_2" name="am_pm" dmx-bind:value="EXAMPLE_2">
      <label class="form-check-label" for="am_pm">PM</label>

Does this look correct? Also, where will the radio-group value be placed?

No, you need to add the radio group component in app connect (use search in the dialog if you can’t find it).

Thanks for your help Teodor, I found it!
Does this look more like how it should be? Now where should I put the bindings?

   <div class="form-group">
      <label class="col-form-label" for="am_pm">Morning / Afternoon</label>
      <div is="dmx-radio-group" id="group1" class="radio-group">
              <div class="form-check">
                  <input class="form-check-input" type="radio" value="" id="radio1" name="am_pm">
                  <label class="form-check-label" for="radio1">AM</label>
                  <input class="form-check-input" type="radio" value="" id="radio2" name="am_pm">
                  <label class="form-check-label" for="radio2">PM</label>

In the UI when you select radio group - bind the dynamic value there.
And add static values to the two check boxes.

1 Like

So am I correct to assume that this technique will work with both checkboxes and radio buttons?

Yes :slight_smile:
But if the checkbox is a single one you don’t need this.

1 Like

Thank you so very much! I appreciate your patience and great help!

how to make this app connect work with Bootstrap Radio Button Group (Buttons · Bootstrap)?

current code for button group is:

<div class="btn-group btn-group-toggle btn-group-sm" id="radioTitle" role="group" data-toggle="buttons">
  <label class="btn btn-outline-primary">
  <input type="radio" name="optionTitle" id="mr" autocomplete="off" value="mr" dmx-bind:disabled="varEditMode.value == 1" required="" data-msg-required="Title is required." dmx-on:focus="formDetails.fName.focus()">Mr.</label>
  <label class="btn btn-outline-primary">
  <input type="radio" name="optionTitle" id="mrs" autocomplete="off" value="mrs" dmx-bind:disabled="varEditMode.value == 1" dmx-on:focus="formDetails.fName.focus()">Mrs.</label>
  <label class="btn btn-outline-primary">
  <input type="radio" name="optionTitle" id="ms" autocomplete="off" value="ms" dmx-bind:disabled="varEditMode.value == 1" dmx-on:focus="formDetails.fName.focus()">Ms.</label>

and the Wappler AC radio group looks like this:

<div is="dmx-radio-group" id="group1" class="radio-group">
  <input id="radio1" type="radio" name="Mr." value="Mr.">Mr.
  <input id="radio2" type="radio" name="Mrs." value="Mrs.">Mrs.
  <input id="radio3" type="radio" name="Ms." value="Ms.">Ms.        

tried adding is="dmx-radio-group" to my button group along with class="radio-group".
but this did not work!

can you please help?

Radio group component currently supports radio buttons, button groups are a different thing.
If you want to use the component with Bootstrap 4 - then use the radio controls available in the form elements:

Maybe @George can clarify if we can extend the support for Bootstrap 4 toggle button groups in the next updates.

1 Like