netdev
netdev

Reputation: 566

CakePHP 3.6: Update control value based on the selection of a dropdown control

I have the following tables:

customers[id, name, surname, phone, text, balance, created]

service_types[id, title, price, length, is_subscription, created, payment]

customer_service_types[id, customer_id, service_type_id, price, created]

And the relations:

ServiceTypesTable.php:

$this->hasMany('CustomerServiceTypes', [
        'foreignKey' => 'service_type_id'
    ]);

CustomerServiceTypesTable.php:

$this->belongsTo('Customers', [
        'foreignKey' => 'customer_id',
        'joinType' => 'INNER'
    ]);
    $this->belongsTo('ServiceTypes', [
        'foreignKey' => 'service_type_id',
        'joinType' => 'INNER'
    ]);

In CustomerServiceTypes\add.ctp I have a dropdown with the services and a field for the price:

echo $this->Form->control('customer_id', ['options' => $customers,'label' => 'Customer']);
echo $this->Form->control('service_type_id', ['options' => $serviceTypes, 'label' => 'Service']);
echo $this->Form->control('price', ['label' => 'Price']);

In the CustomerServiceTypesController.php:

public function add($customerid = null)
    {
        $customerServiceType = $this->CustomerServiceTypes->newEntity();
        if ($this->request->is('post')) {
            $customerServiceType = $this->CustomerServiceTypes->patchEntity($customerServiceType, $this->request->getData());
            if ($this->CustomerServiceTypes->save($customerServiceType)) {

                //debug($this->request->getData("customer_id"),true);
                

                $this->Flash->success(__('Success'));

                return $this->redirect(['controller' => 'customers', 'action' => 'edit', $customerid]);
            }
            $this->Flash->error(__('Fail'));
        }
        $customers = $this->CustomerServiceTypes->Customers->find('list', ['limit' => 200])->where(['Customers.id =' => $customerid]);
        $serviceTypes = $this->CustomerServiceTypes->ServiceTypes->find('list', [
        'valueField' => function ($row) {
            return $row['title'] . ' (Suggested price: ' . $row['price'] . ')';
        }
    ], ['limit' => 200]);
        $this->set(compact('customerServiceType', 'customers', 'serviceTypes'));
    }

Which adds in the services dropdown valuefield the value of the specific service:

Service_1 (Suggested price: 100)

Service_2 (Suggested price: 150)

.....

But what I want to achieve is to update the price field with the suggested price when user makes a selection in the dropdown field. Is it possible to achieve that server side? Without the use of javascript? Because my knowledge is very limited in javascript. If not can you provide a working example based on my question?

Upvotes: 0

Views: 65

Answers (1)

amar9312
amar9312

Reputation: 405

Make Following changes:

add.ctp

    <div ng-app=""  ng-init='servicePrices = <?php echo json_encode($servicePrices); ?>;' >

<?php

echo $this->Form->create();

echo $this->Form->control('customer_id', ['options' => $customers,'label' => 'Customer']);

echo $this->Form->control('service_type_id', [
'options' => $serviceTypes, 'label' => 'Service',
'ng-model'=>'service_type_id'
]);

 echo $this->Form->control('price', [
'label' => 'Price',
'ng-model'=>'servicePrices[service_type_id]'
]);

echo $this->Form->submit('submit');

?>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js" ></script>

CustomerServiceTypesController.php

// add this
 $servicePrices = $this->CustomerServiceTypes
            ->ServiceTypes
            ->find()
            ->limit(200)
            ->combine('id','price');


    $this->set(compact('customerServiceType', 'customers', 'serviceTypes','servicePrices'));

Upvotes: 1

Related Questions