Disabling a button when clicked

Question

I have a form which users can use to send an ecard.

This is an example URL: http://jimpix.co.uk/ecards/normal-ecard.asp?id=5480

At the bottom of the form there is this HTML (covering the send buttons):

<div class="col-lg-6">
  <legend>Next bit...</legend>
  <button type="button" id="BtnPrev" class="btn btn-info" onclick="return valFormPrev(theForm,'preview');"/>Preview Your Ecard</button>
  <button type="button" id="BtnGo" class="btn btn-success" class="preview" onclick="return valFormGo(theForm,'process');"/>Send Now</button>
  <p class="top10"><a href="#BtnPrev" onclick="return ResetBtns();">Reset buttons so you can use them again</a></p>
</div>

Because the page can take a while to process when users click on a button, I added this to the end of the JS used to validate the forms (located at http://jimpix.co.uk/dist/js/ecard.js )

Say a user clicks the "Send Now" button, it calls the "valFormGo" function.

That contains this code near the end:

document.getElementById("BtnGo").disabled = 'true';

That disables the button if the user click on it, so they can't click it many times and send the same ecard many times.

That seems to work okay, but if, once they have sent the ecard, they press the back button to eg send again to someone else, the button remains disabled, even if the page is refreshed.

I had to set up a function to allow them to make the buttons active again via:

function ResetBtns()
{
  document.getElementById('BtnPrev').removeAttribute("disabled");
  document.getElementById('BtnGo').removeAttribute("disabled");
}

That works, but it is clunky.

I just wondered if anyone knows of a more elegant solution I might be able to follow to disable the button when pressed, or maybe have the button change the text to say "processing..." when it is waiting for the next page to process the data.

Basically I have made a hack job of this and it would be much appreciated if anyone might be able to advise please on possible alternatives.

Any advice would be much appreciated.

Thanks

Answer 1

Try this:

//to disable buttons
$('BtnPrev').click(function(){

    this.prop('disabled', true);

});

$('BtnGo').click(function(){

    this.prop('disabled', true);

});

//to enable buttons
function ResetBtns() {    

    $('BtnPrev').prop('disabled', false);
    $('BtnGo').prop('disabled', false);

}

Answer 2

Why not process the ecard on the same page using ajax method, then on success you can un-disable the submit button.

Can't really offer any code at this time as not sure of your current flow / method being used.

Answer 3

Just make the function run like this:

<button onclick="myfunction()" id="activate"></button>
<script>
function myfunction(){if(unrun==true){unrun=false;
document.getElementById("activate").innerHTML="Processing...."; 
code goes here;}}
</script>