I have some front-end forms including login and sign up which are modal windows. Currently I have no feedback for the user if they are successful or not.

What's the best method to return something in the modal?

In an ideal world I'd like to update the buttons somehow, like these:

http://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/ or http://lab.hakim.se/ladda/

Any ideas or help would be appreciated.

1 Answer 1


I'd say your best bet would be to use something like jQuery to make an AJAX call and then manipulate the DOM depending on what response you get. Something like:

$('#loginForm').submit( function (e) {

  // Stop the form actually doing anything or refreshing the page

  // Get the inputs from the form
  var data = $(this).serialize(),
      button = $(this).find('button');

  // Find our button and change its text or something...
  button.text('Logging you in');

    method: 'POST',
    url: '/',
    data: data,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  .success(function(data) {

    // They are now logged in, reflect that in your button
    button.text('Logged in!');

    // Maybe redirect them aswell?
    window.location.href = "/some/members/area";

  .error(function(data) {

    // Something went wrong, we can now show that
    button.text('Something went wrong');


Thats a adapted version of code I found from this question: Front end login form with ajax so I haven't actually tested it, but it sounds like it should work and then changing the button is just straight forward jquery.

If you get errors with CSRF protection, then you should find a solution here: http://buildwithcraft.com/help/csrf-protection#updating-your-javascript

Hope that helps get you started!

  • Thanks Alec, partially a bit beyond me but I'll give it a go! Dec 1, 2015 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.