0

I have built a form. When that form is submitted, the fields filled by users are send by the POST method to another page.
I use a spinner to display "Loading..." when the submit button is clicked. But the spinner never stops.
I'd like the spinner to be stopped when the form is submitted (I mean without giving a defined Timeout). How could I do ?

Here is the form part :

<form action = "getValues.php" method="post">

    <div id = "field1" class="form-row"> <div class="form-group col-md-4">
    <label for="exampleInputPassword1">Field 1</label> 
    <input type="text" class="form-control" id="field1-send" name="field1-send">         
    </div>

    <button name="submit" type="submit" id="runSpinner"  class="btn btn-primary"><i class="fas fa-check"></i> OK</button>

</form>

Here is the JS part :

$(document).ready(function() {
    $("#runSpinner").click(function() {
        // disable button
        $(this).prop("disabled", true);
        // add spinner to button
        $(this).html(
        '<span class="spinner-border text-warning" role="status" aria-hidden="true"></span> Traitement...'
         );
      });
 });
vijayP
  • 11,432
  • 5
  • 25
  • 40
Julien
  • 45
  • 1
  • 3
  • 15
  • 3
    Prevent the form from submitting and send it manually with ajax. After the request is finished, stop the animation. Simple as that. Do some googling and you will find everythig you need – Aaron Apr 30 '20 at 14:20
  • If it is the page is getting refreshed on submit (Since it it is not ajax), the HTML loading.. should not be visible. – Anand G Apr 30 '20 at 14:29
  • @Aaron Thanks, I tried to submit my form with Ajax and it works thank you. The only thing is that the form page does not redirect to the post page (getValues.php in my example). Do you know how I could send the form with Ajax and have that redirection effective ? – Julien Apr 30 '20 at 14:44
  • Check out this answer:https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage – Aaron Apr 30 '20 at 14:48
  • Thanks for the link. I know how to redirect in Javascript but here it's a little bit different because the page to go must contain all the post values of the form. If I do a simple window.location.href, it works yes but I'm redirected on the getValues.php page without all the Post values from the form. – Julien Apr 30 '20 at 14:58
  • tried to use the success function with `success: function(data){window.location.href = 'getValues.php';}` but it redirects to the php Post page without the post values. – Julien Apr 30 '20 at 16:56

0 Answers0