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