Confirm and disabled in IE7 (Asp.net) and compatible with standard browsers

There is too much effort in these two cases, so we will not test the reason for Asp.net or the reason for IE7 itself. The problem is as follows:

The reason is that when you click the submit button/link, there will be a large amount of data processing, which takes a long time. After the customer asks to click it, the button will be dimmed, at the same time, a translucent pop-up layer is used to display the scheme of loading animations, because it is too "Web2.0". Haha, for internal enterprise applications, sometimes some original methods are more acceptable. I think it is very simple, so I am doing it. At present, in an episode, it is necessary to confirm the submission of some key data, I don't know why I didn't find this problem before. This time, I encountered a lot of online searches,

The button itself has a click event, and then registers an onclientclick event to determine whether to submit data based on its return value, as shown in the following figure:

<asp:Button ID="Button1" runat=server Text="testbtn" CssClass="test" OnClick="testclick" OnClientClick="return confirm('sure?');" />

The test passed successfully. However, when I tested it in IE7, I found that I submitted it no matter whether I confirmed it or refused it. I had no choice but to Google. I didn't want to know the cause of the mess, the solution is as follows:

<asp:Button ID="Button1" runat=server Text="testbtn" CssClass="test" OnClick="testclick" OnClientClick="var r=false; if(confirm('sure?')) r=true; event.returnValue=r; return r;" />

In this example, I solve two problems by the way. 1. Use event. returnvalue = false; you can prevent IE7 from being submitted, but FF cannot prevent the submission. 2. You can solve this problem by adding return false.

Okay. This is the solution of confirm.

 

For the simplicity of the following example, we assume that there is no confirm and the problem of disabled is solved directly.

If a button is clicked, the event of disabling the button is triggered. In this way, the button cannot be clicked again, and the data is submitted normally.

We all use this button to trigger

<asp:Button ID="Button1" runat=server Text="testbtn" CssClass="test" OnClick="testclick" OnClientClick="dis(this);" />

Of course, to be more comprehensive, we sometimes use a tag a to simulate a button style for submission. I did this before, so we will test both effects at the same time.

asp:LinkButton ID="LinkButton1" runat="server" Text="test" CssClass="stepbtn" OnClick="btnNext_click" OnClientClick="dis(this);"></asp:LinkButton>

JS independent, and jquery:

function dis(o){$(o).attr("disabled",true);}

The results showed that:

Button: No data can be submitted in IE7 or ff. If it is disabled, the Form Control in the submit class will check its disabled Attribute before submission, if the attribute is already true during the check, the data will not be submitted;

Hyperlink: IE7 is pretty gray, and I found that I still cannot submit it! It can be seen that the logic similar to the form control is used. Of course, Firefox does not have the gray effect, but it can be submitted once. That is to say, this attribute has no meaning.

 

On this basis, modify JS:

In other words, I have set a global variable for the convenience of passing objects as parameters. please google the question about how to pass object parameters to setTimeout/setinterval. There are many workarounds.

VaR thisobj; function DIS (o) {thisobj = 0; setTimeout (function () {$ (thisobj ). ATTR ("disabled", true) ;}, 300); // latency, let the data be submitted first, then disable this element}

Result:

Button: the effect we want;

Hyperlink: IE7 passes smoothly, Firefox barely passes, but If you confirm with the confirm statement on this link, it will pop up every time you click it, although it has been verified, the data is submitted only once, so if most of your systems are already using links for submission, this effect will be achieved, check whether the disabled attribute of the element is 'true' before confirm. Note that it is not a Boolean value. Of course, if you define it as 'Disabled 'in JS ', that's fine. In essence, disabled is the attribute of a form element. Non-form elements are now present in a standard browser.

 

This is summarized after completion. The sample code is handwritten and has not been verified. If the copy is invalid in the past, let's take a look at the ideas.