locked
Changing which form submit button responds to the enter key RRS feed

  • Question

  • User908326479 posted

    Okay, so I have a Razor page CSHTML file, with a model backend for the page in C#. I have a form that for our purposes, had to have a second submit button. However, this second button is placed before the first, and pressing the enter key now moves forward with this new button rather than the old button I intended. Here's roughly the CSHTML I have for the form, where the button for "MoreInfo" is the new button I've added, and "Next" is the button I want to correspond to the enter key:

    <form method="post" asp-route-returnUrl="@Model.ReturnUrl">
        <div class="form-group">
            <label asp-for="Input.Email">Email</label>
            <input asp-for="Input.Email" class="form-control" autofocus />
        </div>
        <div class="form-group">
            <button asp-page-handler="MoreInfo" class="btn-link">More Info</button>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary pull-right text-uppercase" name="button" value="next">NEXT</button>
        </div>
    </form>

    I've tried it where I use the attribute type="button", and while that makes the enter key work as intended again, the button no longer does anything, and it doesn't make any request. This is the corresponding C# function I have when the user presses this new button:

    public IActionResult OnPostMoreInfo(string returnUrl = null)
    {
                
        ReturnUrl = returnUrl;
        Username = Input.Email;
    
        return RedirectToPage("./MoreInfo", new { returnUrl = ReturnUrl });
    }

    And another thing I've thought of is to detect if the user triggered this function with the enter key, and then direct them appropriately. But I'm not sure I understand how to detect key presses in this context.

    Any help is greatly appreciated.

    Thursday, August 8, 2019 8:23 PM

All replies

  • User288213138 posted

    Hi Armand_Z,

    According to your description, I couldn’t understand your requirement clearly. 

    Do you mean you want to set the default button when Pressed the enter key?

    If this is your requirement, I suggest you could try to set it as below codes: 

    <form id="form1" runat="server" defaultbutton="btnSubmit">
            <div>
                <asp:TextBox runat="server" ID="txtTest"></asp:TextBox>
                <asp:Button ID="btnSubmit" Text="Click" runat="server" />
            </div>
        </form>

    More details about how to use Html Form. Default Button Property, you could refer to this link:

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.htmlcontrols.htmlform.defaultbutton?redirectedfrom=MSDN&view=netframework-4.8#System_Web_UI_HtmlControls_HtmlForm_DefaultButton

    If I misunderstand your requirement, please post more details information about your requirement.

    Best regards,

    sam

    Friday, August 9, 2019 10:01 AM
  • User908326479 posted

    The requirement is that I have a form with two submit buttons contained in the form. Pressing the 'enter' key after you've typed input is corresponding to the wrong button. I'm not sure how to change the implicit submission that happens where the page is just sending the input to the first post request it finds.

    Friday, August 9, 2019 1:42 PM
  • User-474980206 posted
    The suggested answer is for webforms, which rendered some JavaScript to implement the feature. You can google for solutions, or see this thread

    https://stackoverflow.com/questions/1963245/multiple-submit-buttons-on-html-form-designate-one-button-as-default
    Friday, August 9, 2019 2:43 PM
  • User711641945 posted

    Hi Armand_Z,

    You need to change the button to input and here is a working demo as below:

    <div class="form-group">
         <input type="submit" asp-page-handler="MoreInfo" class="btn-link" value="more info"/>
    </div>
    <div class="form-group">
         <input type="submit" class="btn btn-primary pull-right text-uppercase" name="button" value="next"/>
         </div>
    @section Scripts {    
    <script>
        $(function(){
        $('input').keydown(function(e){
            if (e.keyCode == 13) {
                $("input[value='next']").focus().click();
                return false;
            }
        });
    });
    </script>
    }

    Best Regards,

    Rena

    Tuesday, August 13, 2019 3:21 AM