<p>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:</p>

<pre><code>$('#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');


  });
});
</code></pre>

<p>Thats a adapted version of code I found from this question: <a href="https://craftcms.stackexchange.com/questions/3081/front-end-login-form-with-ajax">Front end login form with ajax</a> so I haven't actually tested it, but it sounds like it should work and then changing the button is just straight forward jquery.</p>

<p>If you get errors with CSRF protection, then you should find a solution here: <a href="http://buildwithcraft.com/help/csrf-protection#updating-your-javascript" rel="nofollow noreferrer">http://buildwithcraft.com/help/csrf-protection#updating-your-javascript</a></p>

<p>Hope that helps get you started!</p>

CC BY-SA 3.0
2015-12-01T14:20:32.177Z
Thanks Alec, partially a bit beyond me but I'll give it a go!
richardpixel
CC BY-SA 3.0
2015-12-01T11:38:06.633Z
2015-12-01T11:38:06.633Z
2017-04-13T12:51:00.303Z
Alec Ritson
<p>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.</p>

<p>What's the best method to return something in the modal?</p>

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

<p><a href="http://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/" rel="nofollow">http://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/</a>
or
<a href="http://lab.hakim.se/ladda/" rel="nofollow">http://lab.hakim.se/ladda/</a></p>

<p>Any ideas or help would be appreciated.</p>

<form><ajax>
Front-end form submission feedback on buttons
# Front-end form submission feedback on buttons

(Asked by: username_0 on 2015-11-30)

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.

**Tags:** form, ajax

---

## 1 answers

### Answer by username_1 on 2015-12-01. Score: 3

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!

> **Comments:**
> **username_0**: Thanks Alec, partially a bit beyond me but I'll give it a go!  

---

