Check Login with AJAX and Display Filler

Question

I am trying to create a login area where when the user clicks login, a Bootstrap modal pops up with the form. What I am trying to do is make it so when the user clicks login, the username and password fields become disabled and a loading image is displayed. If the login is successful, they should be directed to another page. If login fails, an error text will be displayed.

I am not sure how to go about submitting the form in the background and returning wether if the login was successful or not. This is what I have

index.html:

<div class="modal-body">
    <form id="loginform" class="form col-md-12 center-block" method="post">
        <div class="form-group">
          <input type="text" class="form-control input-lg" placeholder="Username">
        </div>
        <div class="form-group">
          <input type="password" class="form-control input-lg" placeholder="Password">
        </div>


  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>
    <button type="submit" class="btn btn-primary">Login</button>
    </form>
  </div>

Later on in index.html

<script type="text/javascript">
$(function(){
$('#loginform').on('submit', function(e){
  e.preventDefault();
  $.post('#', 
     $('#myForm').serialize(), 
     function(data, status, xhr){
       alert("Oops...");
     });
   });
});
</script>

Instead of using serialize have you tried passing a json object? What does the server expect? — vprasad, Mar 07 '14 at 02:56

rolodex · Answer 1 · 2017-12-01T17:02:09.723

I understand your situation and here's my approach to your requirement. Firstly I'll construct the basic form elements as such;

<form id="login">
    <input type="text" name="username" placeholder="Username" />
    <input type="password" name="password" placeholder="Password" />
    <input type="submit" value="login" />
    <span class="message"></span>
</form>

I use a function to serialize the form input in a cleaner manner that will output key:value of the form instead of {name:key, value:value} from the built-in serializeArray();

$.fn.serializeObject = function(){
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else  {
            o[this.name] = this.value || '';
        }
    });
    return o;
}

And then I'll construct the javascript inside document.ready and call $.serializeObject();

$('#login').on('submit', function(){
    var data = $(this).serializeObject()
        data.command = 'login'

    // Disable all input and buttons while sending
    $(this).find('input').prop('disable', true)

    // Post data which will contain {username:value, password:value} to server
    $.post('url.php', data, function(result,status){
        console.log(result)
        //result will contain whatever php is echoing, so for the server will return 'true' as string, 
        if(result == 'true'){
            window.location.href = 'theURL' // Redirect the user.
        }else {
            // or error message as string
            $('.message').html(result)

            // Re-enable the buttons
            $(this).find('input').prop('disable', false)
        }

    })
})

And then I'll have the php script ready like such (the most basic example);

<?php 
    $command = $_POST['command'];
    $username = $_POST['username'];
    $password = $_POST['password'];

    if($command == 'login'){
        // Check username and password with database here
        if($username == 'test' && $password == 'test'){
            echo 'true';
        }else{
            echo 'Wrong username/password';
        }
    }
?>

score 0 · Answer 2 · answered Mar 07 '14 at 03:00

0

You have to add name attributes into fields which you want to serialize. So add id="Username" and name="Password". This should work.

answered Mar 07 '14 at 03:00

Christoph

307
1
2
10

score 0 · Answer 3 · edited May 23 '17 at 12:10

you can use done, and fail for your post call to decide what to do in both cases. I prefer to use $.ajax than $.post because is more flexible, $post is similar to $.ajax({type: 'POST'})

var myUrl = '/controller/action'
$('#loginform').on('submit', function () {
    type: 'POST',
    data: $('#myForm').serialize(),
    url: myUrl,
    success: function () {
        //login was successfull so redirect
        window.location.href = 'some url'
    },
    error: function () {
        //loging failed, so show validation

    }
});

I did a post about a similar scenario check it out. it will help you

you also need to add name attribute to your inputs so they can be serialized

<input name="username" type="text" class="form-control input-lg" placeholder="Username">

Check Login with AJAX and Display Filler

3 Answers3