My HTML/jQuery login doesn't work

jquery
html

#1


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="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="loginF">
        &nbsp;<table style="width:100%;">
            <tr>
                <td class="auto-style1">Username:</td>
                <td><input id="Text1" type="text" /></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style1">Password:</td>
                <td><input id="Password1" type="password" /></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style1">
        <input class="button" id="Submit1" type="submit" value="Sumbit" onclick="myfunc"/></td>
                <td>
                    <asp:Button ID="Button1" runat="server" CssClass="button" OnClientClick="myfunc" Text="Login" />
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <br />
        &nbsp;<br />
        &nbsp;<hr />
    </div>
    </form>
    <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').text('Unlocked!');
                    $('#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 {
                alert("Invalid");
            }
            $('.button').mouseenter(function() {
                $(this).fadeTo('fast', 1);
            });
            $('.button').mouseleave(function () {
                $(this).fadeTo('fast', 0.5);
            });
        });
    </script>
    <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;
        }
    </style>
    <div id="final">
        <p id="conformation">Locked!</p>
    </div>
</body>
</html>


#2

@lividtea2
As a start
You are aware you will run this in an ASP.net environment ??

Your <style></style> element should be in the <header></header> element
http://stackoverflow.com/questions/1303416/does-style-have-to-be-in-the-head-of-an-html-document

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


#3

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