Disable Stripe Payment Submit Button with Font Awesome

Question

So my rails app accepts Stripe payments and the javascript for the payment action disables the Submit Payment button so a user can't hit the button multiple times. This js code:

$("#payment-form").submit(function(event) {

  // disable the submit button to prevent repeated clicks
  $('.submit-button').attr("disabled", "disabled");

What I'd like to do is add some text with a spinning wheel say for example something like this:

"<i class='fa fa-spinner fa-spin'></i> Payment Processing..."

In other parts of the code for other non-stripe related actions, I used something like this:

<%= f.button "Submit", class: "btn btn-primary btn-lg btn-block", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Signing up..."} %>

How do I add this Font Awesome functionality to my javascript here?

Answer 1

Why dont you just put it on a div... and you manipulate a class on that div to show or hide based on the req status? like:

$("#payment-form").submit(function(event) {
      $(".loader").show();