return FALSE; $r = well_tag_thread__update(array('id' => $id), $update); return $r; } function well_tag_thread_find($tagid, $page, $pagesize) { $arr = well_tag_thread__find(array('tagid' => $tagid), array('id' => -1), $page, $pagesize); return $arr; } function well_tag_thread_find_by_tid($tid, $page, $pagesize) { $arr = well_tag_thread__find(array('tid' => $tid), array(), $page, $pagesize); return $arr; } ?>javascript - Hide button for few seconds onclick - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Hide button for few seconds onclick - Stack Overflow

    javascript - Hide button for few seconds onclick - Stack Overflow

    programmeradmin1浏览0评论

    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 edited Jan 11, 2012 at 13:35 BalusC 1.1m376 gold badges3.6k silver badges3.6k bronze badges asked Jan 11, 2012 at 9:50 Mahmoud SalehMahmoud Saleh 33.6k123 gold badges350 silver badges512 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

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

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论