Laravel рюкзак зависимый текстовое поле
Я застрял с рюкзаком Laravel.
Я хочу отображать текстовые поля, когда установлен флажок. Я хочу реализовать это в моем проекте. Как реализовать это с помощью контроллера?
Мои поля инициализируются в контроллере
controller.php
// *****
// FIELDS ALTERNATIVE
// *****
"fields" => [
[
'name' => "event_name",
'label' => "Event name",
'type' => "text",
'placeholder' => "First Name and Last Name",
],
[
'name' => "event_topic",
'label' => "Event Topic",
'type' => "text",
'placeholder' => "Event Topic",
],
[
'name' => "event_type_id",
'label' => "Event Type",
'model' => "App\Larapen\Models\EventType",
'entity' => "eventType",
'attribute' => "name",
'type' => "select",
],
[ // Checkbox
'name' => 'social_links',
'label' => 'Links to facebook and twitter',
'type' => 'checkbox'
],
]
Когда я нажимаю флажок «social_links», на моей странице добавления должны появиться два текстовых поля.
Пожалуйста, помогите мне с этим. Жду ответа ………..
Решение
я только слегка изменил ответ, предоставленный Марко.
[
'name' => 'social_links',
'label' => 'Links to facebook and twitter',
'type' => 'checkbox',
'id'=>'checkbox'
],
[
'name' => "event_name",
'label' => "Event name",
'type' => "text",
'placeholder' => "First Name and Last Name",
'id'=>'text_1',
],
[
'name' => "event_topic",
'label' => "Event Topic",
'type' => "text",
'placeholder' => "Event Topic",
'id'=>'text_2'
],
на странице просмотра
<script>
$( document ).ready(function() {
$('#text_1').parent().hide();
$('#text_2').parent().hide();
});
var checked = document.getElementById('checkbox');
checked.addEventListener('change', function() {
if (this.checked){
$('#text_1').parent().show();
$('#text_2').parent().show();
} else {
$('#text_1').parent().hide();
$('#text_2').parent().hide();
}
});
</script>
Другие решения
Вы можете сделать что-то вроде этого:
var checked = document.getElementById('checkbox');
checked.addEventListener('change', function() {
if (this.checked){
document.getElementById('text_1').style.display='block';
document.getElementById('text_2').style.display='block';
} else {
document.getElementById('text_1').style.display='none';
document.getElementById('text_2').style.display='none';
}
});<input type="checkbox" id="checkbox" aria-label="...">
<textarea rows="4" cols="50" id="text_1" style="display:none">
Text Area 1
</textarea>
<textarea rows="4" cols="50" id="text_2" style="display:none">
Text Area 2
</textarea>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>Вам необходимо добавить некоторые атрибуты в поля:
$this->crud->addFields([
[
'name' => "event_name",
'label' => "Event name",
'type' => "text",
'placeholder' => "First Name and Last Name",
'attributes' => ['id'=>'text_1', 'style' => 'display:none'],
],
[
'name' => "event_topic",
'label' => "Event Topic",
'type' => "text",
'placeholder' => "Event Topic",
'attributes' => ['id'=>'text_2', 'style' => 'display:none'],
],
[ // Checkbox
'name' => 'social_links',
'label' => 'Links to facebook and twitter',
'type' => 'checkbox',
'attributes' => ['id'=>'checkbox'],
],
]);