人工登录 - 使用HTML和jQuery

Question

我正在尝试使用基本的html和jQuery创建一个人工登录页面.显然,如果尝试创建"安全"登录,则不会使用此选项.

我尝试了多种解决方案,但我一直在登录时遇到问题.

HTML:

<form>
    <input class="username" type="text" name="username" placeholder="Username" required/>
      <input class="password" type="password" name="password" placeholder="Password" required/>
    <button class="signInButton">Sign In</button>
</form>

jQuery:

$(document).ready(function() {

    var username = $("input[name$='username']").val();
    var password = $("input[name$='password']").val();
    var signIn = $('.signInButton');

    signIn.on('click', function() {
        event.preventDefault();
        if (username === 'admin' && password === '1234') {
            alert('It Worked!');
            $(location).attr('href','http://google.com');
        } else {
            alert('Incorrect Username/Password.');
        }
    });

});

理想情况下,在提交正确的值后,页面应链接到其他位置(出于本示例的目的,http://google.com).

要查看实例,jsFiddle.

Answer 1

您需要将变量放在函数中,否则它们只在页面加载时设置一次,而不是在点击时重新加载:

$(document).ready(function() {


    var signIn = $('.signInButton');

    signIn.on('click', function() {
        var username = $("input[name$='username']").val();
        var password = $("input[name$='password']").val();
        event.preventDefault();
        if (username === 'admin' && password === '1234') {
            alert('It Worked!');
            $(location).attr('href','http://google.com');
        } else {
            alert('Incorrect Username/Password.');
        }
    });

});