Looking for help with Radio Buttons

[UKRiggers]

Hi guys, I have lists upon lists like this

where the user clicks on the required radio buttons, then the idea is to click a submit button. On clicking the submit button, all of the values (text, see below) need to be added together in a comma separated list like…

• Replace N/S Front Bumper End Cap, Replace O/S Front Bumper End Cap, Paint N/S Front Bumper End Cap, Paint O/S Front Bumper End Cap

The code from teh web page looks like this

The code is all dynamically generated and looks like this

            <div class="d-flex" data-toggle="buttons">
              <label class="btn btn-xs btn-outline-success" dmx-bind:for="{{var_replace.value}} {{cp_name}}">
                <input class="custom-control-input" type="radio" dmx-bind:id="{{var_replace.value}} {{cp_name}}" dmx-bind:value="{{var_replace.value}} {{cp_name}}" dmx-bind:name="{{var_replace.value}} {{cp_name}}">{{var_replace.value}}</label>
              <div dmx-show="cp_repair > 0">
                <span style="text-align: center;">&nbsp;or&nbsp;</span>
                <label class="btn btn-xs btn-outline-success" dmx-bind:for="{{var_repair.value}} {{cp_name}}">
                  <input class="custom-control-input" type="radio" dmx-bind:id="{{var_repair.value}} {{cp_name}}" dmx-bind:value="{{var_repair.value}} {{cp_name}}" dmx-bind:name="{{var_repair.value}} {{cp_name}}">{{var_repair.value}}</label>
              </div>
                <label class="btn btn-xs btn-outline-danger" dmx-bind:for="Clear_{{var_repair.value}} {{cp_name}}">
                  <input class="custom-control-input" type="radio" dmx-bind:id="Clear_{{var_repair.value}} {{cp_name}}" dmx-bind:value="" dmx-bind:name="Clear_{{var_repair.value}} {{cp_name}}">X</label>
            </div>

My question is, what do I need to do to get a comma separated list? The list can be in a variable, or in a field input, or directly into a DB. I know how to further manipulate the data from there. I can’t seem to work out how to get my button values into a list. Help please.

[ben]

This will not answer your question regarding a comma separated list, so please ignore if I am stepping outside of what you want.

I think that you are making it hard for yourself, personally I would have each answer in a separate field type TINYINT and a default value of 0. When the button is populated, the value will change to 1 if the button has a value of 1.

In your output you will show Replace (or nothing) when the value is 0 and Repair if the value is 1.

[UKRiggers]

Hi Ben, I appreciate where you are coming from and I had thought about the basic DB table option. Not that it would be difficult but let me give you a bit more info as your assumptions are not quite right.

There are currently 253 areas or parts on our basic list.
Each of these are then combined with ‘not selected/zero’, ‘replace’, ‘repair’, ‘paint’, ‘blend’ to create the button options that you see.
We can just ignore the zero option but it still leaves a potential for over 1000 options to be selected.
And then there is the issue of the list being added to quite frequently as they fine tune their reports.

So this could be a little awkward to maintain and control, especially when all we need is a list of those selected. I know I could maintain it dynamically in the DB but would like to find a solution as first outlined. Cheers

Oh, and I forgot, there is also the options of N/S and O/S (near-side and off-side), and the options of N/S/F, N/S/R, O/S/F and O/S/R (near-side front, near-side rear etc). So it can be a big list.

[ben]

I have done something similar (on a much smaller scale), where I have put all of the accessories into a separate database table, this so that the client can add to the number of accessories. The accessories are shown in the admin section where the relevant items are ticked.

The ticked items are inserted into the Caravan table in a comma delimited format. In the public page, only the ticked items are listed.

[UKRiggers]

Hi Ben, yes that’s what I am wanting to do. Was this done in Wappler? What actions did you set up?

[ben]

Yes, this was done in an early version of Wappler.

The update form looks like

The update Server action

[UKRiggers]

Cheers Ben, I’ll have another go and hopefully get somewhere this time.

[UKRiggers]

I don’t suppose @George or @Teodor have any thoughts on this post?

[Teodor]

Why not just add them directly as radio1.value + ',' + radio2.value +... etc?

[UKRiggers]

Only because there are so many to do (as mentioned above).
Can it be done dynamically? ie can everything in the $_POST be concatenated dynamically?

This is how the page/form works…

In the first modal, click on any one of the 12 areas marked and it brings up a second modal with a list of areas or parts of a car in that area of the car that you clicked on. So for O/S (off-side) on the first diagram…

Each orange rectangle here represents a radio group. So the very first radio group in the screenshot above is

• Replace O/S/F Door || Repair O/S/F Door || Cancel (no value)
  etc

So in an ideal world I would like to be able to list dynamically all the radio buttons that have been clicked on and have a value.

Over time my client will have access to add more car parts to the list, I don’t want to have to add to the query each time he does that.

Is there a way of doing it? Hope this makes sense.

The DB table is like this

and the columns mean
cp_nesw = car parts _ north east south west [area of car] (the numbers represent 2 door or 4 door)
cp_qty = quantity (ie 1 set of hinges per door)
under cp_replace, cp_repair, cp_paint, cp_blend
1 = yes and 0 = no

[UKRiggers]

Good morning Teodor, following on from yesterday I just thought I’d share my simple logic.

Here is a typical example of checked items on the web page

When ‘Save changes’ is submitted you then get the following result in DevTools which shows the name and value in the submitted form

The ‘1_’ and ‘2_’ at the beginning of the name represent ‘Replace’ or ‘Repair’

Then group all the 1s together and 2s together

And finally concatenate the values separated with comma and space, and with a fill stop at the end. These values are then inserted into DB columns “Replace” and “Repair”

Hope all that makes sense.

Now all I need to know is how to do it

[UKRiggers]

Good morning @Teodor, I am starting to think that this is not possible without the use of external JS, is that your thinking too?

[Teodor]

@UKRiggers i am not entirely sure what exactly do you need to achieve, but in server connect you can return all the submitted POST values under by selecting {{$_POST}} as an expression …

This will then return them like:

[patrick]

Do you only need the values for a form submit, then use checkboxes. Here a simplified version:

<table>
  <tr>
    <td>Door</td>
    <td>
      <label>
        <input type="checkbox" name="replace[]" value="Door">
        Replace O/S/F
      </label>
      or
      <label>
        <input type="checkbox" name="repair[]" value="Door">
        Repair O/S/F
      </label>
    </td>
    <td>
      <label>
        <input type="checkbox" name="paint[]" value="Door">
        Paint O/S/F
      </label>
      or
      <label>
        <input type="checkbox" name="blend[]" value="Door">
        Blend O/S/F
      </label>
    </td>
  </tr>
  <tr>
    <td>Loading Door</td>
    <td>
      <label>
        <input type="checkbox" name="replace[]" value="Loading Door">
        Replace O/S/R
      </label>
      or
      <label>
        <input type="checkbox" name="repair[]" value="Loading Door">
        Repair O/S/R
      </label>
    </td>
    <td>
      <label>
        <input type="checkbox" name="paint[]" value="Loading Door">
        Paint O/S/R
      </label>
      or
      <label>
        <input type="checkbox" name="blend[]" value="Loading Door">
        Blend O/S/R
      </label>
    </td>
  </tr>
</table>

On the server you get directly the correct arrays, like when Door and Loading Door the repair are checked. On the server you get $_POST["repair"] = ["Door", "Loading Door"].

You can style the checkboxes as buttons, by style something like:

<label class="btn btn-xs btn-outline-success" dmx-class:active="chk1.checked">
  <input id="chk1" name="replace[]" type="checkbox" class="custom-control-input" value="Door">
  Replace
</label>

[UKRiggers]

I agree and it would be simpler, BUT we have to ensure that the user does NOT select both “Replace” and “Repair”. It is one or the other. Hence the reason for using radio buttons.

Or can you suggest an easy way to prevent both being checked?

[patrick]

You could do something like unchecking the other checkbox when they change the other one.

<label>
  <input type="checkbox" id="chk1" name="repair[]" dmx-on:change="chk2.select(false)" value="Door">
  Repair
</label>
or
<label>
  <input type="checkbox" id="chk2" name="replace[]" dmx-on:change="chk1.select(false)" value="Door">
  Replace
</label>

[UKRiggers]

Patrick, thanks again for your time. You have given me plenty to work with, and I will rework what I have. It is not much work to do as it is all dynamic.

Once again I have probably been overthinking the whole issue and the simple option is always the best

[UKRiggers]

Hi Patrick, carrying on this conversation, I am struggling with this 'dmx-on:change' to work with multiple dynamic checkboxes

@patrick

dmx-on:change="chk2.select(false)"

For instance I have the following in a form. There are, in this small example, 8 checkbox groups, each created dynamically with a varying number of checkboxes. I did have them ad radio buttons but am in the process of changing them based on our conversations last week.

My code for the first one is as follows (I am yet to change to checkbox)

          <div class="form-group row" id="veh_fuel" is="dmx-radio-group">
            <div class="col-sm-6 input-group">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="far fa-gas-pump fa-fw fa-lg"></i>Fuel</div>
              </div>
              <div class="btn-group btn-group-toggle d-flex flex-wrap flex-grow-1" is="dmx-repeat" data-toggle="buttons" dmx-bind:repeat="sc_menus.data.q_menus.where(`menu_id`, 12, '==')">
                <label class="btn btn-sm btn-outline-secondary" dmx-bind:for="input_{{menu_id}}_{{menu_list_id}}" dmx-class:active="menu_list_id == business_principal_sc.data.b_principal_q[0].veh_fuel">
                  <input class="custom-control-input" type="radio" dmx-bind:id="input_{{menu_id}}_{{menu_list_id}}" dmx-bind:value="menu_list_id" dmx-bind:name="veh_fuel" dmx-bind:checked="menu_list_id == business_principal_sc.data.b_principal_q[0].veh_fuel">{{list_label}}
                </label>
              </div>
            </div>
          </div>

How can I deselect all other checkboxes if there are quite a few, I don't know how many there are or what there id's are?

[patrick]

Checkboxes are used when a field has multiple values, if I see the screenshot then this seems more like a radio group. So what is the output that you expect?

[UKRiggers]

Hi Patrick, sorry, it’s getting late and I’ll revisit this in the morning.