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

I have javascript in content page, that calls javascript to trigger a button click when enter is pressed inside a textbox. the code works fine in my developement environment but does not work when published to production server. THis is the url of my production servr:  http://test.paperclipsetc.com/Account/Login




<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>
 <input id="txtUserName" autofocus  runat="server" type="text"
                class="form-control" placeholder="Username" maxlength="50" onkeyup="return jftnSubmit(event); " />
<button id="btnLogin" runat="server" class="btn-standard"
                type="submit">
                Log In
            </button>
TrialUserAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
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
Julian HansenCommented:
I am really confused by the logic here?

You are calling a JS function on every keyup on the UserName field to check for an ENTER pressed so you can click the login button.

1. You are forcing a form submit on ENTER on the user name field - which 9/10 is going to happen before the password has been entered.

2. In your JS function you are triggering a click on the button when you could simply do a form submit - no need to go via the button

3. As Rainer points out - forms by default submit on enter - so why go to all this extra effort.

Can you explain your thinking here why you have the jftnSubmit function at all?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TrialUserAuthor Commented:
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
>>So I am trying to figure out why the error message is not displayed when the enter is pressed.
it could be some javascript error which prevent the error message to be displayed?

what if you change:

<input id="txtUserName" autofocus  runat="server" type="text"
                class="form-control" placeholder="Username" maxlength="50" onkeyup="return jftnSubmit(event); " />

to:

<input id="txtUserName" autofocus  runat="server" type="text"
                class="form-control" placeholder="Username" maxlength="50"  />

? what will happen next? is that the error message will be displayed as well?
TrialUserAuthor Commented:
I have code on the button click to validate iput
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
>>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.
TrialUserAuthor Commented:
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
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
can you post your complete scripts here for debugging?
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
>>Basically the code behind sign in button is not trigerred without call to javascript.
if necessary, you can post the .aspx codes as well
TrialUserAuthor Commented:
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>
TrialUserAuthor Commented:
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
TrialUserAuthor Commented:
there are more scripts in master page
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
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>

Open in new window

Will this work for you?
TrialUserAuthor Commented:
the form element exists in master page. cannot be added to the content pages.
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
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.
Rainer JeschorCommented:
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
Julian HansenCommented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.