How to return the key value from a checkbox list field which automatically updates another field - plugins

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: