Laravel : How to submit a registration using a bootstrap Modal?

Question

Register.blade.php

 <div class="modal fade" id="adduser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create new user</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
<div class="modal-body"><div class="container">
<div class="row">
    <div class="col-md-8 col-md-offset-2">
                <form id="registeruser" class="form-horizontal" method="POST" action="{{ route('register') }}">
                    {{ csrf_field() }}

                    <div class="form-group has-feedback">
                        <label for="name" class="col-md-4 control-label">Name</label>

                        <div class="col-md-6">
                            <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>

                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                                <span class="text-danger">
                                    <strong id="name-error"></strong>
                                </span>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                        <div class="col-md-6">
                            <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required>


                                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                                <span class="text-danger">
                                    <strong id="email-error"></strong>
                                </span>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="job_title" class="col-md-4 control-label">job_title</label>

                        <div class="col-md-6">
                            <input id="job_title" type="text" class="form-control" name="job_title" value="{{ old('job_title') }}" required autofocus>

                                <span class="glyphicon glyphicon-job form-control-feedback"></span>
                                <span class="text-danger">
                                    <strong id="job-error"></strong>
                                </span>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="password" class="col-md-4 control-label">Password</label>

                        <div class="col-md-6">
                            <input id="password" type="password" class="form-control" name="password" required>

                           <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        <span class="text-danger">
                            <strong id="password-error"></strong>
                        </span>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="password-confirm" class="col-md-4 control-label">Confirm Password</label>

                        <div class="col-md-6">
                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                        </div>
                        <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-4">
                            <button type="submit" class="btn btn-primary" id="submitForm">
                                Register
                            </button>
                        </div>
                    </div>
                </form>
    </div>
</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

Bottom of register.blade.php AJAX

    @section('script') <script type="text/javascript">
    $('#registeruser').on('submit', function(e){
        var registerForm = $("#registeruser");
        var formData = registerForm.serialize();

         $.ajaxSetup({
        header:$('meta[name="_token"]').attr('content')
        })
    e.preventDefault(e);
        $.ajax({
            url: $(this).attr('action'),
            type:'POST',
            data:formData,
            dataType: 'json',
            success:function(data) {
                console.log(data);
            },
            error: function(data)
            {

            }
        });
    });
</script>
@endsection 
@endsection

RegisterController

 protected function validator(array $data)
{
    return Validator::make($data, [
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
        'password' => 'required|string|min:6|confirmed',
        'job_title' => 'in:Admin,Staff,Operator',
    ]);

    $data = $request->all();

    if ($validator->passes()) {

        // Store your user in database 

       return response()->json(['responseText' => 'Success!'], 200);

    }

    return Response::json(['errors' => $validator->errors()]);


}

/**
 * Create a new user instance after a valid registration.
 *
 * @param  array  $data
 * @return \App\User
 */
protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => bcrypt($data['password']),
        'job_title' => $data['job_title'],
    ]);
}

After I submitted the post request. My form data did not add into the database. And the XMLrequest gave me 200 which is good. Im using a bootstrap modal which popup a window and I wanted to submit from there. Because I am managing the user and only admin allow to add user.

Edited Web.php

Auth::routes();

Route::get('/', function () {
return view('auth.login');
});

Route::middleware(['auth'])->group(function (){

Route::get('/home', 'HomeController@index')->name('home');

Route::get('/register', 'Auth\RegisterController@register');

Route::get('/logout', 'HomeController@doLogout')->name('home');


Route::get('/user', function () {
  return View::make('auth.register');
  });

If i change the form action="{{ url(register) }}" I need the register route. If {{route(register)}} is directly get from the auth.

Answer 1

Try add route register method post

Route::post('/register', 'Auth\RegisterController@register');