How to return the key value from a checkbox list f

Question

I would like it so that when one or more of the options in my checkboxlist has been ticked, the value of said option will then update the amount field.

I'm sort of cheating as I'm using the key value to be the price of the field which I would then like to update the amount field with.

This already works perfectly with the dropdown fields and this does calculate the amount field depending on what has been selected.

As I've had to make the checkboxlist jasonable, the way in which this returns the value is different.

Jobs model:

type_website:
        label: Website Package
        span: right
        type: dropdown
        placeholder: '-- Select Website Package --'
        trigger:
            action: show
            condition: value[1]
            field: type
    type_add_pages:
        label: 'Additional Pages'
        span: right
        type: dropdown
        trigger:
            action: show
            condition: value[1]
            field: type
    type_addons_get:
        label: 'Addons'
        span: right
        type: checkboxlist
        trigger:
            action: show
            condition: value[1]
            field: type
    amount:
       label: 'Total Amount'
       span: left
       type: text
       readOnly: true
       dependsOn:
          - type_add_pages
          - type_website
          - type_addons_get

Jobs.php

protected $jsonable = [
        'type_addons_get'
    ];

public function getTypeAddonsGetOptions()
    {
        return [
            '30' => 'Blog',
            '50' => 'Editable Website'
        ];
    }

// Get the value for the amounts field 
    public function filterFields($fields, $context = null)
    {
        $typePages = $this->attributes['type_add_pages'];
        $typeAddons = array_get($this->attributes, 'type_addons_get');
        $typeWebsite = array_get($this->attributes, 'type_website');


        return $fields->amount->value = $typeAddons + $typePages + $typeWebsite;

    }

As a test, if I just return the following in Jobs.php:

return $fields->amount->value = $typeAddons;

I then get the following result:

Any help would be extremely helpful, thanks in advance!

Answer 1

I will be honest and admit I don't work with the back end forms very often. I actually generate front end systems for clients and myself. So I solved an issue like this with using javascript/jquery in the controller pages (create and update). This is what I think you are trying to do. Here is an example:

Backend in form where I have total price set to read only number input field:

<script>
$('#Form-field-Products-price').change(doThing);
$('#Form-field-Products-set_size').change(doThing);
$('#Form-field-Products-set_color').change(doThing);
$('#checkbox_Form-field-Products-add_ons_1').change(doThing);
$('#checkbox_Form-field-Products-add_ons_2').change(doThing);
$('#checkbox_Form-field-Products-add_ons_3').change(doThing);
function doThing(){
var x = $('#Form-field-Products-price').val();
var y = $('#Form-field-Products-set_color').val();
switch (y) {
    case 'silver':
        color = 0;
        break;
    case 'bronze':
        color = ".50";
        break;
    case 'gold':
        color = "1.00";
        break;
    default:
        color = 0;
}
var z = $('#Form-field-Products-set_size').val();
switch (z) {
    case 'fullset':
        size = 0;
        break;
    case 'partialset':
        size = "1.00";
        break;
    default:
        size = 0;
}
if ($('#checkbox_Form-field-Products-add_ons_1').prop('checked') == true)
{
    var a = "1.00";
} else 
{
    var a = 0;
}
if ($('#checkbox_Form-field-Products-add_ons_2').prop('checked') == true)
{
    var b = "1.00";
} else 
{
    var b = 0;
}
if ($('#checkbox_Form-field-Products-add_ons_3').prop('checked') == true)
{
    var c = "1.50";
} else 
{
    var c = 0;
}

$("#Form-field-Products-total_price").val(Number(x) + Number(color) + Number(a) + Number(b) + Number(c) - Number(size));
console.log( Number(x) + ' ' + Number(color) + ' ' + Number(a) + ' ' + Number(b) + ' ' + Number(c) + ' ' + Number(size) );
}
</script>

Here you can see that I am searching the document for these ID's then getting their value. Turning those values into numbers I then push them into the Total Price field.

Here is an adjusted price while filling out the form: