Question

i want to disable button on click for few seconds, and show an image during this time, then hide the image and show the button again.

HTML:

<input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton">  
<img style="display: none;" src="/images/loading.gif" id="myImage">

JavaScript:

function validate(){

var  myButton= document.getElementById('myButton');
var  myImage= document.getElementById('myImage');

                        setTimeout (function(){
                          myButton.style.display ='none';
                        },5000);
                      setTimeout (function(){
                          myImage.style.display ='inline';
                        },5000);
}

ISSUE:

1. This js code is not executed onclick, but after the action of this button is invoked (using JSF 2)

2. When this code is invoked, the button gets hidden and the image appears, but never get’s hidden again, and the button is not getting displayed again.

please advise how to fix that.

Answer 1

You’re actually hiding the button and showing the image after 5 seconds, then not changing it back. Try this:

function validate(){

    var myButton= document.getElementById('myButton');
    var myImage= document.getElementById('myImage');

    myButton.style.display ='none';
    myImage.style.display ='inline';

    setTimeout (function(){
        myButton.style.display ='inline';
        myImage.style.display ='none';
    },5000);

}