How to submit a form request using ajax without page refresh and return a message in laravel?

Question

I'm trying to submit a form request and store data without page refresh or redirect. And send success message to

 @if (session('message'))
    <div class="alert alert-success">
       {{ session('message') }}
    </div>
   @endif

,I get white page after clicking submit button with the following response

{
"msg": "Setting created successfully"
}

The html Form:

<form method="POST" action="/mail/store" id="contactForm">
    @csrf
    <div style="display: flex;" class="name-email">
        <div class="form-group col-sm-6 fl_wrap">

            <input type="text" name="name" value="{{ old('name') }}" id="name"
                   class="form-control fl_input" placeholder="Name"
                   required>
        </div>
        <div class="form-group col-sm-6 fl_wrap">

            <input type="text" name="email" value="{{ old('email') }}" id="email"
                   placeholder="Email"
                   class="form-control fl_input" required>
        </div>
    </div>
    <div class="form-group col-sm-12 fl_wrap mt-2">
    <textarea type="text" name="message" rows="7" value="{{ old('message') }}" id="message"
              class="form-control fl_input" placeholder="message"
              required></textarea>
    </div>
    <div class="form-group text-center mt-5">
        <button type="submit" value="save" id="submit" class="btn btn-warning submit"
                style="color: white;background: rgb(59, 199, 246); border-color: rgb(59, 199, 246); width: 140px;">
            send
        </button>
    </div>

</form>

Js Code: I think there's something wrong or missing with ajax code but I don't know where

 <script src="/js/jquery.min.js"></script>
     <script !src="" type="text/javascript">
         $(document).ready(function () {
             $.ajaxSetup({
                    headers: {
                           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
            });
$('#contactForm').on('submit',function (e) {
                        e.preventDefault();

                        var name = $('#name').val();
                        var email = $('#email').val();
                        var message = $('#message').val();

                        $.ajax({
                           type: "POST",
                           url: host+'/mail/store',
                            data: { name:name ,email:email,message:message},
                            success: function( msg ) {
                                $("body").append("<div>"+msg+"</div>");
                            }
                        });

                        $.post('contactForm', { name:name, email:email, message:message }, function () {
                            console.log(data);
                            $('#postRequestData').html(data);
                        });
                    });
                });

store function in controller

 public function store(Request $request)
    {

        $mail = new Mail();
        $mail->name = $request->name;
        $mail->mail = $request->email;
        $mail->message = $request->message;
        $mail->save();

        $result = array(
            'msg' => 'Setting created successfully' );
        return Response::json($result);
    }

Routes

Route::get('/mail','MailsController@create');

Route::post('/mail/store','MailsController@store');

Answer 1

Try this one:

$.post("{{ url('mail/store') }}", {
    name, email, message, '_token': "{{ csrf_token() }}"
}, function(data) {
    $('#postRequestData').html(data.message);
});