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>

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

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

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

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TrialUser

ASKER

I have code on the button click to validate iput

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?

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

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.

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.