javascript to trigger submit button click does not work on production server

Hi,
by default when you press enter inside a forms input element AND you have a submit button, the form gets submitted automatically.

And thats how your production page/form works. Should it work differentely?

Thanks and HTH
Rainer

All I want is when the user clicks enter key on the password textbox, it triggers the log in button.
So in my production url, if you type in some text for username and password and hit enter nothing happens. If you click on the login button, it executes code on the server side and displays error message.
So I am trying to figure out why the error message is not displayed when the enter is pressed. THanks

I have code on the button click to validate iput

>>I have code on the button click to validate iput
you can modify and put that validation scripts into the "onSubmit" event of the form instead, and then when user pressed the {enter} in the textbox, it should be handled accordingly.

i removed the call to javascript function on textbox. this is what happens:
1) i enter incorrect username password clicked enter nothing happened. I clicked on the signin, then i get error message.
2) i enter correct username and password clicked enter inside textbox nothing happened. I click on sign in button i get signedin.

Basically the code behind sign in button is not trigerred without call to javascript. Thanks

can you post your complete scripts here for debugging?

>>Basically the code behind sign in button is not trigerred without call to javascript.
if necessary, you can post the .aspx codes as well

This is aspx file :


<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Logon.aspx.vb" Inherits="BSCSource.Logon" %>

<asp:Content ID="HeaderContent" ContentPlaceHolderID="cphHeader" runat="server">
    <style>
        .form-login {
            max-width: 430px;
            padding: 15px;
            margin: 0 auto;
        }
            .form-login h1 {
                margin: 0;
                font-size: 30px;
            }
        .table {
            border-bottom: 0px !important;
            border-right: 0px !important;
            border-left: 0px !important;
            border-top: 0px !important;
            margin-top: 40px;
        }
            .table th, .table td {
                border: 0px !important;
            }
        .fixed-table-container {
            border: 0px !important;
        }
    </style>
    <script lang="javascript" type="text/javascript">

        function jftnSubmit(e) {

            if (e.keyCode == 13) {

                document.getElementById('<%= btnLogin.ClientID %>').click();
             }
             return false;
        }
         window.onload = function () {
            document.getElementById('<%= txtUserName.ClientID %>').focus();
        }
    </script>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="cphBody" runat="server" defaultButton="btnLogin">
    <div class="container form-login">
        <%-- Login --%>
        <div class="form-group">
            <h1>Sign in to your account</h1>
        </div>
        <div class="form-group">
            <label for="txtUserName" class="sr-only">User Name:</label>
            <input id="txtUserName" autofocus  runat="server" type="text"
                class="form-control" placeholder="Username" maxlength="50" onkeyup="return jftnSubmit(event); " />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                SetFocusOnError="true" ControlToValidate="txtUserName" Text="• Username is required" ForeColor="Red" Display="Static"></asp:RequiredFieldValidator>
        </div>
        <div class="form-group">
            <%--<label for="txtPassword" class="sr-only">Password:</label>--%>
            <input id="txtPassword" runat="server" type="password"
                class="form-control" placeholder="Password" maxlength="127" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                SetFocusOnError="true" ControlToValidate="txtPassword" Text="• Password is required" ForeColor="Red" Display="Static"></asp:RequiredFieldValidator>
        </div>
        <div class="form-group">
            <label>
                <input type="checkbox" id="chkRememberMe" runat="server" />
                Remember Me
            </label>
        </div>
        <div class="form-group">
            <button id="btnLogin" runat="server" class="btn-standard"
                type="submit">
                Log In
            </button>
        </div>
        <div class="form-group">
            <a href="#">Forgot password?</a>
        </div>
        <div class="form-group">
            <span>Don't have an account?</span>
        </div>
        <div class="form-group">
            <a href="#">Create one now.</a>
        </div>
    </div>
</asp:Content>

aspx.vb:

Private Sub btnLogin_ServerClick(sender As Object, e As EventArgs) Handles btnLogin.ServerClick
        Call AuthenticateUser()
    End Sub

private sub Authenticateuser()
login to validate user
if succ, redirect to default oage
else call showerrmsg()
end sub

private sub showerrmsg()
 display err msg by calling a function in master page
end sub

there are more scripts in master page

just a quick test, you probably need to add a Form element in your page instead, like:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Logon.aspx.vb" Inherits="BSCSource.Logon" %>

<asp:Content ID="HeaderContent" ContentPlaceHolderID="cphHeader" runat="server">
    <style>
        .form-login {
            max-width: 430px;
            padding: 15px;
            margin: 0 auto;
        }
            .form-login h1 {
                margin: 0;
                font-size: 30px;
            }
        .table {
            border-bottom: 0px !important;
            border-right: 0px !important;
            border-left: 0px !important;
            border-top: 0px !important;
            margin-top: 40px;
        }
            .table th, .table td {
                border: 0px !important;
            }
        .fixed-table-container {
            border: 0px !important;
        }
    </style>
    <script lang="javascript" type="text/javascript">

        function jftnSubmit(e) {

            if (e.keyCode == 13) {

                document.getElementById('<%= btnLogin.ClientID %>').click();
             }
             return false;
        }
         window.onload = function () {
            document.getElementById('<%= txtUserName.ClientID %>').focus();
        }
    </script>
</asp:Content>
<form ID="form1" runat="server">
<asp:Content ID="BodyContent" ContentPlaceHolderID="cphBody" runat="server" defaultButton="btnLogin">
    <div class="container form-login">
        <%-- Login --%>
        <div class="form-group">
            <h1>Sign in to your account</h1>
        </div>
        <div class="form-group">
            <label for="txtUserName" class="sr-only">User Name:</label>
            <input id="txtUserName" autofocus  runat="server" type="text"
                class="form-control" placeholder="Username" maxlength="50" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                SetFocusOnError="true" ControlToValidate="txtUserName" Text="• Username is required" ForeColor="Red" Display="Static"></asp:RequiredFieldValidator>
        </div>
        <div class="form-group">
            <%--<label for="txtPassword" class="sr-only">Password:</label>--%>
            <input id="txtPassword" runat="server" type="password"
                class="form-control" placeholder="Password" maxlength="127" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                SetFocusOnError="true" ControlToValidate="txtPassword" Text="• Password is required" ForeColor="Red" Display="Static"></asp:RequiredFieldValidator>
        </div>
        <div class="form-group">
            <label>
                <input type="checkbox" id="chkRememberMe" runat="server" />
                Remember Me
            </label>
        </div>
        <div class="form-group">
            <button id="btnLogin" runat="server" class="btn-standard"
                type="submit">
                Log In
            </button>
        </div>
        <div class="form-group">
            <a href="#">Forgot password?</a>
        </div>
        <div class="form-group">
            <span>Don't have an account?</span>
        </div>
        <div class="form-group">
            <a href="#">Create one now.</a>
        </div>
    </div>
</asp:Content>
</form>

Select all Open in new window

Will this work for you?

the form element exists in master page. cannot be added to the content pages.

I don't have the VS with me right now, so can't really test the page for you. will try to get back to you soon.

Hi,
sorry again, but imho you do not need this Javascript. In IE11 (and in nearly all other browsers as well) the form gets submitted automatically when "Enter" or "Return" key is pressed. That is also Happening on your site.

Secondly, if your browser behaves not as the rest of the world and you want to include the script, I suggest to bind it to the password field and not the user name.

And  on the provided link, there are a couple of resources returning "404-Not found".

Just my 2ct
Rainer

The reason your server side validate is not called onSubmit is because you are binding it to the button click.
Instead - bind your server to the form submit.
Remove the javascript and allow the default form behaviour to do the work for you - it will auto submit on enter.
Client side bind your validation to the onSubmit instead of the button click.
This is the correct way of doing it. Always try and work with default behaviour.