Trigger log in on enter key

Question

Apologies in advance, I know this has been asked before (I did do the search).

The reason I'm posting is because I need help specifically to my situation as I can't work it out with other examples.

I'm trying to trigger logging in by pressing enter instead of clicking but have had no luck (been searching for hours and hours).

Here is my code behind: script>

    function loginBtn_Click() {
        doLogin();
    }

    function doLogin() {

        var args = {
            'UserId': document.getElementById('UserId').value,
            'ContactId': document.getElementById('ContactId').value,
            'Password': document.getElementById('Password').value


        };

        var callback = function (data) {
            document.location.href = 'matters.html';
        }

        DoAjaxCall('ws/general.asmx/Login', args, callback);
        }

</script>

Here is my HTML:

Please enter your login details

        <input id="UserId" type="text" placeholder="Username" /><br />
        <input id="ContactId" type="text" placeholder="Contact Reference" /><br />
        <input id="Password" type="password" placeholder="Password" /><br />
        <div id="loginBtn" class="btn" onclick="loginBtn_Click();" onkeypress="DoAjaxCall;">Log in</div>

        <br /><br />

        <p>Error logging in?</p>
        <p>Contact your liason at Buckles Solicitors LLP directly or alternatively call reception on <b>01733 888888</b>.</p>

    </div>

I would appreciate your help.

Thanks in advance, Rajan

Answer 1

Yep as Rick S mentioned, I just changed it to input type and submit, nothing else and it works perfectly. Added new code in css to reference the input type of submit and it works like a charm!

<div id="main"><br /><br />
        <h2 id="logoutStatus">Please enter your login details</h2>

        <input id="UserId" type="text" placeholder="Username" /><br />
        <input id="ContactId" type="text" placeholder="Contact Reference" /><br />
        <input id="Password" type="password" placeholder="Password" /><br />
        <input type=submit value="Log in" onclick="return loginBtn_Click();">

        <!-- Old log in button, works but no on hitting Enter
        <div id="loginBtn" class="btn" onclick="loginBtn_Click();" onkeypress="return loginBtn_Click();">Log in</div>-->

        <br /><br />

        <p>Error logging in?</p>
        <p>Contact your liason at Buckles Solicitors LLP directly or alternatively call reception on <b>01733 888888</b>.</p>

    </div>

Thanks guys!