My HTML/jQuery login doesn't work



My jQuery code does not work. Please help, I have no idea what is wrong. I am new to jQuery so it's possible that I am doing something wrong.

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

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
    <div class="loginF">
        &nbsp;<table style="width:100%;">
                <td class="auto-style1">Username:</td>
                <td><input id="Text1" type="text" /></td>
                <td class="auto-style1">Password:</td>
                <td><input id="Password1" type="password" /></td>
                <td class="auto-style1">
        <input class="button" id="Submit1" type="submit" value="Sumbit" onclick="myfunc"/></td>
                    <asp:Button ID="Button1" runat="server" CssClass="button" OnClientClick="myfunc" Text="Login" />
        <br />
        &nbsp;<br />
        &nbsp;<hr />
    <script type="text/javascript">
        $(document).ready(function myfunc() {
            $('#Text1').keyup(function() {
                var txtValue = $(this).val();
            $('#Password1').keyup(function () {
                pwdValue = $(this).val();
            if (txtValue === "Reece") {
                if (pwdValue === "12345") {
                    $('#conformation').after('<br id="br1"/>')
                    $('#br1').after('<p id="unp">UserName: ' + txtValue + '</p>');
                    $('#unp').after('<br id="br2"/>');
                    $('#br2').after('<p id="pwdp">Password: ' + pwdValue + '</p>')

            } else {
            $('.button').mouseenter(function() {
                $(this).fadeTo('fast', 1);
            $('.button').mouseleave(function () {
                $(this).fadeTo('fast', 0.5);
    <style type="text/css">
        .button {
    background-color: #008CBA; /* Green */
    border-radius: 10px;
    color: white;
    text-align: center;
    font-size: 16px;
    width: 100px;
    height: 40px;
        .auto-style1 {
            width: 63px;
    <div id="final">
        <p id="conformation">Locked!</p>


As a start
You are aware you will run this in an environment ??

Your <style></style> element should be in the <header></header> element

In your <script> you are using an IF-ELSE statement
- which will be evaluated as soon as jQuery's READY-eventflag has been set.......
- but the IF-ELSE condition has dependencies with the #Text1 and #Password1 =keyup= Eventhandler's


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.