Can';t work using html textbox to login

StackOverflow https://stackoverflow.com/questions/22603037

Question

Because I am using html buttons and textbox to login, I must do the code behind in the javascript in the source code in order to do the code behind. Whether I login using the correct username and password which is Admin and 123 and click the login button, or I type in nothing and click the login button, it always redirects me to ResultDetails.aspx. That means login fail. Login will pass if it redirect me to Search.aspx. What's Wrong? Even if I change .Value to .Text, it is still the same effect

enter image description here

MY SOURCE CODE

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">

    </style>
    <link rel="stylesheet" type="text/css" href="stylesheets/loginstyle.css" />
    <script language="javascript" type="text/javascript">
// <![CDATA[




        function Button1_onclick() {

            if (txtUserName.Value == "Admin" && txtPassword.Value == "123") {
                //Login as Hardcoded User

                //Do your stuff
                window.location.assign("Search.aspx")


            }
            else {
                window.location.assign("ResultDetails.aspx")
            }           
        }

// ]]>
    </script>
</head>
<body>

<div id="wrapper">

    <form name="login-form" class="login-form" action="" method="post">

        <div class="header">
        <h1>Login Form</h1>
        <span>Fill out the form below to login to my super awesome imaginary control panel.</span>
        </div>

        <div class="content">
        <input name="username" type="text" class="input username" placeholder="Username" runat="server" id="txtUserName" />
        <div class="user-icon"></div>
        <input name="password" type="password" class="input password" placeholder="Password" runat="server" id="txtPassword" />
        <div class="pass-icon"></div>       
        </div>

        <div class="footer">
        <input type="button" name="submit" value="Login" class="button" runat="server" id="Button1" önserverclick="Button1_Click"  onclick="return Button1_onclick()" />
        </div>

    </form>

</div>
<div class="gradient"></div>
</body>
</html>

MY CODE BEHIND CODE

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Login : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }


}
Was it helpful?

Solution 4

You can try below code which fetches the value from text boxes using the id in JavaScript.

function Button1_onclick() {

            if (document.getElementById('txtUserName').value == "Admin" && document.getElementById('txtPassword').value == "123") {
                //Login as Hardcoded User

                //Do your stuff
                window.location.assign("Search.aspx")


            }
            else {
                window.location.assign("ResultDetails.aspx")
            }           
        }

OTHER TIPS

You are not using asp.net server controls to access values like 

txtUserName.Value

Rather, you are using Javascript on HTML Controls. So, your syntax should be like:

if (document.getElementById("txtUserName").value == "Admin" && document.getElementById("txtPassword").value == "123")

You need to access the fields properly

e.g.

if (document.getElementById('txtUserName').value == "Admin" && document.getElementById('txtPassword').value == "123")

If you are using Jquery lib in your code You can also do

if($.("#txtUserName").val()=="Admin" && $.("#txtPasword").val()=="123")

if (document.getElementById("txtUserName").value == "Admin" 
    && document.getElementById("txtPassword").value == "123")
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top