Js triggers the Onclick event application of the asp.net Button

After the introduction of event-driven in asp.net, it is easy to solve the problem that multiple buttons trigger different events on a single page, this avoids the trouble of requiring multiple forms in asp or controlling them through js scripts.

Asp.net brings convenience, but also brings about a problem. In actual applications, there are not many buttons on a page. After entering the content in the input box, you can press enter to submit the form. Because asp.net adopts the event-driven mode, The onclick event of the button is not triggered by pressing the carriage return by default. If you press enter, the form is not submitted. You can see through httpwath that the page form is actually submitted to the action page under the form, but the onclick event is not triggered.

In the asp.net event-driven mode, to trigger an event by pressing the carriage return, you must use the js script.
In asp.net's aspx page, form code:Copy codeThe Code is as follows: <form id = "form1" runat = "server">

However, you can see in the source code of the access page:Copy codeThe Code is as follows: <form name = "form1" method = "post" action = "Default. aspx" id = "form1">

By default, press enter in the input box. In fact, the form is submitted to the corresponding page of the form action, and no event is triggered.
Strange: When a web control is not used on An aspx page, press enter in the input box. By default, The onclick event of a button is not triggered; when a web control is used on the page, press enter in the input box. By default, The onclick event of the first button is triggered. [Here refers to the first button control in the page code, including the button control in the web Control]
The following describes how to trigger the onclick event of the button through js.
The default button control, the code in html is as follows:Copy codeThe Code is as follows: <input type = "submit" name = "Button1" value = "Button" id = "Button1"/>

In fact, The onclick event triggered by clicking this button calls a js script __dopostback (eventTarget, eventArgument)
The button control has a property: UseSubmitBehavior. The default value is true. When you change it to false, you can view the html source code to see the called js Script Function.Copy codeThe Code is as follows: <input type = "button" name = "Button1" value = "Button" onclick = "javascript :__ doPostBack ('button1 ','') "id =" Button1 "/>

Generated js script:Copy codeThe Code is as follows: <script type = "text/javascript">
// <! [CDATA [
Var theForm = document. forms ['form1'];
If (! TheForm ){
TheForm = document. form1; function _ doPostBack (eventTarget, eventArgument ){
If (! TheForm. onsubmit | (theForm. onsubmit ()! = False )){
TheForm. _ EVENTTARGET. value = eventTarget;
TheForm. _ EVENTARGUMENT. value = eventArgument;
TheForm. submit ();}
//]>
</Script>

After learning about this content, it is much easier to process the onclick event of the button triggered by pressing the Enter key in the input box. It is to intercept the action of pressing the Enter key in the input box, then the input box is OK when the function _ doPostBack is called through js:Copy codeThe Code is as follows: <input name = "TextBox1" type = "text" id = "TextBox1" onkeydown = "return KeyDown ('button1');"/>
<Input type = "submit" name = "Button1" value = "Button" id = "Button1"/>

Js scriptCopy codeThe Code is as follows: function KeyDown (btn ){
If (event. keyCode! = 13) // the key is not the enter key return; else // The key is the enter key try {
_ DoPostBack (btn ,'');
Return false; catch (e ){
Alert (e );
Return ;}
}

If the input box and button control are in the web Control, pay special attention to the following:
The html code generated by the button control in the control:Copy codeThe Code is as follows: <input type = "submit" name = "WUC11 $ Button2" value = "Button" id = "WUC11_Button2"/>

_ DoPostBack uses the name attribute of the input button. The button in the web Control adds the Control ID to the generated html code, so do not write an error in the passed button name.