locked
Set button as default RRS feed

  • Question

  • User1510859543 posted

    I can set a page button to be the default button (e.g. when enter key pressed) in code-behind.  Is it possible to do the same in javascript?  I want to use OnClientClick to do this without need for a postback.  Thanks.

    Thursday, August 4, 2016 7:57 PM

Answers

  • User61956409 posted

    Hi dlchase,

    The ASP.NET Panel control will be rendered as <div> in browser, and it enable us specify DefaultButton property to indicate which button gets clicked when the Panel control has focus and the user presses the ENTER key. You could refer to the following sample.

    <asp:Panel ID="div1" runat="server" Width="200px" Height="100px" BorderColor="Red" BorderWidth="1px" DefaultButton="pbtn1">
        i'm div1
    </asp:Panel>
    <br />
    <asp:Button ID="pbtn1" runat="server" Text="Button" OnClick="pbtn1_Click" />
    <asp:Panel ID="div2" runat="server" Width="200px" Height="100px" BorderColor="Red" BorderWidth="1px" DefaultButton="pbtn2">
        i'm div2
    </asp:Panel>
    <br />
    <asp:Button ID="pbtn2" runat="server" Text="Button" OnClick="pbtn2_Click" />
    
    <br />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    
    protected void pbtn1_Click(object sender, EventArgs e)
    {
        Label1.Text = "pbtn1";
    }
    
    protected void pbtn2_Click(object sender, EventArgs e)
    {
        Label1.Text = "pbtn2";
    }
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 5, 2016 2:18 AM

All replies

  • User2103319870 posted

      Is it possible to do the same in javascript?  I

    You can use Jquery to set the default button like below

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script>
        $(document).ready(function () {
            //Capture the enter button click on form
            $(document).bind("keydown", function (event) {
                //Get the key code
                var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
                //check if the click event is enter button click
                if (keycode == 13) { // keycode for enter key
                    //Trigger the button click
                    document.getElementById('Button1').click();
                }
            });
        });
    </script>

    HTML

     <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

    C#:

     protected void Button1_Click(object sender, EventArgs e)
            {
            }

    Thursday, August 4, 2016 8:38 PM
  • User2103319870 posted

    I want to use OnClientClick to do this without need for a postback. 

    If you want to set the default button with out using code behind, Then you just need to set the default button property of form in html mark up itself like below

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server" defaultbutton="Button1">
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </form>
    </body>
    </html>

    Thursday, August 4, 2016 8:41 PM
  • User1510859543 posted

    This solution will run every time the user hits the enter key.  I only want the default to be set when I am showing a specific DIV element that becomes visible when a user clicks the first button.  I have 2 different image buttons on the page that I need to set a default button when that DIV shows.  For example, if DIV id=div1 is showing then make Button1 the default and if DIV id=div2 is showing make Button2 the default.  Both need to be done in js/jquery without postback. Also, the buttons are ImageButtons if that makes any difference.

    Thursday, August 4, 2016 8:52 PM
  • User61956409 posted

    Hi dlchase,

    The ASP.NET Panel control will be rendered as <div> in browser, and it enable us specify DefaultButton property to indicate which button gets clicked when the Panel control has focus and the user presses the ENTER key. You could refer to the following sample.

    <asp:Panel ID="div1" runat="server" Width="200px" Height="100px" BorderColor="Red" BorderWidth="1px" DefaultButton="pbtn1">
        i'm div1
    </asp:Panel>
    <br />
    <asp:Button ID="pbtn1" runat="server" Text="Button" OnClick="pbtn1_Click" />
    <asp:Panel ID="div2" runat="server" Width="200px" Height="100px" BorderColor="Red" BorderWidth="1px" DefaultButton="pbtn2">
        i'm div2
    </asp:Panel>
    <br />
    <asp:Button ID="pbtn2" runat="server" Text="Button" OnClick="pbtn2_Click" />
    
    <br />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    
    protected void pbtn1_Click(object sender, EventArgs e)
    {
        Label1.Text = "pbtn1";
    }
    
    protected void pbtn2_Click(object sender, EventArgs e)
    {
        Label1.Text = "pbtn2";
    }
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 5, 2016 2:18 AM