How to disable Finish button after first click

Question

I've tried the various methods that normally work, but it seems SmartWizard is preventing these methods from working.

I need to disable the Finish button and change the text after it is clicked to prevent multiple submissions. No matter where I place the code, the screen does not change, the value of the button does not change, and the button does not disable.

I tried the typical click function...

$(".actionBar .buttonFinish").click(function(){
    $(".actionBar .buttonFinish").addClass("buttonDisabled");
    $(".actionBar .buttonFinish").text("Sending...");
});

I also tried using this as part of the final step validation and in the FinishCallback right before the ajax call. Nothing changes until AFTER the ajax call is completed and the ajax success runs.

UPDATE

Ok, this is for sure a timing issue. If I cause the ajax call to fail, the button disables and the text changes. I need to make sure these two things occur before moving on to the ajax call. So far, I tried this but it did not work:

$(".actionBar .buttonFinish").addClass("buttonDisabled").text("Sending...").ajax({

Answer 1

$(".actionBar .buttonFinish").click(function(){
   $(".actionBar .buttonFinish").attr('disabled', 'disabled');
   $(".actionBar .buttonFinish").text("Sending...");
});

Answer 2

you can add this at the end of the 'onclick' event to disable the button

$(this).prop( "disabled", true );

OR

$(this).attr("disabled", 'disabled');

you need to use the function 'prop' or 'attr' depending on the jquery version

Answer 3

Try this.

$(document).ready(function(){
  $(function(){
    $(".buttonFinish").on("click", function(){
      $(this).prop('disabled', true);
      $(this).val("Sending...");
    });
  });
});

input{
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div>
  <form>
    <input type="text">
    <input type="text">
    <input class="buttonFinish" type="submit">
  </form>
</div>

UPDATE

Let me see if I understood you, you want to disable the button and the text before ajax call? You've tried with beforeSend?

$(document).ready(function(){
  $(function(){
    $("form").submit(function(e){
      e.preventDefault();
      
      $.ajax({
        beforeSend: function(){
          $(".buttonFinish").prop('disabled', true);
          $(".buttonFinish").val("Sending...");
        },
        complete: function(){
          // remove disabled and change the text
        },
      });
    });
  });
});

input{
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div>
  <form>
    <input type="text">
    <input type="text">
    <input class="buttonFinish" type="submit">
  </form>
</div>

Answer 4

Since your .buttonFinish is a link, not actually a button, you can't disable it with .prop('disabled', true) — you may want to use a "blocking pane" instead.

Put a div at the very end of your page, I prefer just before the </body> tag, that contains nothing and is unseen, off the page and with no height and width.

    <div id="blocker"></div>
</body>

When the "button" is clicked then add a class on it that will make it show, using the full height/width of the page and with a high z-index so it is "in front" of everything else; it will get all the clicks which won't pass through to the controls underneath it as a lower z-index.
Your click handler would include $('blocker').addClass('blocking'); giving the resulting DOM ...

    <div id="blocker" class="blocking"></div>
</body>

Use CSS to style #blocker so it is unseen, then style #blocker.blocking so it blocks the rest of the page.

$('a.finished').click(function(e) {
  e.preventDefault();
  $('#blocker').addClass('blocking');
  // when ajax call finishes,
  // use $('#blocker').removeClass('blocking');
});

#blocker {
  position: fixed;
  top: -10px;
  left: -10px;
  height: 0;
  width: 0;
  z-index: -20;
  background-color: white;
}

#blocker.blocking {
  height: auto;
  width: auto;
  bottom: -10px;
  right: -10px;
  opacity: 0.6;
  z-index: 9000;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<div class="stuff">
  <p>This is stuff</p>
  <p>This is other stuff</p>
  <p>A <a href="#" class="finished">link</a> is in here.</p>
</div>
<div id="blocker"></div>

Answer 5

Try this

<input type='button' id='btn' onclick='click_me()' value='click'>

  var disable = false;
  function click_me()
  {
    if(disable = 'false') {
      $(".actionBar .buttonFinish").addClass("buttonDisabled");
      $(".actionBar .buttonFinish").text("Sending...");
      disable = true;
    }
  }