2012-01-11 99 views
0

我想要禁用點擊幾秒鐘的按鈕,並在此期間顯示圖像,然後隱藏圖像並再次顯示按鈕。隱藏按鈕幾秒鐘onclick

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. 這JS代碼不執行Ò n點擊,但調用此按鈕的動作後(使用JSF 2)

  2. 當該代碼被調用時,該按鈕被隱藏和顯示的圖像,但從來沒有得到的再次隱藏,按鈕是沒有得到再次顯示。

請指教如何解決這個問題。

+0

提交將刷新頁面或提交表單 - 您需要將其更改爲按鈕或將窗體定位到另一個框架/ iframe /窗口或使用ajax – mplungjan 2012-01-11 10:01:01

回答

4

你實際上隱藏了按鈕,並在5秒後顯示圖像,然後不改回它。試試這個:

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

} 
0

您添加的代碼僅用於隱藏按鈕並顯示圖像。該功能應該是這樣的:

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

} 
1

也許你的意思是

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

        },5000); 
0

小的調整:

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