Show value dropdown button with JavaScript in Laravel

Question

I want to show my value when I click the button like this:

I want to show that value using JavaScript, but I can't. Because this is make me confused.

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

Answer 1

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);
});