when one checkbox is checked showing its related checkboxes using jquery

please tell me where i going wrong

view

 <form class="m-t-40" method="post" action="{{url('/')}}/mechanic_brands/{{$mechanic->mechanic_id}}" enctype="multipart/form-data">
                                    {{csrf_field()}}

                                
                                      <div class="form-group">
                                        <h5>Segment<span class="text-danger">*</span></h5>
                                        <div class="controls">
                                            
                                @foreach($segment as $sg)
                                <ul><li>
                                <input type="checkbox" name="sg[{{$sg->segment_id}}]"value ="{{$sg->segment_id}}" id="{{$sg->segment_id }}" onchange="getBrands(this.value)" class="test">

                                <label  for="{{ $sg->segment_id }}">
                                <p>{{$sg->segment_name }}</p></label></li></ul>
                                
                                @endforeach
                                        </div>

                                       
                                    </div> 


                               
                                <div class="controls" id="brands"> </div>
                                       
                                
                                     <!--  <div class="form-group">
                                        <h5>Brands<span class="text-danger">*</span></h5>
                                        <div class="controls">
                                            
                                @foreach($brand as $br)
                                <ul><li>
                                <input type="checkbox" name="br[{{$br->brand_id}}]" value ="{{$br->brand_id}}" id="{{$br->brand_id }}" class="test">

                                <label  for="{{ $br->brand_id }}">
                                <p><img src="{{url('/')}}/brand_logos/{{$br->brand_logo}}" width="70px" height="40px" /></p></label></li></ul>
                                
                                @endforeach
                                        </div>
                                       
                                    </div> -->

                                               
                                            <div class="text-xs-right">
                                                <button type="submit" class="btn btn-info">Submit</button>
                                                <button type="reset" class="btn btn-inverse">Cancel</button>
                                            </div>
                                </form>

controller

public function brandAjax($segment)
    {
      
        $brand=brands::where("segment_id",$segment)
                    ->pluck('brands.brand_name,brands.brand_id')->all();
        return json_encode($brand);
    }

script

  function getBrand(segment)
         {                   
            $(document).ready(function() 
            {
            $(".test").click(function(){
            var favorite = [];
            $.each($("input[name='sg[{{$sg->segment_id}}]']:checked"), function(){            
            favorite.push($(this).val());
            });
            // alert("Selected Segment is: " + favorite.join(", "));
            
            if(favorite.length>0)
            {
                $.ajax({    //create an ajax request to display.php
                    type: "POST",
                    url: '{{url('/')}}/brand/Ajax/'+segment, 
                    data:{segment_id:favorite,action:1},
                    // dataType: "html",   //expect html to be returned                
                    success: function(response){                    
                        $("#brands").html(response); 
                        // alert(response);
                    }
                    
                });
            }
          }  
            else
            {
                $("#brands").html(""); 
            }   
        });
    });

piljac1

6 years ago

Level 28

I see multiple things wrong with your JS :

$(document).ready nested inside a function (it can work but it's bad design in my opinion). That being said, I would take it out of the function, put it above it and set the onchange event handler there.

$(document).ready(function() {
    $('.test').on('change', function() {
        getBrands(this.value);
    });
});

function getBrands(segment) {
    ...
}

In your onchange event you call getBrands while getBrand is defined as a function.
This will not work because $sg will always all the same value in that context:

$.each($("input[name='sg[{{$sg->segment_id}}]']:checked"), function(){ favorite.push($(this).val());

That being said, your post is lacking a lot of explanations. I can't seem to understand what related checkboxes you're talking about...

Kanchan186

6 years ago

Level 3

segment contains two checbox

two wheeler
four wheeler

if i checked two wheeler then shows only two wheeler brands.. or if i checked four wheeler then shows only four wheeler brands.

brands also shows in checkbox type

this type of functioning i want

piljac1

6 years ago

Best Answer

Level 28

I see. There is a lot of work to do and it's kinda hard to do it blindfolded (without testing). But I'll try and give you a heads up later today (gotta go back to bed if I don't want to fall asleep while working).

Btw, just realized that the following

$brand=brands::where("segment_id",$segment) ->pluck('brands.brand_name,brands.brand_id')->all();

Should be (in correct Laravel standards)

$brands = Brand::where('segment_id', $segment)->select('brand_name', 'brand_id')->get();

Please or to participate in this conversation.