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" />

Jack Bashford · Accepted Answer · 2019-04-01T06:06:03.047

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" />

Explanation is needed to understand why you did what you did (and I didn't downvote). — Asons, Apr 01 '19 at 06:03
Awesome thanks man. I swear I tried that approach before I posted this question... must have forgotten a semi colon or something lol, rookie mistake. I'll accept your answer in 3 minutes when stackoverflow allows me. Cheers! — Robert, Apr 01 '19 at 06:04

Haider Ali · Answer 2 · 2019-04-01T07:11:59.360

2

 $(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

edited Apr 01 '19 at 07:11

answered Apr 01 '19 at 06:56

Haider Ali

21
3

it prevent multiple click (submit) until first click event completed by... disabling button by default ,, – Haider Ali Apr 01 '19 at 07:09

score 2 · Answer 3 · answered Apr 01 '19 at 07:02

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.

answered Apr 01 '19 at 07:02

Anagha

136
3

score 1 · Answer 4 · edited Apr 01 '19 at 08:10

$(document).ready(function() {
    $(function() {
        $("#submit_btn").click(function() {
            $("#submit_btn").attr("disabled", "disabled");
            this.value = "Processing...";
            outerthis = this;
            setTimeout(function() {
                outerthis.value = "Submit";
                $("#submit_btn").removeAttr("disabled");
            }, 5000);
        });
    });
});

Shidersz · Answer 5 · 2019-04-01T18:50:02.083

Problem about the wrong usage of this keyword inside setTimeout() has already been explained. However, if you are able to use arrow function expressions (ES6 feature), that won't be a problem:

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

Using this feature, your code can be simplified a little as shown on next example:

$("#submit_btn").click(function()
{
    $(this).attr("disabled", "disabled").val("Processing...");

    setTimeout(
        () => $(this).val("Submit").removeAttr("disabled"),
        5000
    );
});

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

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

5 Answers5