Laravel Ajax form post shows 500 internal server error. I tried solving with a lot of solution but still not working

Question

I want to post data with ajax request but it said internal server. I tried adding meta data and X-CSRF-TOKEN but still not working. Please take a look at my code

Ajax Code:

$("#firstForm").on("submit", (e)=>{
    e.preventDefault()
    let dataString = $(this).serialize();
    let email = document.getElementById("emailInput").value
    let password = document.getElementById("passwordInput").value
    var token = $('meta[name="csrf-token"]').attr('content');
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': token
        }
    });
    $.ajax({
        type: 'POST',
        url: '/register/create',
        data: dataString,
        dataType: 'json',
    }).done(function(response){
        console.log("Done");
    });
    return false;
    })

HTML Form:

<form class="mt-5 text-start" id="firstForm" method="post">
                    <label class="text-white main-font">Email</label>
                    <input type="email" name="email" id="emailInput" class="form-control mb-2" placeholder="Enter your email here">
                    <label class="text-white main-font">Password</label>
                    <input type="password" name="password" id="passwordInput" class="form-control password mb-2" placeholder="Enter your password here">
                    <i class="d-none fa-solid fa-eye fs-5 eye" onclick="eyeOpen()"></i>
                    <i class="fa-solid fa-eye-slash fs-5 eye" onclick="eyeClose()"></i>
                    <div class="form-check text-start mb-5">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label text-white" for="flexCheckDefault">
                            I've agree to the terms and conditions!
                        </label>
                    </div>
                    <button id="firstBtn" class="mb-3 mt-5 btn btn-lg btn-danger text-white main-font w-100">Next</button>
                </form>

Laravel Route:

Route::post('register/create', [AccountController::class, 'create']);

Laravel Controller:

public function create(Request $request) {
    $user = new User;
    $user->email = $request->email;
    $user->password = Hash::make($request->password);
    $user->save();

    return view('accounts.login');
}

The Error:

[2022-11-22 13:18:23] local.ERROR: SQLSTATE[HY000]: General error: 1364 Field 'name' doesn't have a default value (SQL: insert into `users` (`email`, `password`, `updated_at`, `created_at`) values (?, $2y$10$uwsmx9lDw4z9a0tGwUjBWeNM8zfNEkoa7oREGdCBgxTkF3Owlo5Uy, 2022-11-22 13:18:23, 2022-11-22 13:18:23)) {"exception":"[object] (Illuminate\\Database\\QueryException(code: HY000): SQLSTATE[HY000]: General error: 1364 Field 'name' doesn't have a default value (SQL: insert into `users` (`email`, `password`, `updated_at`, `created_at`) values (?, $2y$10$uwsmx9lDw4z9a0tGwUjBWeNM8zfNEkoa7oREGdCBgxTkF3Owlo5Uy, 2022-11-22 13:18:23, 2022-11-22 13:18:23)) at C:\\xampp\\htdocs\\dating\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php:712)

Answer 1

when creating a new user the Name field is required and the error is also saying that the name doesn't have a value.

try adding a filled in your form for name and send it via ajax. like this

<form class="mt-5 text-start" id="firstForm" method="post">
@csrf
                    <label class="text-white main-font">Name</label>
                    <input type="text" name="name" id="name" class="form-control mb-2" placeholder="Enter your Name here">

                    <label class="text-white main-font">Email</label>
                    <input type="email" name="email" id="emailInput" class="form-control mb-2" placeholder="Enter your email here">
                    <label class="text-white main-font">Password</label>
                    <input type="password" name="password" id="passwordInput" class="form-control password mb-2" placeholder="Enter your password here">
                    <i class="d-none fa-solid fa-eye fs-5 eye" onclick="eyeOpen()"></i>
                    <i class="fa-solid fa-eye-slash fs-5 eye" onclick="eyeClose()"></i>
                    <div class="form-check text-start mb-5">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label text-white" for="flexCheckDefault">
                            I've agree to the terms and conditions!
                        </label>
                    </div>
                    <button id="firstBtn" class="mb-3 mt-5 btn btn-lg btn-danger text-white main-font w-100">Next</button>
                </form>

and also change your controller like this

public function create(Request $request) {
    $user = new User;
    $user->name= $request->name;
    $user->email = $request->email;
    $user->password = Hash::make($request->password);
    $user->save();

    return view('accounts.login');
}

change your ajax like this

                let dataString = $(this).serialize();
                $.ajax({
                    type: "post",
                    url: '/register/create',
                    data: dataString, // serializes the form's elements.
                    success: function(data) {
                        console.log(data);
                    },
                    error: function(data) {
                        console.log(data['message']);
                    },
                });

Answer 2

I checked the laravel.log file's error messages. Found that Jquery serialization return empty string. So, I custom coded the serialize function to get the closet dataString as Jquery.

let dataString = "email=" + document.getElementById("emailInput").value + "&password=" + document.getElementById("passwordInput").value