Uncaught TypeError: Cannot read property 'checked' of null at getBrand1 (Add:967) at HTMLInputElement.onclick (Add:852) blue.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

@kanchan186 but you have no element on the DOM with an id segment_id.. for that selector to work, you should have id="segment_id".

Maybe this will work?

<input type="checkbox" value="{{$sg->segment_id }}" name="sg[{{$sg->segment_id }}]" id="{{$sg->segment_id }}" onclick="getBrand1(this)">

function getBrand1(el)
{
    alert('Choose brands!');

    if(el.checked)
...
}

now getting this error

Uncaught ReferenceError: segment is not defined
    at getBrand1 (Add:970)
    at HTMLInputElement.onclick (Add:852)
blue.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

@kanchan186 and you added this into the function on the element, and el in the function definition, as I've shown above? Share the code again please, from the view and the script.

view

<div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Add Mechanic Brands</h4>
                                <h6 class="card-subtitle"></h6>
                                @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                               <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" value="{{$sg->segment_id }}" name="sg[{{$sg->segment_id }}]" id="{{$sg->segment_id }}" onclick="getBrand1(this)">

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

                                       
                                    </div> 

                                    <div class="controls"  id="brands">
                                   
                                     </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>
                                </div>
                                </div>
                            </div>
                        </div>

script

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
     <script type="text/javascript">

        function getBrand1(el)
   {
            alert('Choose brands!');

 if(el.checked)    {

       $.ajax({
       url: '/brand/Ajax/'+segment,
       type: "GET",
       dataType: "json",
       success:function(result) {
       data = eval(result);

       $.each(data, function(value,key){

       options += '<input type="checkbox" name="brand_id' + key + '" id="brand_id' + key + '"value="' + key + '" class="controls" />';

       options += '<label for="brand_id' + key + '">' + value + '</label>'; });
                       
       $("#brands").html(response); 

             }

         });
     }     

         else
            {
                $("#brands").html(""); 
            } 

        }

</script>

@kanchan186 can you try this then:

<input type="checkbox" value="{{$sg->segment_id }}" name="sg[{{$sg->segment_id }}]" id="{{$sg->segment_id }}" onclick="getBrand1(this.id)">

function getBrand1(id)
{
    alert('Choose brands!');

    if(document.getElementById(id).checked)
...
}

@nakov now this error occured

Uncaught ReferenceError: segment is not defined
    at getBrand1 (Add:970)
    at HTMLInputElement.onclick (Add:852)
blue.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

@kanchan186 well, actually the previous worked as well, as you have a different error now..

       url: '/brand/Ajax/'+segment,

you are using segment here, but it is never defined.. If that should be the id then just use id instead of segment.

@nakov sir segment is link for the function in controller. can i replace segment with id?

controller

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

@kanchan186 yes you can, because the segment is a segment_id.. which you are passing to the getBrand function.. so just use id

@nakov

and function in controller,can i update like this?

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

@kanchan186 the function in the controller can remain I guess.. or just if you change it like that then change $segment as well to be $id. Just please read the errors that you get, spent at least 5 minutes solving it yourself then share if you cannot figure it out.. Because these are very basic errors.. using a variable that has never been initialized..

sir after replace with segment to id

this error occurred

Failed to load resource: the server responded with a status of 404 (Not Found)/brand/Ajax/3:1 

@kanchan186 if you changed in the controller, then you need to change it in the route:

Route::get('brand/Ajax/{segment}','MechBrandController@brandAjax');

should be

Route::get('brand/Ajax/{id}','MechBrandController@brandAjax');

So JS has nothing to do with this, it is just on the server side. You could've leave this completely the same, and just use id in the JavaScript. I don't know if you understand this part.

And I believe that in your controller you can remove ->all() as the ->pluck() will already return a collection.

Make sure you have your Network tab opened on your browser to debug the error that you get if any new error appears.

@nakov i already made this changes in route also

@kanchan186 and if you try to run that in your browser:

yoursite.test/brand/Ajax/3

do you get 404?

@nakov yes sir

Failed to load resource: the server responded with a status of 404 (Not Found)
/brand/Ajax/3:1 

@kanchan186 so what have you changed my friend? Was it working with segment or you got 404 with segment as well? If it worked then revert the route and the controller to use segment and use ID in javascript only..

I really cannot debug your code for you, you should do it yourself.

@nakov this line get error

    url: '/brand/Ajax/'+segment,

error

Uncaught ReferenceError: segment is not defined
    at getBrand1 (Add:970)
    at HTMLInputElement.onclick (Add:852)
blue.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

@kanchan186 omg, you don't listen.. CHANGE EVERYWHERE ELSE EXCEPT THE JAVASCRIPT

    url: '/brand/Ajax/'+id,

Route::get('brand/Ajax/{segment}','MechBrandController@brandAjax');

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

@nakov sir i made changes according to you.. but same error occurs

Failed to load resource: the server responded with a status of 404 (Not Found)
/brand/Ajax/3:1 

@kanchan186 so that wasn't the problem. Something else with your route is the problem.. You should either check why that route does not work, it is not hit, or share the whole routes file here..

You can test using your browser btw. Just try to access the route using

yoursite.test/brand/Ajax/3

and make sure that this returns 200, not 404.

@nakov how to write checkbox value in javascript

because checkbox values always in array, how to define it?

@kanchan186 what you use is good, you use this as a value:

value="{{$sg->segment_id }}"

and you use the same as id="{{$sg->segment_id }}"

You are sending it using AJAX, which is not an array. If you submit the form, then it is an array sg[] but using ajax is single value..

You can see that in your error: /brand/Ajax/3 this does not work, there is no array here.

  var id=?
       $.ajax({
        url: '/brand/Ajax/'+id,

id="{{$sg->segment_id }}" how to define it in (script) ajax?

@kanchan186 you don't have to, as per the last code that I've shared that should already work.. see in the url it is using 3 already which is correct I guess.

<input type="checkbox" value="{{$sg->segment_id }}" name="sg[{{$sg->segment_id }}]" id="{{$sg->segment_id }}" onclick="getBrand1(this.id)">

// script
function getBrand1(id) // see the ID here..
{
    alert('Choose brands!');

    if(document.getElementById(id).checked)
...
}

Can you share your web.php file please.. that's where you have the error, the route is not found, hence 404.

web.php

//add Mechanic Brands
Route::get('mechanic_brands/{mechanic_id}/Add','MechBrandController@Add');
//save Mechanic_Service_station_info
Route::post('mechanic_brands/{mechanic_id}','MechBrandController@store');
//get segment wise brand using ajax
Route::get('brand/Ajax/{segment}','MechBrandController@brandAjax');

@kanchan186 this is the full web.php file.. you don't have any Route group or anything?

I really cannot debug this, I don't know why you are not trying in your browser..

Have set APP_DEBUG=true in your .env file.

Check what the exact error is when you try to access the URL through the browser, as it is GET request, you can type in your browser in new TAB:

yoursite.test/brand/Ajax/3 and see what the error is..

@nakov

after run thisyoursite.test/brand/Ajax/3 in new tab

This site can’t be reachedyoursite.test’s server IP address could not be found.
Search Google for yoursite test brand Ajax
ERR_NAME_NOT_RESOLVED

@kanchan186 can you run your project in the browser at all? :)

do you use reachedyoursite.test?

reachedyoursite.test/brand/Ajax/3

is what you've tried right?