Avatar of TrialUser
TrialUser
Flag for Afghanistan asked on

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>
JavaScriptASP.NETjQuery

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Rainer Jeschor

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
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
TrialUser

ASKER
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
SOLUTION
Ryan Chong

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
TrialUser

ASKER
I have code on the button click to validate iput
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Ryan Chong

>>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.
TrialUser

ASKER
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 Chong

can you post your complete scripts here for debugging?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Ryan Chong

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

ASKER
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>
TrialUser

ASKER
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
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
TrialUser

ASKER
there are more scripts in master page
Ryan Chong

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?
TrialUser

ASKER
the form element exists in master page. cannot be added to the content pages.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Ryan Chong

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 Jeschor

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 Hansen

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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23