FaizFurios52 FaizFurios52 - 1 year ago 92
Javascript Question

Show Value Dropdown button with JavaScript in Laravel

I want to show my value when I click the button like this....
Please check this image

Can you help me please?? I want to show that value using

javascript
, but I can't.Because this is make me confuse.

This is code in view blade:



<!-- Category Field -->
<div class="form-group col-sm-6">
{!! Form::label('category_id', 'Category:') !!}
<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
@foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio"> {{ $occasions }}</label>
</div>
</li>
@endforeach
</div>

<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
@foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio"> {{ $types }}</label>
</div>
</li>
@endforeach
</div>

<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
@foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio"> {{ $flowers }}</label>
</div>
</li>
@endforeach
</div>
</div>
</div>
</div>





and this is code in Controller edit function



public function edit($id)
{
$product = $this->productRepository->findWithoutFail($id);
$store = Store::pluck('name', 'id')->all();
$photo = json_decode($product->photo_list);

$category = Category::pluck('name','id')->all();
$category1 = Category::where('parent_id','=',1)->pluck('name','id')->all();
$category2 = Category::where('parent_id','=',2)->pluck('name','id')->all();
$category3 = Category::where('parent_id','=',3)->pluck('name','id')->all();

if (empty($product)) {
Flash::error('Product not found');

return redirect(route('products.index'));
}

return view('products.edit',compact('product','store','category','photo','category1','category2','category3'));
}





UPDATE CODE

I try this code its work...but when i check 1 button or 2 button only....in other one give me result "undefined"....

this is my update code in view blade:



<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="dropdown dropdown-full-width dropdown-category">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="name">
<span id="category-select">Choose Category</span>
</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu row">
<div class="col-md-4">
<li><strong>By {{ $category[1] }}</strong></li>
@foreach($category1 as $occasions)
<li>
<div class="checkbox">
<label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>
</div>
</li>
@endforeach
</div>

<div class="col-md-4">
<li><strong>By {{ $category[2] }}</strong></li>
@foreach($category2 as $types)
<li>
<div class="checkbox">
<label><input type="radio" name="category['types']" class="category-radio" value="{{ $types }}"> {{ $types }}</label>
</div>
</li>
@endforeach
</div>

<div class="col-md-4">
<li><strong>By {{ $category[3] }}</strong></li>
@foreach($category3 as $flowers)
<li>
<div class="checkbox">
<label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers }}"> {{ $flowers }}</label>
</div>
</li>
@endforeach
</div>
</div>
</div>


<script type="text/javascript">
$('.category-radio').change(function() {
var category_occasions = $('input[name="category[\'occasions\']"]:checked').val();
var category_types = $('input[name="category[\'types\']"]:checked').val();
var category_flowers = $('input[name="category[\'flowers\']"]:checked').val();
var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
$('#category-select').text(output);
});
</script>





look my image for detail
enter image description here

please help me....thanks before...

Answer Source

You missed value attributes to your radio button. Checkout the below code and kindly repeat it for other fields also.

    <label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>

Jquery

$('.category-radio').change(function() {
    var category_occasions = $('input[name="category[\'occasions\']"]:checked').val() || '';
    var category_types = $('input[name="category[\'types\']"]:checked').val() || '';
    var category_flowers =$('input[name="category[\'flowers\']"]:checked').val() || '';
    var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
    $('#category-select').text(output);
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download