Submitting an Ajax form in Laravel

Let’s create a form without reloading the page on the Laravel framework using ajax technology. First, let’s write the routes in web.php

// New page with form – output
Route::get(‘/feedback’, array(
‘as’ => ‘site.index.feedback’,
‘uses’ => ‘IndexController@feedback’
));

// Ajax controller route

Route::post(‘/feedback’, ‘AjaxController@store’);

Let’s create a view (template with layout)

/resources/views/site/index/feedback.blade.php with form

<form id="dismissal-form" method="POST" action="{{ $url }}">
    {{ csrf_field() }}
    <div class="form-container">
        <h3 class="form-header">Dear Colleague!</h3>
        <div class="form-input-container">
            <input name="fio" class="form-text-input" type="text" placeholder="Full name (optional)">
            <input name="position" class="form-text-input" type="text" placeholder="Job title">
            <input name="experience" class="form-text-input" type="text" placeholder="Work experience in the company">
        </div>
    </div>
    <input type="button" id="dismissal-form-btn" name="submit" value="Send" class="form-submit-button">
</form>

and connect the js script there to process the form

<script src="js/script_form.js"></script>

File contents js/script_form.js

$(document).ready(function($) {

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

    $("#dismissal-form-btn").click(
        function(e){
            e.preventDefault();
            $.ajax({
                url:     "/feedback", //url страницы (action_ajax_form.php)
                type:     "POST", //sending method
                dataType: "html", //data format
                data: $("#dismissal-form").serialize(),  // Searilize the object
                success: function(response) { //Data sent successfully
                    $(".form-pop-up-text .form-lowertext").html("Thank you for your answers and for your work in our company.")
                    $(".form-pop-up-text .form-lowertext1").html("We wish you success in your new place!")
                    $("#pop-up-btn").addClass("success");
                    $(".form-pop-up").show();
                    $(".form-pop-up-text").show();
                    console.log(response);
                },
                error: function(response) { // Data not sent
                    $(".form-pop-up-text .form-lowertext").html("An error has occurred")
                    $(".form-pop-up-text .form-lowertext1").html("Try again")
                    $(".form-pop-up").show();
                    $(".form-pop-up-text").show();
                    console.log(response);
                }
            });
        }
    );
    $(".pop-up-btn").click(
        function (){
            if (document.getElementById("pop-up-btn").classList.contains("success")) {
                document.location.href = "https://ostrov-chistoty.by";
            }
            else{
                $(".form-pop-up").hide();
                $(".form-pop-up-text").hide();
            }
        }

    )
});

In the controllers catalog/app/Http/Controllers/ let’s create a new controller AjaxController.php

Inside the controller we create a method for submitting the form:

public function store(Request $request)
{
    // email from the site admin settings - or enter strictly $settings = "info.site.com";
    $settings = $this->getSettings('SettingsSite', 'emails');

    $headers = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    $title = ($_POST["fio"] == "" ? "Anonymously" : $_POST["fio"]) . " - " . $_POST["position"] . " - experience" . $_POST["experience"];

    $text = $title . "<br>";
    $text .= "Text ... Full name: ".$_POST["fio"];

    mail($settings['recipient_form'], $title, $text, $headers);
    $response = array(
        'status' => 'success',
        'msg' => $request->message,
    );
    return response()->json($response);
}

In the controller/app/Http/Controllers/IndexController.php add a template rendering method:

public function feedback() {
    return view('site.index.feedback', array(
        'url'   => $_SERVER['REQUEST_URI']
    ));
}

Having done everything according to the instructions, you can create any form in Laravel without reloading to ajax.