How to change the field content server side when another field is changed

[Mte90]

I have various fields define in the setup method but I need that one when the value is changed in another one updates the content a field.

[backpack-ai-bot[bot]]

To change the content of a field server-side when another field is changed in Backpack, you can use the CrudField JavaScript API along with an AJAX call to update the field content. Here's how you can achieve this:

1. First, create a custom JavaScript file for your form, as recommended in the CrudField JavaScript API documentation:

crud.field('field_to_watch').onChange(function(field) {
    // Make an AJAX call to your server
    $.ajax({
        url: '/your-endpoint',
        type: 'GET',
        data: { value: field.value },
        success: function(response) {
            // Update the target field with the response
            crud.field('target_field').input.value = response.newValue;
        }
    });
}).change();

2. Load this script in your CrudController's setupCreateOperation() or setupUpdateOperation():

Widget::add()->type('script')->content('assets/js/your-custom-script.js');

3. Create an endpoint in your Laravel application to handle the AJAX request and return the new value for the target field.

4. Make sure to implement the server-side logic to determine the new value based on the changed field's value.

This approach allows you to update field content dynamically based on user input, with the actual logic happening on the server-side.

For more complex scenarios or if you need to update multiple fields, you might want to consider using Livewire, which will be officially supported in Backpack v12 and can handle more complex back-and-forth AJAX requests seamlessly.

Remember to adjust the code to fit your specific field names and endpoint URLs.

CrudField JavaScript API
Community Forum Discussion

Relevant sources:

CrudField JavaScript Library|(9) When a text input is written into, write in a second input (eg. slug)
CrudField JavaScript Library|How to Use
Github Issue (closed): [Feature Request] Set field types and values depending on selection of another field
Update Operation|Use events in your field definition
Fields|slug PRO
Github Issue (closed): A Field's Value is Automatically Filled W.R.T First Field's Value is Selected
Github Issue (closed): [Bug] Ajax Inline Create not working correctly
CrudField JavaScript Library|(10) Calculate a total of multiple fields
Use case - Add modal to get user input before create
CRUD API Cheat Sheet|Create & Update Operations
Set up relations with additional information
Github Issue (closed): [Feature Proposal] Conditional fields (aka. hide/show fields depending on other fields, aka. toggle field visibility)
Github Issue (closed): [Feature or Documentation Request] - CrudField JavaScript Library with relationship/subfield fields
Github Issue (open): [Improvement] Text field with ajax validation
Github Issue (closed): [Feature Request] Set field types and values depending on selection of another field

[karandatwani92]

Hey @Mte90

Try this tutorial, How to access CRUD fields via javascript to manipulate Form

[Mte90]

I did something similar but without the ajax call, just setting a url parameter and a refresh of the page.