/resources/views/vendor/backpack/crud/fields/dependent_text.blade.php
{{-- dependent text input --}}
@php
$field['wrapper'] = $field['wrapper'] ?? $field['wrapperAttributes'] ?? [];
$field['wrapper']['data-field-name'] = $field['wrapper']['data-field-name'] ?? $field['name'];
$field['wrapper']['data-depends-on'] = json_encode($field['depends_on'] ?? []);
$field['wrapper']['data-init-function'] = $field['wrapper']['data-init-function'] ?? 'bpFieldInitDependentTestElement';
@endphp
@include('crud::fields.inc.wrapper_start')
<label>{!! $field['label'] !!}</label>
@include('crud::fields.inc.translatable_icon')
@if(isset($field['prefix']) || isset($field['suffix'])) <div class="input-group"> @endif
@if(isset($field['prefix'])) <div class="input-group-prepend"><span class="input-group-text">{!! $field['prefix'] !!}</span></div> @endif
<input
type="text"
name="{{ $field['name'] }}"
value="{{ old_empty_or_null($field['name'], '') ?? $field['value'] ?? $field['default'] ?? '' }}"
@include('crud::fields.inc.attributes')
>
@if(isset($field['suffix'])) <div class="input-group-append"><span class="input-group-text">{!! $field['suffix'] !!}</span></div> @endif
@if(isset($field['prefix']) || isset($field['suffix'])) </div> @endif
{{-- HINT --}}
@if (isset($field['hint']))
<p class="help-block">{!! $field['hint'] !!}</p>
@endif
{{-- DEPENDENTCY --}}
@if (isset($field['depends_on']))
@endif
@include('crud::fields.inc.wrapper_end')
@push('crud_fields_scripts')
@loadOnce('bpFieldInitDependentTestElement')
<script>
function bpFieldInitDependentTestElement(element) {
var fieldData = element.data();
if (fieldData && fieldData.dependsOn && Object.keys(fieldData.dependsOn).length) {
var depends_on_key = Object.keys(fieldData.dependsOn)[0];
var depends_on_value = Object.values(fieldData.dependsOn)[0];
var depends_on_selector = `[bp-field-name="${depends_on_key}"] input[name="${depends_on_key}"]`;
function show_hide_field(input, element) {
if (jQuery(input).val() == depends_on_value) {
element.show();
} else {
element.hide();
}
}
jQuery(document).on('change', depends_on_selector, function () {
show_hide_field(this, element);
});
show_hide_field(depends_on_selector, element);
}
}
</script>
@endLoadOnce
@endpush
In any crud controller, a simple example:
CRUD::field('has_contract')
->label('Contract')
->type('radio')
->options([ 0 => 'Without contract', 1 => 'With a contract' ]);
CRUD::field('contract_limit')
->label('Contract limit (USD)')
->type('dependent_text')
->depends_on(['has_contract' => 1]);