Set button unavailable to avoid repeated submission, and button unavailable to submit again

Set button unavailable to avoid repeated submission, and button unavailable to submit again

The setting button is unavailable to avoid repeated submission.

Prepared by: CC Dad

 

 

Today, I would like to share with you how to handle repeated user submissions in projects. To prevent this situation, the most common method is to set the button as unavailable after the user clicks the button. I have encountered many different situations in actual development. I will make a summary here for your reference. If you are interested, you can discuss and learn it together. Otherwise, you can skip it.

 

Since web development started at the beginning, html controls are often used, so processing is quite simple.

For example, in a previously developed reimbursement system, when submitting documents for approval, the bug of repeat the next process may often occur.

Aspx front-end
<Td align = "left" colspan = "7">
<Button class = "button" id = "btnSubmit" onmouseover = "this. style. backgroundColor = '# ffff '"
Onfocus = "blur ();" onclick = "btnSubmit2_onclick ();" onmouseout = "this. style. backgroundColor = '# eeeeee' "type =" button "runat =" server "> </button>
</Td>

Function btnSubmit2_onclick ()
{
Document. getElementById ("btnSubmit"). disabled = true; // disable
}
C #
This. btnSubmit. ServerClick + = new System. EventHandler (this. btnSubmit_ServerClick );

Today, webcontrol is used in another project, which I wanted to handle in this way,

<Asp: Button ID = "btnSubmit" runat = "server" OnClientClick = "btnSubmit2_onclick ();" OnClick = "btnSubmit_Click"> </asp: Button>

 

 

However, it is found that after the client uses js to process the event as unavailable, the button is unavailable, but the button event will not be executed. What's the problem?

 

 

If you encounter any problems, you must understand the causes. After querying the information on the Internet, we found that:

 

The server event of the button is actually implemented by the. net Framework using the client event onclick of the button. Therefore, resetting the onclick attribute on the server will overwrite the process of the Framework processing server events.
The client script has been provided above. You can add btnSubmit2_onclick () to the button,

Note: Only availableHtmlInputButtonControl, not availableWebControlsOfButton.

 

The following is an article summarized by other netizens, which is well-written and is excerpted for your reference. I used the second method to solve my problem.

 

Join the technology sharing Group

 

The original Article address is as follows:

Http://blog.itpub.net/28699126/viewspace-775581/

The first case is a non-submit button.

In this case, you only need to add events on the client and set the button to unavailable. See the following code:
ASP. NET-Code:
<Form. id = "form1" runat = "server"> <asp: Label ID = "lbl" runat = "server"> </asp: Label> <asp: button ID = "btn" runat = "server" Text = "Test" nClick = "btn_Click" nClientClick = "this. disabled = true "UseSubmitBehavior =" false "/> </form>

C #-Code:
Protected void btn_Click (object sender, EventArgs e) {System. Threading. Thread. Sleep (1000); lbl. Text = DateTime. Now. ToString ();}

The second case is the button of the submit type.

In this case, the first method does not work, and the button cannot be submitted after it is set to DISABLED. We can modify the code as appropriate:

ASP. NET-Code:

<Form. id = "form1" runat = "server"> <asp: Label ID = "lbl" runat = "server"> </asp: Label> <asp: button ID = "btn" runat = "server" Text = "Test" nClick = "btn_Click"/> </form>

C #-Code:
Protected void Page_Load (object sender, EventArgs e) {if (! Page. IsPostBack) {btn. OnClientClick = "this. disabled = true;" + GetPostBackEventReference (btn );}}

Different from the first method, we add a client event to the button in Page_Load and append GetPostBackEventReference. But there is still a trap in this case. After the first request is sent back, clicking the button will fail, so we need to remove if (! Page. IsPostBack), that is, the client events must be repeatedly bound to each sending request.

The third case is similar to the first case, but an UpdatePanel is added.
ASP. NET-Code:
<Asp: UpdatePanel ID = "up1" runat = "server"> <ContentTemplate> <asp: Label ID = "lbl" runat = "server"> </asp: label> <asp: Button ID = "btn" runat = "server" Text = "Test" nClick = "btn_Click" nClientClick = "this. disabled = true; "UseSubmitBehavior =" false "/> </ContentTemplate> </asp: UpdatePanel>

 

The fourth case is in UpdatePanel, but like the second case, it is also a button of the Submit type.

Different from the second case, we only need to bind the client event when loading for the first time, that is, in if (! Page. IsPostBack.

The fifth and fourth types are different. The button is outside the UpdatePanel and the trigger is used to refresh the specified UpdatePanel.

If you follow the fourth method, you can click the button and set it to unavailable, but the button will not be available after sending back:

ASP. NET-Code:

<Asp: UpdatePanel ID = "up1" runat = "server"> <ContentTemplate> <asp: Label ID = "lbl" runat = "server"> </asp: label> </ContentTemplate> <Triggers> <asp: AsyncPostBackTrigger ControlID = "btn" EventName = "Click"/> </Triggers> </asp: UpdatePanel> <asp: button ID = "btn" runat = "server" Text = "Test" nClick = "btn_Click"/>

C #-Code:
Protected void Page_Load (object sender, EventArgs e) {if (! Page. isPostBack) {btn. onClientClick = "this. disabled = true; "+ GetPostBackEventReference (btn) ;}} protected void btn_Click (object sender, EventArgs e) {System. threading. thread. sleep (1000); lbl. text = DateTime. now. toString ();}

To solve this problem, the simplest way is to put the button in another UpdatePanel so that the original state can be restored every time. In addition, you can explicitly set the button to available after submission based on the page cycle of Atlas.

 

 

Note: All the default buttons in Asp. Net are of the Submit type. If there is a button type, you need to set UseSubmitBehavior = "false ";

 

Submit is a Button used to Submit a form. There are two main differences between Submit and Button:
Type = button is simply a button Function
Type = submit is the sending form
(1) Submit uses form submission (form. submit () as the default event after its onclick. This is not the case for a Button.
(2) When a form is submitted, all html input elements (including the input tag, button tag, and select tag) with the name attribute will be submitted as key-value pairs, except the Submit object. The Submit object is submitted as a key-Value Pair only after being clicked.
However, people engaged in web ui should note that using submit to improve the ease of use of pages:
After submit is used, the page supports the enter key operation. Many WEB software designers may not notice that the submit is unified.
After a button is used, the page usually does not support the enter key. Therefore, the enter key must be supported and a submit must be set. The default enter key is used to operate the first submit on the page.
　　
After onClick is executed, go to action. OnClick is not required for automatic submission. So onclick can be avoided here.
After onClick is executed, the jump file is controlled in the js file. OnClick is required for submission.
For example:
Onclick = "form1.action = 'a. jsp '; form1.submit ();" This enables the submit function.
To put it bluntly, the submit will have a jump, the page will be refreshed, and the button will not be refreshed, It is a button; you can use <button type = "submit/button/reset"> </button> to generate buttons, which are more flexible and better style control. (If the client disables JS, when Submit is used, the front-end authentication becomes invalid and the backend may obtain invalid data)