<button> tags in IE 6 issue

Recently, I encountered a problem with IE6. As we know, IE6 is the worst browsers ever. However, there are still lots of users using it. The problem was using <button> on IE6.

The first issue was if you have a button tag like this:

<button name="myBtn" value="123">Remove Item</button>

In FireFox, you'll get myBtn=123 after your form submitted. However, in IE6, you'll receive myBtn=Remove Item

The other issue was if you have two <button> in the same form, they will all be submitted. My case was trying to create a service agreement page with two buttons. One is ACCEPT button and the other is DECLINE. However, in IE6, if I use <button> tags, I will alway get both of them and don't know how to handle it.

One way to fix the problem is using <input> tags instead of <button>. However, there are a lot of benefits using <button>, such as you can have content in <button> tags.

My way to handle the issue was making one disabled when the other one clicked. Therefore I alway get only one button value/content.

<button name="accept" value="accept" onClick="disableBtnDecline();">accept</button>
<button name="declinie" value="decline" onClick="disableBtnAccept();">decline</button>  

Timed Redirection

I was trying to create a timed redirection for a website. The requirement was after users register site successfully, display the success page and redirect to welcome page after 5 seconds. Also, we wanted to display countdown time on the screen.

There are many ways to redirect a page. You can use HTML meta tag to refresh a page like this:

< meta http-equiv="refresh" content="5;url=http://example.com/" / >

However, it is discouraged and deprecated by the W3C, since unexpected refresh can disorient users. Meta refresh also impairs the web browser's "back" button in some browsers (including Internet Explorer 6 and before), although most modern browsers compensate for this (Mozilla Firefox, Opera, Internet Explorer 7). -- from Wikipedia (Meta_refresh)

Also, since I need to display the countdown time, I decided to use Javascript. Some people on the Internet suggest using HTML input tags to display the countdown time. Personally, I don't like add a tag just for displaying something dynamic on the screen. Therefore, I use JavaScript setInterval method to handle it.

Here is the JavaScript code:

function timedRedirect(time, page){
  var timeTag = dojo.byId('redirectTime');
  if(timeTag){
    setInterval(function(){
      time--;
      timeTag.innerHTML = time;
      if(time == 0){
        window.location = page;
      } 
    }, 1000);
    timeTag.innerHTML = time;
   }
}

In your HTML file:

  
You will be redirected to the Welcome page inseconds or click here to go there now.
  

Also, I have a css style like this:

.redirectTime{
 margin-left: 5px;
 margin-right: 5px;
 color: #cc0000;
}

a.redirectLink, a.redirectLink:link, a.redirectLink:visited, a.redirectLink:active{
 color: #cc0000;
}

a.redirectLink:hover{
 color: #cc0000;
 text-decoration: underline;
}