javascript - Hide button for few seconds onclick - Stack Overflow

admin管理员组

文章数量:1312722

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.

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.

• javascript
• html

Share Improve this question Follow edited Jan 11, 2012 at 13:35 BalusC 1.1m376376 gold badges3.6k3.6k silver badges3.6k3.6k bronze badges asked Jan 11, 2012 at 9:50 Mahmoud SalehMahmoud Saleh 33.6k123123 gold badges350350 silver badges512512 bronze badges 1

• Submit will reload the page or submit the form - you need to change it to a button or target the form to another frame/iframe/window or use ajax – mplungjan Commented Jan 11, 2012 at 10:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

}

Perhaps you mean

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

                    },5000);

You added code only for hiding the button and displaying the image. The function should look like this:

function validate(){

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

  var hide_timeout = 5000; // delay 5 sec before hide button;
  var show_timeout = 10000; // delay 10 sec before show button;

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

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

}

Minor tweaks:

function validate() {
  var  myButton= document.getElementById('myButton');
  var  myImage= document.getElementById('myImage');

  myButton.style.visibility='hidden';
  myImage.style.display ='inline';

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

  return false;
}

本文标签： javascriptHide button for few seconds onclickStack Overflow