Custom Login Form (AJAX)

I am trying to build a custom form, which serves both as login and register form (let's forget the "why?"). Now usually we could simply use the {{ user:login_form }} tag to create to form. But I try to trigger the form by the click on the input.

Everything works with a custom


form> and submitting via AJAX to the action URL "/!/User/login". BUT: I would like to receive a e.g. JSON-reposonse to evaluate, wether that login was successful or not. As a response I currently receive the html of the redirected page after login/failed login. Can I somehow receive a success or failure response?

My Form:

<form class="login_form" id="login_form">
                <input type="hidden" name="_token" value="{{ csrf_token }}">
                <label for="Login_Email" class="text-block40">eMail Adresse</label>
                <label for="Login_Passwort" class="text-block40">Passwort</label>
                <input type="email" class="textfield40 spaceleft w-input" value="{{ old:email }}" maxlength="256" name="username" data-name="Login_Email" id="Login_Email" required="">
                <input type="password" class="textfield40 w-input" value="{{ old:password }}" maxlength="256" name="password" data-name="Login_Passwort" id="Login_Passwort" required="">
                <div class="sternchentext">Passwort vergessen? <a href="#" class="link">Hier klicken.</a></div>
                <div class="button-wrapper">
                    <input type="submit" value="Einloggen" class="button_white absenden_button spaceleft w-button">
                    <input type="submit" value="Registrieren" class="button_white absenden_button w-button">

My AJAX call:

$(document).on('click', '#login_form input[value=Einloggen]', function (event) {
    event.preventDefault(); //prevent default action
    var post_url = "/!/User/login"; //get form action url
    var request_method = "POST"; //get form GET/POST method
    var form_data = $("#login_form").serialize(); //Encode form elements for submission

        url : post_url,
        type: request_method,
        data : form_data,
        success: function(data){
Answered by Duncan McClean!
>>>>>>> Answered <<<<<<<
6 Replies