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.
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
e.preventDefault();
// 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');
$.ajax({
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!
