Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

Changing which form submit button responds to the enter key

$
0
0

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.


Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>