BUG: Boolean Checkbox in Customer Submitted Item

Treepl Backlog
1

Not sure if this is technically a bug but it’ll certainly cause issues for anyone developing with the following conditions:

If using a checkbox (boolean) input in a custom module and you need that input in a customer submitted edit form, by default, the value of the checkbox is only submitted when checked. Which means the user can not uncheck this property and have it save - because unchecked checkboxes don’t submit any data to the server so the previous value of ‘true’ remains.

Javascript has to used here to change the value to ‘false’ AND set the checkbox to “checked” upon submission - which is probably not ideal.

Typically, I would think that the server would check for the non-existence of this input’s name/value pair and if NOT present would set the value to ‘false’.
However, this cannot be done with custom module edit forms since we don’t need to include all properties/fields in the edit form if not needed (which is a great thing - we don’t want this changed!), but it means the server can’t expect to see any particular property.

So the only 2 ways I can see around this is:

  1. use javascript (as above)
  2. use ‘true/false’ elements instead of checkboxes (usually not ideal)

@vlad.z is there a solution to this server-side?
Perhaps we can add an element to the form that tells the server to expect a value for specific checkboxes?
ie:

<input type="hidden" name="customBooleans" value="prop_NameOfBoolean1,prop_nameOfBoolean2">

The same thing happens for checkbox lists (not just boolean specific checkboxes)

2

The solution is to implement edit form boolean input like this (I’ve add this to internal task list to be fixed in one of the upcoming updates):

<label>Test 1</label>
<input id="module_Test_{{this.Id}}_prop_Test1" type="checkbox" name="prop_Test1" value="true">
<input id="module_Test_{{this.Id}}_prop_Test1_hidden" type="hidden" name="prop_Test1" value="false" >

<script>
    (function(){
        var formInput = document.getElementById('module_Test_{{this.Id}}_prop_Test1');
        if (formInput) {
            formInput.checked = '{{this.Test1}}' === 'true';
            var formHiddenInput = document.getElementById('module_Test_{{this.Id}}_prop_Test1_hidden');
            
            if(formHiddenInput)
            {
                formHiddenInput.disabled = formInput.checked;
                
                formInput.onclick = function()
                {
                    formHiddenInput.disabled=this.checked;
                }
            }
        }
    })();
</script>
1 Like