人工登录 - 使用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.'); 
     } 
    }); 

}); 

Answer 2

您需要设置范围内的username和password变量你的点击功能在执行时。像这样：

http://jsfiddle.net/y419usf0/5/

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