Laravel 5.3 : POST request using Ajax always returning Error 404 in console by jquery.min.js

Question

I'm using Laravel 5.3 and trying to make a POST request using Ajax - Jquery. For the life of me, I am not able to find what is the mistake I have in my code.

If it helps, I am trying to add a new college details into my table using ajax from admin panel. I have made sure I am making POST request and my routes/web.php has a route method with POST to receive the request.

My master.blade.php has the following line :

<meta name="csrf-token" content=" {{ csrf_token() }} ">
<script type="text/javascript" src="{{URL('js/jquery.min.js')}}"></script> //jQuery v2.1.4

In my view, I have the following internal javascript scripting. I have used @section and @yield concept to render it as one.

My settings/home.blade.php looks like this:

@section('scripts')
 <script type="text/javascript">
 function addCollSubmit()
 {

   $.ajaxSetup({

    headers:{
        'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
    }

    });


    var formData = new Array();
    for(var i=0 ; i< coll_no; i++)
    {
       var id = "input[name=coll_name_"+i+"]";
       var temp = $(id).val();
       formData.push(temp);
    }

     $.ajax(
    {
        type:'POST',
        headers : { 
            'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
         },
        url:'/admin/settings/addcollege',
        data:formData,
        success:function(data)
        {
            console.log(data);
            $("#reveal-content").html(data);
        },
        error: function(data)
        {
            console.log(data);
        }
    });

   }
  </script>
 @endsection

The form section in my settings/home.blade.php looks like:

<form method="POST" name="addCollegeForm" action="">
    {{ csrf_field() }}
    <table id="addCollTable">
     <tr>
        <td><input type="text" name="coll_name_0" placeholder="Enter College Name" /></td>
        <td><a class="button primary" onclick="oneMoreColl()" href="#"><i class="fi-plus"></i></a></td>
     </tr>
    </table>
    <table>
     <tr>
        <td colspan="2"><hr/></td>
     </tr>
     <tr>
        <td colspan="2" align="center">                         
        <a href="#addCollSubmit" onclick="addCollSubmit()" class="button success" >Submit</button></td>
     </tr>
    </table>
</form>

My routes/web.php has the following line to receive the POST request :

Route::post('admin/settings/addcollege','SettingsController@postIndex');

postIndex() does have a function definition to store the college details in the table.

Every time I make a request, it generates the following in my developer tools - console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/admin/settings/addcollege 

Answer 1

Try the following url

 url:"{{url('/admin/settings/addcollege')}}",