Button value to be changed back to original value on timeout (form double submit)

Question

I am trying to fix a form double submit by disabling the submit button temporarily and changing the submit button value to "processing..." so the user knows what is going on.

The disable works onClick and the "Submit" value changes to "processing...", however I am unable to change the value back to "Submit" after the setTimeout function has ended.

Does anyone know how I could go about doing this?

$(function() {
  $("#submit_btn").click(function() {
    $("#submit_btn").attr("disabled", "disabled");
    this.value = "Processing...";
    setTimeout(function() {
      this.value = "Submit"; //<- this line doesn't work
      $("#submit_btn").removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

Answer 1

Just change this to $("#submit_btn") and it works:

$(function() {
  $("#submit_btn").click(function() {
    $("#submit_btn").attr("disabled", "disabled");
    $("#submit_btn").val("Processing...");
    setTimeout(function() {
      $("#submit_btn").val("Submit");
      $("#submit_btn").removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

The issue was that your functions were interfering with this. You could have done self = this which would have had the same effect:

$(function() {
  $("#submit_btn").click(function() {
    var self = this;
    $(self).attr("disabled", "disabled");
    $(self).val("Processing...");
    setTimeout(function() {
      $(self).val("Submit");
      $(self).removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

Or you could have used event.target:

$(function() {
  $("#submit_btn").click(function(event) {
    $(event.target).attr("disabled", "disabled");
    $(event.target).val("Processing...");
    setTimeout(function() {
      $(event.target).val("Submit");
      $(event.target).removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

Answer 2

you just need to replace that line with the following code: $("#submit_btn").val("Submit");

you should use val function to change the text of the button.

Answer 3

 $(function() {
        $("#submit_btn").click(function(event) {
            $('button').button({ loadingText: 'Processing..' });
            $('#submit_btn').button('loading');
            //after submit stuff put below line to reset;
            $('#submit_btn').button('reset');
        });
    });

above code work best when you used html button in place of input type button Note-- To Show Spin Icon inside Button put font-awesome or any other icon in place of Processing.. or both in loadingText object