在TextBoxFor Enter键按下期间会自动触发按钮单击事件

Question

The issue I am facing now is a button click event is automatically being fired when enter key is pressed in Html.TextBoxFor(). I am having a main view. In this view there are 3 buttons. On each of 2 button click a partial view is opened and during 3rd button click, a new view is opened. Please see the code below :

<script>
    $(document).ready(function () {
        SetUpDatePickers();
    });

    $('#button1').click(function (event) {
        $('#divdefinetraj').toggle();
        $('#button1').hide();
        $('#button2').hide();
        $('#button3').hide();
        event.preventDefault();
        GetTrajectories();
    });

    $('#button2').click(function (event) {
        $('#divRequestTT').toggle();
        $('#button1').hide();
        $('#button2').hide();
        $('#button3').hide();
        event.preventDefault();
    });

    $('#button3').click(function (event) {
        window.location.href = '/UserManagement/UsersList/';
        event.preventDefault();
    });    
</script>

I clicked button1 and the first partial view is opened :

The partial view has below code :

@Html.TextBoxFor(u => u.TrajName, new { @class = "txtboxclass", @id = "TrajName" })

My issue is when I press "Enter" key inside this text box, the code for button1 in main view is being executed :

$('#button1').click(function (event) {
    $('#divdefinetraj').toggle();
    $('#button1').hide();
    $('#button2').hide();
    $('#button3').hide();
    event.preventDefault();
    GetTrajectories();
}); 

This results in all the buttons being hidden and the view becomes useless unless user reloads the view forcefully.

I tried to handle the onchange() event of the textboxfor and redirected to below function, but it doesn't handle.

function EnterKeyFilter() {
    if (window.event.keyCode == 13) {
        event.returnValue = false;
        event.cancel = true;
    }
}

Even I tried the same function for div - click() .. It doesn't work. When I press the enter key the exact button1 click is being handled with this information event = j…y.Event {originalEvent: MouseEvent, type: "click", timeStamp: 7055.025000000001, jQuery110208686809991100928: true, toElement: button#button1 .

But I am not clicking it either. The partial view is not part of a form also and form submission is not the issue. I am new to ASP.NET MVC and confused with this strange behavior. Please help. Thanks in advance.

Answer 1

If you want to disable your press enter in your keyboard, try this:

$(function () {

//On your document ready function, add this:
      $('html').bind('keypress', function (e) {
          if (e.keyCode == 13) {
               return false;
            }
       });
}

Answer 2

Try to keep all three buttons in different form tags and made them submit button. So in this case, whenever you hit enter in a form input, respective button will be clicked. To prevent full page postback, use e.preventDefault() in button click event.

HTML:

<form id="frm1">
  -------------
  -------------
 <input id="btnSubmit" type="submit" value="submit" />
</form>

jQuery

$("#btnSubmit").click(function(e){
    e.preventDefault();
    -- rest of code
});