Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

subhamg's avatar

Getting 404 error, when posting data on laravel through ajax.

I want to post data form the view blade including token and use user id as a foreign key. I want to post data using ajax. Here is my code.

This is my view layouts (newUserRegister.blade.php)

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

{{--<title>{{ config('app.name', 'Trazoo') }}</title>--}}
<title> Trazoo </title>

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<link href="{{ asset('css/all.css') }}" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
{{--<link href="{{ asset('css/responsive.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/custom.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/filter.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/prettify.min.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/nprogress.css') }}" rel="stylesheet">--}}
{{--<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">--}}
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
 <link href="{{ asset('css/all.css') }}" rel="stylesheet">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
.navbar{ margin-bottom: 0px !important; }
.navbar-default {
    background-color: white;
}


.fa-stack {
    font-size: 13px; 
    color: #d7d7e1; 
    margin-top: -2%;
}

 .navbar-nav .active a::after {

border-bottom: 2px solid #2350f5; bottom: 5%; content: " "; left: 0; position: absolute; right: 0; background-color: transparent; }

                <!-- Collapsed Hamburger -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Branding Image -->
                <a class="navbar-brand" href="{{ url('/') }}">
                   Trazoo
                </a>
            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <!-- Left Side Of Navbar -->
                <ul class="nav navbar-nav">
                    &nbsp;
                </ul>
                <ul class="nav navbar-nav navbar-center" style="padding-top: 0px;">
                    <!-- Authentication Links -->

                    <li class="nav-item active">
                        <a class="nav-link" style="background-color: transparent;" href="#">
                        <span id="icon_1" class="fa-stack" >
                            <i class="fa fa-circle fa-stack-2x" ></i>
                            <i class="fa fa-inverse fa-stack-1x" >1</i>
                            </span>
                        <span id="iconCheck_1" class="fa-stack" style="display: none;" >
                            <i class="fa fa-circle fa-stack-2x" style="color: #4eba41" ></i>
                            <i class="fa fa-inverse fa-stack-1x" > &#10004; </i>
                             </span>
                        Business Info</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" style="background-color: transparent;" href="#">
                        <span id="icon_2" class="fa-stack"  >
                            <i class="fa fa-circle fa-stack-2x" ></i>
                            <i class="fa fa-inverse fa-stack-1x">2</i>
                            </span>
                            <span id="iconCheck_2" class="fa-stack" style="display: none;" >
                            <i class="fa fa-circle fa-stack-2x" style="color: #4eba41" ></i>
                            <i class="fa fa-inverse fa-stack-1x" > &#10004;</i>

                        </span>
                        Pick Up Address</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" style="background-color: transparent;" href="#">
                        <span  id="icon_3" class="fa-stack"  >
                            <i class="fa fa-circle fa-stack-2x" ></i>
                            <i class="fa fa-inverse fa-stack-1x">3</i>
                            </span>
                            <span  id="iconCheck_3" class="fa-stack" style="display: none;" >
                            <i class="fa fa-circle fa-stack-2x" style="color: #4eba41" ></i>
                            <i class="fa fa-inverse fa-stack-1x" > &#10004;</i>

                        </span>
                        Payment Details</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" style="background-color: transparent;" href="#">
                        <span id="icon_4" class="fa-stack"  >
                            <i class="fa fa-circle fa-stack-2x" ></i>
                            <i class="fa fa-inverse fa-stack-1x" >4</i>
                            </span>
                            <span id="iconCheck_4" class="fa-stack" style="display: none;" >
                            <i class="fa fa-circle fa-stack-2x"  ></i>
                            <i class="fa fa-inverse fa-stack-1x" > &#10004;</i>

                        </span>
                        Buisness &amp; KYC Info</a>
                    </li>

                </ul>

                <!-- Right Side Of Navbar -->
               <!-- <ul class="nav navbar-nav navbar-right">
                    
                        <li><a href="{{ route('login') }}">Login</a></li>

                </ul>-->
            </div>
        </div>
    </nav>

    @yield('content')
</div>

<!-- Scripts -->    @yield('script')

<script src="{{ asset('js/app.js') }}"></script>

<script src="{{ asset('js/jquery.min.js') }}"></script>

{{--<script src="{{ asset('js/bootstrap.min.js') }}"></script>--}}
{{--<script src="{{ asset('js/fastclick.js') }}"></script>--}}
{{--<script src="{{ asset('js/nprogress.js') }}"></script>--}}
{{--<script src="{{ asset('js/bootstrap-wysiwyg.min.js') }}"></script>--}}
{{--<script src="{{ asset('js/jquery.hotkeys.js') }}"></script>--}}
{{--<script src="{{ asset('js/prettify.js') }}"></script>--}}

this is the filed that extend my view @extends('layouts.newUserRegister')

@section('content')

<div class="backgroundColorRegister">
   
    <form id="businessinfo"     >
        <div class="divPositionNewRegister" id="firstForm" style="display: block;">




            <div class="form-group required">
                <label for="businessname" class="col-md-offset-2 inputLabel">Business Name</label>

                <div class="col-md-8 col-md-offset-2">
                    <input id="businessname" type="text" placeholder="Enter the name of your company" class="form-control" name="businessname"  autofocus>

                </div>
            </div>

            <div class="form-group required">
                <label for="businesstype" class="col-md-offset-2 inputLabel">Business Type</label>

                <div class="col-md-8 col-md-offset-2">
                    <input id="buisnesstype" type="text" placeholder="Select business type" class="form-control" name="businesstype"  autofocus>

                </div>
            </div>

            <div class="form-group required">
                <label for="industry" class="col-md-offset-2 inputLabel">Industry</label>

                <div class="col-md-8 col-md-offset-2">
                    <select id="industry" type="text"  class="form-control" name="industry"   autofocus>
                        <option hidden >Select industry</option>
                        <option value="text1"> text 1 </option>
                        <option value="text2"> text 2 </option>
                        <option value="text3"> text 3 </option>

                    </select>
                </div>
            </div>

            <hr style="margin-top: 58%;">

            <div class="form-group">
                <div class="col-md-2 col-md-offset-0" style="bottom: 2%; position: absolute; left: 1%;">
                    <a  href="{{ route('login') }}">
                        <button type="button" class="btn btn-default" style="padding: 4px 20px; font-weight: 500;">
                            Back
                        </button></a>
                </div>
            </div>

            <div id="postRequestData"></div>


            <div class="form-group">
                <div class="col-md-2 col-md-offset-8" style="bottom: 2%; position: absolute; right: 6%;">
                    <button type="submit"  id="insert" class="btn btn-primary" style="padding: 4px 20px; font-weight: 500; background-color:#2350f5 " >
                        Next
                    </button>
                </div>
            </div>



        </div>
        {{ csrf_field() }}
    </form>

</div>

@endsection @section('script')

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


        $('#insert').click(function (e) {
            e.preventDefault(); // this prevents the form from submitting

            var businessname = $('input[name=businessname]').val();
            var businesstype = $('input[name=businesstype]').val();
            var industry = $('#industry option:selected').val();
            //var token = $('input[name=_token]').val();
            var data = {businessname: businessname, businesstype: businesstype, industry: industry};

            var request = $.ajax({
                url: 'myformPost',
                type: "POST",
                data: data,
                success: function (response) {
                    console.log(response);
                    alert(response.message);


                }
            });
        });
    });

This is my routes on web.php

Route::get('myformPost', 'NewController@myform');

Route::post('myformPost', 'NewController@myformPost');

This is my Controller

namespace App\Http\Controllers;

use App\Business; use Illuminate\Support\Facades\Validator; use Illuminate\Http\Response; use Illuminate\Support\Facades\Auth; use Illuminate\Http\Request; use Illuminate\Support\Facades\Input;

class NewController extends Controller { /** * @param Request $request * @return \Illuminate\Http\JsonResponse / / public function myformPost() { if(Request::ajax()) { $post = Request::all();

        $business = new business;
        $business->businessname = $post['businessname'];
        $business->businesstype = $post['businesstype'];
        $business->industry = $post['industry'];
        $business->user_id = Auth::user()->id;
        $business->save();

        return redirect()->back();

        $response = array(
            'status' => 'success',
            'msg' => 'Option created successfully',
        );
    }
}*/

public function myform()

{

    return view('layouts.newUserRegister');

}

public function myformPost(Request $request)

{

    $validator = Validator::make($request->all(), [
        'businessname' => 'required|string|max:255',
        'businesstype' => 'required|string|max:255',
        'industry' => 'required|string|max:255',]);

    $business = new business();
    $business->businessname = $request->businessname;
    $business->businesstype = $request->businesstype;
    $business->industry = $request->industry;
    $business->user_id = Auth::user()->id;

    /*$result = $business->saveOrFail();
    if($result){
        response()->json(array('message'=>'Record successfully saved or updates'));
    }else{
        response()->json(array('message'=>'Failed'));
    }*/
    $business->save();

   //$input = request()->all();


    return response()->json(['success'=>'Got Simple Ajax Request.']);

}

}

This is my modal

0 likes
1 reply
Snapey's avatar

your route

            var request = $.ajax({
                url: 'myformPost',
                type: "POST",

is going to be relative to the current URL

If your route is /myformPost you will probably find you are posting to /myformPost/myformPost

(you can check this in your browser inspector network tools)

try with a backslash at the start of the route in your ajax

            var request = $.ajax({
                url: '/myformPost',
                type: "POST",
                data: data,
                success: function (response) {
                    console.log(response);
                    alert(response.message);


                }
            });

This only works if your URLs are clean as in mydomain.dev/myformPost and not containing /public/ or index.php

Please or to participate in this conversation.