How to set default button in ASP.Net MVC

Question

This is my HTML code :

@using (Html.BeginForm("Index", "EmployeeList", FormMethod.Post, new {defaultbutton = "searchBtn" }))
            {
  @Html.TextBox("SearchString", ViewBag.SearchString as string, new { @id = "SearchString", @class = "form-control", placeholder = "Search Name" })

<button type="submit" name="MyButton" value="Export" class="btn btn-sm btn-danger">

<button type="submit" name="MyButton" value="Search" id="searchBtn" class="btn btn-sm btn-warning">
}

According to my page design I have to write "Export" button's html code before "Search" button.

While I press enter after filling search text 'export' button gets clicked, instead of that I need 'Search' button clicked.

Murad · Accepted Answer · 2017-03-16 08:44:48Z

13

You can handle kewdown event :

 <script type="text/javascript">
$(document).bind('keydown', function (e) {
    if (e.which === 13) { // return
        $('#searchBtn').trigger('click');
    }
});
  </script>

answered Mar 16, 2017 at 8:44

Murad

5434 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Over a year ago

You should also check the type of the target. Otherwise, a user could select a button input (either by downclicking a button and upclicking elsewhere or via tab), hit the enter key, and end up triggering the wrong button.

Brian · Accepted Answer · 2019-03-20 19:21:04Z

If you'd prefer to have a defaultbutton on any form, it's easy enough to add one. Below is a trivial example. Note that I required the defaultbutton to be a selector rather than an id, but it's easy enough to require prefix a hash if you prefer it to accept ids.

Also note that using the name "defaultbutton" runs the risk of conflicting with someone else's code (and the lack of a data- prefix means it might conflict with a possible "defaultbutton" feature added to a future html spec).

Below is a simple example. Changing closest to check for a defaultbutton attribute will allow a single form to have different default buttons for different components.

//Load this script on any pages that need to support default buttons.
$(document).bind('keydown', function(e) {
    if (e.which === 13) {
        var button = $(e.target);
        if (button.attr('type') != 'text') {
            return true;
        }
        var parentform = $(e.target).closest('form');
        var selector = parentform.attr('defaultbutton');
        var targetbutton = parentform.find(selector);
        if(targetbutton.length > 0) {
            targetbutton.trigger('click');
            return false;
        }
        return true;
    }
});

<!-- Example usage.  Just add a defaultbutton attribute to your form-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form defaultbutton='#candy'>
  <input type='text' id='text' placeholder='text' />          <br /><br />
  <input type='submit' value='toys'  id='toys' onclick='alert("Toys") ;return false;' />
  <br /><br />
  <input type='submit' value='candy' id='candy' onclick='alert("Candy");return false;' />
  <br /><br />
  <input type='submit' value='money' id='money' onclick='alert("Money");return false;' />
  <br /><br />
</form>

Collectives™ on Stack Overflow

How to set default button in ASP.Net MVC

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related