Dgdrxrt

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

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

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.

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

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

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