[英]Laravel backpack dependent textbox
I am stuck with Laravel backpack. 我被Laravel背包困住了。
I want to display textboxes when a checkbox is clicked. 我想在单击复选框时显示文本框。 i want to implement this in my project.
我想在我的项目中实现这一点。 How to implement this using controller?
如何使用控制器实现这一点? My fields are initialized in the controller
我的字段在控制器中初始化
controller.php 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'
],
]
When i click the "social_links" checkbox two textboxes should be displayed in my add page. 当我点击“social_links”复选框时,我的添加页面中应显示两个文本框。
Please help me with this.Waiting for a response........... 请帮帮我。等待回复...........
You can do something like this: 你可以这样做:
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>
You need to add some attributes to the fields: 您需要在字段中添加一些属性:
$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'],
],
]);
i just made a slight change to the answer provided by Marco. 我刚刚对Marco提供的答案稍作修改。
[
'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'
],
in view page 在视图页面中
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.