Click here to Skip to main content
11,567,325 members (47,299 online)
Click here to Skip to main content

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

, 3 Oct 2007 CPOL 51K 525 13
Rate this:
Please Sign up or sign in to vote.
JavaScript for submitting/closing modal popup on Enter/Esc keypress.

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".

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nital Soni
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
Questionhow to prevent popup closing when press enter? Pin
raj4028-Jan-15 5:10
memberraj4028-Jan-15 5:10 
GeneralThere is a small bug in this example which is succesfully fixed! Pin
FireBlonde28-Dec-08 7:01
memberFireBlonde28-Dec-08 7:01 
GeneralWorking Modal WIndow with PostBack Pin
mayurmv4-Sep-08 4:58
membermayurmv4-Sep-08 4:58 
GeneralBrilliant! Pin
Jcmorin12-Nov-07 3:10
memberJcmorin12-Nov-07 3:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150624.2 | Last Updated 4 Oct 2007
Article Copyright 2007 by Nital Soni
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid