0

[sorry for the length of this message, I tried to provide a concise decription of my problem in order to make it easier for people to understand and help]

Hello all,

I have a webform comprised of 3 pages (two pages of input and a custom preview page).

I explain the whole webform in order to make my question more concise:

My first page has 4 inputs, all required (1 text field, 3 select fields). This works fine.

My second page is a little bit more complicated.

It has three 'triples', each triple consisting of: one checkbox, one select, one number.

None of these is required. The logic is that when one checkbox is checked (default value is unchecked), the subsequent select and number will be enabled, otherwise they are disabled (default).

You can find the code for one of these triples in the end of my post - the other two triples are similar.

This works ok, but my problem is this:

A valid submission should only happen when: a. at least one checkbox is checked AND b. the total sum of all number fields is in the range 3-30.

Note: I can't simply force each number field to accept values in the range: 1-10, because user should be able to give up to 30 in one field and 0 on the other two.

I have used a computed_twig element and appropriate templates, and I have managed to put all my logic there and I show an appropriate message to the user. This works ok, so I have managed to print a green message when values are ok, and appropriate messages in red when values are invalid (if total sum is less than 3, or greater than 30 etc etc). I have covered all cases having enabled "Automatically update the computed value using Ajax" for the computed field, it updates on-the-fly and user has correct information on whether data is OK or NOT.

Now the problem and my question is:

I have been trying to hide the submit button, by selecting appropriate logic in the 'conditions' tab of the submit button. For example, something easy like "hide" or "disable" submit button, when pressure_total_thickness (computed twig value which holds the sum of individual number fields - same computed field which I successfully use for my messages) is greater than 30 ..

Problem is whatever I do there, the submit button is always present ...

In a few words, what I want to do is validate data as much as I can in the front-end so that I don't allow invalid submissions. I can do checks in the back-end (because data will subsequently be fed into another software) but it would be nice to do as much validation as possible in the front end and not allow submissions when data is invalid. Hence, use my computed_twig value which holds the sum of three number fields, and only show submit button when that value is between 3 - 30.

For example, here is the page with all three 'triples' - user has checked 2nd and 3rd checkboxes and supplied 15 and 30 values respectively. Total is 45, which is invalid and appropriate red message is written:

test case with invalid data

however, when user goes forward and reaches submit phase, the submit bitton is present although I use following condition to 'hide' it (have tried 'disable' in cindition, but same result - submit button was shown).

Here is the simple such condition for the submit button, trying to 'hide' it:

enter image description here

I tried to find documentation and/or previous questions/answers, but could not find anything relevant..

I must be doing something wrong, but I can't find any way out of this ! ..

Webform is an amazing module, I am sure there is an easy way to achieve what I want. Any help would be appreciated!

Code for one of the three 'triples':

enable_insole:
    '#type': checkbox
    '#title': 'Enable Insole'
    '#description': 'Please enable insole if you want to enter custom values below for material and layer thickness.'
  select_insole_material:
    '#type': select
    '#title': 'Select Insole Material'
    '#options':
      1: Leather
      2: 'Composite leather & elastomer'
      3: EVA
      4: Polyisoprene
      5: 'Natural Rubber'
      6: Polychloroprene
      7: PTFE
      8: PU-Foam
    '#states':
      disabled:
        ':input[name="enable_insole"]':
          unchecked: true
    '#default_value': '0'
  insole_layer_thickness:
    '#type': number
    '#title': 'Insole Layer Thickness'
    '#help': 'See general help on choosing appropriate values for layers. Individual thickness for insole/midsole/outsole can have a range of 1-30 (mm), but total thickness of all layers  combined cannot exceed 30 (mm).'
    '#states':
      disabled:
        ':input[name="enable_insole"]':
          unchecked: true
    '#default_value': '0'
    '#min': 0
    '#max': 30
    '#step': 1
0

Well, I found a solution and I post it here for future reference..

I found this thread which was very helpful.

Now, looking at that post, I noticed the '#value' key in the form's code. So I ended up having another computed twig element in my form to incorporate the logic mentioned in my original post. The code for that element is:

the_sum:
    '#type': computed_twig
    '#title': 'the sum'
    '#value': |
      {% spaceless %}
      {% if data.enable_insole == 1 and data.enable_midsole == 1 and data.enable_outsole == 1 %}
         {% set total_thickness = data.insole_layer_thickness + data.midnsole_layer_thickness + data.outsole_layer_thickness %}
      {% elseif data.enable_insole == 1 and data.enable_midsole == 1 %}
         {% set total_thickness = data.insole_layer_thickness + data.midnsole_layer_thickness  %}
      {% elseif data.enable_insole == 1 and data.enable_outsole == 1 %}
         {% set total_thickness = data.insole_layer_thickness +  data.outsole_layer_thickness %}
      {% elseif data.enable_midsole == 1 and data.enable_outsole == 1 %}
         {% set total_thickness = data.midnsole_layer_thickness + data.outsole_layer_thickness %}
      {% elseif data.enable_insole == 1 %}
         {% set total_thickness = data.insole_layer_thickness %}
      {% elseif data.enable_midsole == 1 %}
         {% set total_thickness = data.midnsole_layer_thickness %}
      {% elseif data.enable_outsole == 1 %}
         {% set total_thickness = data.outsole_layer_thickness %}
      {% else %}
         {% set total_thickness = 0 %}
      {% endif %}
      
      
      {% if data.enable_insole == 0 and data.enable_midsole == 0 and data.enable_outsole == 0 %}
      {{ 0 }}
      
      {% elseif total_thickness < 0 %}
      {{ 0 }}
      
      
      {% elseif total_thickness < 5 %}
      {{ 0 }}
      
      {% elseif total_thickness > 30 %}
      {{ 0 }}
         
      {% else %}
         {{ 1 }}
      {% endif %}
      {% endspaceless %}
      
    '#ajax': true

Now, I find it a bit non-intuitive that I have to open the 'source' tab and hard-code the 'value' key (I found no other way to set it from UI - whatever I was writing was entered in the code with the 'template' key).

Anyway, so after this, I have the following condition in the submit button:

actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'
  '#states':
    visible:
      ':input[name="the_sum"]':
        value: '1'

The funny thing is that if I choose the opposite logic, i.e. hide when value is 0, it doesn't work !!! (it always shows the submit button) ... I really don't know why .. But having the condition as visible only when value is 1 works correctly (shows it when sum is 1, hides it when sum is 0) ...

I 'm sure there must be a better way of doing this, but at least it now works .. I leave this open because (I hope) somebody might come up with a better solution ...

thanks.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.