Issue
I have a Laravel 8 project. I added three new tags to this project.Currently, there are five tags in total as below.
-> Normal Tag
-> Main Feed Tag
-> Collection Tag
-> Brand Tag
-> Non-Payout Tag
There is a page called Tag List where we list the contents according to their tags. This page has both edit and create features. For example, when I enter the editing section, I want the form in the content of the edit page to change dynamically according to the selected tag.
For example, Brand Tag is selected in the image below, so the area I marked with red should be added to the form on the edit page. But other than that, this area should not be visible.
At the moment, I am sharing the areas of the edit page related to this problem in the code area below.
edit.blade.php
<div class="col-lg-3">
{{ Form::label('isMainTag','Is Main Tag', 'Collection Tag', 'Brand Tag') }}
<select name="tags[isMainPage]" class="form-control form-control-sm" onchange="showDiv(this)">
<option @if($tag->isMainPage==0) selected @endif value="0">Normal Tag</option>
<option @if($tag->isMainPage==1) selected @endif value="1">Main Feed Tag</option>
<option @if($tag->isMainPage==2) selected @endif value="2">Collection Tag</option>
<option @if($tag->isMainPage==3) selected @endif value="3">Brand Tag</option>
<option @if($tag->isMainPage==4) selected @endif value="4">Non-Payout Tag</option>
</select>
</div>
<div class="col-lg-12 my-5" id="dynamic_brand_form">
<div class="row">
<div class="col-lg-3">
{{ Form::label('name','Brand Name') }}
{{ Form::textarea('fields[brand_name]',$tag->getField('brand_name'),["class"=>"form-control form-control-sm","placeholder"=>"Brand Name"]) }}
</div>
<div class="col-lg-3">
{{ Form::label('description','Brand Description') }}
{{ Form::textarea('fields[brand_description]',$tag->getField('brand_description'),["class"=>"form-control form-control-sm","placeholder"=>"Brand Description"]) }}
</div>
<div class="col-lg-3">
{{ Form::label('logo','Brand Logo') }}
{{ Form::file('file_fields[brand_logo]',["class"=>"form-control form-control-sm",'accept'=>'.png,.jpg,.jpeg']) }}
@if($tag->getField('brand_logo')!=null)
<div class="mt-2 text-center">
<p>Current Logo</p>
<img src="{{ $tag->getField('brand_logo')}}" height="100" width="100">
</div>
@endif
</div>
</div>
</div>
edit.blade.php section('scripts')
<script>
function showDiv(select){
if(select.value == "3"){
$("#dynamic_brand_form").show();
}
else{
$("#dynamic_brand_form").hide();
}
}
</script>
I wrote the JS code as above but without success. Where am I doing wrong?
Solution
I solved my problem by converting the JS code below.
$('[name="tags[isMainPage]"]').change(function(){
var select = $(this).val();
if(select == "3"){
$("#dynamic_brand_form").show();
$("#dynamic_collection_form").hide();
}
else if(select == "2"){
$("#dynamic_brand_form").hide();
}
}).trigger('change');
Answered By - iguner
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.