Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-01T14:20:32.177Z
Answers.Text: Thanks Alec, partially a bit beyond me but I'll give it a go!
Answers.UserDisplayName: richardpixel
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-01T11:38:06.633Z
Answers.LastActivityDate: 2015-12-01T11:38:06.633Z
Answers.LastEditDate: 2017-04-13T12:51:00.303Z
Answers.UserDisplayName: Alec Ritson
Body: <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>
  
Tags: <form><ajax>
Title: Front-end form submission feedback on buttons
ThreadText: # 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](https://craftcms.stackexchange.com/questions/3081/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 username_1, partially a bit beyond me but I'll give it a go!  
  
  ---
  
  