Input field as part of a <form> breaks my ASP.NET application

Question

For my ASP.NET web app I have a very simple login page that has an input field for the e-mail address and the password. Clicking the 'Login' button calls the 'login_user()' function in the 'app.js' file.

@section Scripts {
  @Scripts.Render("~/bundles/app")
 }

 <div class="row">
     <h3>Log In</h3>
        <label>User Name</label>
        <input class="form-control" type="text" autocomplete="on" id="loginEmail" />

        <label>Password</label>
        <input class="form-control" type="password" id="loginPassword" />

       <button onclick="login_user()" class="btn btn-default">Log In</button>
 </div>

The login_user() function :

function login_user() {
    var UserName = $('#loginEmail').val();
    var PassWord= $('#loginPassword').val();

    var loginData = {
        grant_type: 'password',
        username: UserName,
        password: PassWord
    };

    var TokenEndPoint = baseUrl.concat('Token');
    $.post(TokenEndPoint , loginData,
    function (data) {
        // Cache the access token in session storage.
        sessionStorage.setItem(tokenKey, data.access_token);
        localStorage.setItem(userKey, data.userName);
        // Now we have the token we can setup the header for each subsequent call
        $.ajaxSetup({
            headers: {
                'Authorization': 'Bearer ' + data.access_token
            }
        });
    }).fail(showFailToLogin);

}

Works fine, the only drawback is that the browser will not remember the user name and password. I thought ' autocomplete="on" ' would take care of that, but that does not work. A little research shows that this will only work if the input fields are part of a form.
But if I add the <form>..</form> tags around the inputs, my app no longer works. When I click the 'Login' button it no longer calls the login_user() function, but sends the form data to the ASP.NET server. And since this is not set up to process this, it just returns the empty login page and you're stuck in an endless loop.
I suppose it has to do with the default 'submit' action of the form control, but I cannot find out how to stop this.

Answer 1

Question seems like you are not overriding any default post method of html form tag. It just submits form but not to desired method you want. You can read this below link to understand the same follow this link for FORM METHODS

Answer 2

The solution is to mark the buttons in the form explicitly as "button"
So this works as expected:

<button type="button" onclick="login_user()" >Log In</button>

According to the specification, the default type of a button is "submit"
See: https://www.w3.org/wiki/HTML/Elements/button
(thank you Dean.DePue for adding this to the comments)