JavaScript for Submitting/Closing modal popup on Enter/Esc keypress

Download source code - 1.33 KB

Introduction

Here is a solution for how to submit / close an AjaxModalPopup box on Enter/Esc keypress. AjaxModalPopup is used frequently in a lot of web pages. Here is a solution which will make your web application feel like a Windows application. You can submit AjaxModalPopup on Enter key and close AjaxModalpopup on Esc key press.

Background

This article extends AJAX Control Toolkit 's ModalPopupExtender control.

Using the Code

Following is the JavaScript for extending the AJAX Control Toolkit 's ModalPopupExtender functionality.

<script language="javascript" type="text/javascript">
    function body_onkeydown() 
    {
        if(event.keyCode==13 || event.keyCode==27) 
        {
            var _defaultButtonName=getDefautButtonName( event.keyCode==13 ? 
                        "submitButton" : "cancelButton");
            var frm=document.forms[0];
            if(frm && document.all(_defaultButtonName))
            {
                document.all(_defaultButtonName).click();
            }
        }
    }
    
    function getDefautButtonName(className) 
    {
        var _defaultButtonName="";
        var children = document.getElementsByTagName("input");
        for (var i = 0; i < children.length; i++) 
        {
            var child = children[i];
            var btnAction = child.buttonAction;
            if(btnAction == className)
            {
                _defaultButtonName = child.id;
                break;
            }
        }
        return _defaultButtonName;
    }
</script>

<body onkeydown="body_onkeydown()">
    <form id="form1" runat="server">
    <div>
        <asp:Panel ID="pnlmain" runat="server">
            <table>
                <tr>
                    <td colspan="2">
                        Name : <asp:TextBox ID="txtUserNmae" 
                                  runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        Pwd : <asp:TextBox ID="txtPwd" 
                                  runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnSubmit" runat="server" 
                                 Text="Ok" buttonAction="submitButton"/>
                    </td>
                    <td>
                        <asp:Button ID="btnCancel" runat="server" 
                                 Text="Cancel" buttonAction="cancelButton"/>
                    </td>
                </tr>
            </table>
        </asp:Panel>
        
    </div>
    <div>
        <asp:Button ID="btnPopup" runat="server" Text="Popup" />
        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </cc1:ToolkitScriptManager>
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" 
             runat="server" CancelControlID="btnCancel" 
             OkControlID="btnSubmit" PopupControlID="pnlmain" 
             TargetControlID="btnPopup">
        </cc1:ModalPopupExtender>
    </div>
    </form>
</body>

In the OK, Cancel buttons of the modal popup control, a custom property is added called buttonAction where we set the OK button's buttonAction="submitButton" and the Cancel button's buttonAction="cancelButton".