Question

我正在使用以下ajax和jquery脚本来登录我的用户。当用户输入登录详细信息并点击提交时，表单的div元素将翻转。

然后代码检查是否成功登录或尝试失败。

代码：

<script>
function submitForm() {
var myusername = $("#myusername").val();
var mypassword = $("#mypassword").val();

if (myusername == null || myusername == "" || mypassword == null || mypassword == "") {
if (myusername == null || myusername == "") { document.forms["form"]["myusername"].style.border = "2px solid #963634";}
if (mypassword == null || mypassword == "") { document.forms["form"]["mypassword"].style.border = "2px solid #963634";}
$( ".home_column" ).effect( "shake" ); 
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("include/validate_login.php", {
username1: myusername,
password1: mypassword
}, function(data) {
if (data.indexOf("login_wrong") >= 0){
$(".home_column").flip({
    direction:'lr',
        color: 'rgba(0, 0, 0, 0.2)', 
            content:'<h21>Incorrect Login Details</h21>'
})  
setTimeout(
  function() 
  {
   $(".home_column").revertFlip()
  }, 2500);  }else{
  if (data.indexOf("login_fail") >= 0){
$(".home_column").flip({
    direction:'lr',
        color: 'rgba(0, 0, 0, 0.2)',
            content:'<h211>Incorrect Password</h211><br/><h21>Forgot Your password?</h21><br/><div id="clicker">Try Again</div>'
})  

$('#clicker').live('click', function(e) {  
       $(".home_column").revertFlip()
    })

}else{
  if (data.indexOf("block_login") >= 0){
$(".home_column").flip({
    direction:'lr',
        color: 'rgba(138, 138, 138, 0.2)', 
            content:'<h211>Account has been Blocked</h211>'
})  
setTimeout(
  function() 
  {
   $(".home_column").revertFlip()
  }, 2500); }else{
  if (data.indexOf("login_blocked") >= 0){
$(".home_column").flip({
    direction:'lr',
        color: 'rgba(138, 138, 138, 0.2)', 
            content:'<h211>Account Blocked</h211>'
})  
setTimeout(
  function() 
  {
   $(".home_column").revertFlip()
  }, 2500); }else{
 if (data.indexOf("login_success") >= 0){
  $(".home_column").flip({
    direction:'lr',
        color: 'rgba(138, 138, 138, 0.2)', 
        content: '<h211>Hello '+data.substring(13)+'</h211><div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div><h212>Preparing your Dashboard</h212>'    
}) 
setTimeout(
  function() 
  {
   window.location = 'dashboard.php'; 
  }, 4500);

  } } } } }
$('#form')[0].reset(); // To reset form fields
});
}
}

$(document).ready(function() {   
$(document).on('keypress', function(e) {
if (e.which === 13) {
        e.preventDefault();
        submitForm();
    }
});
});

$(document).ready(function() {
$(document).on('keypress click', '#submit', function(e) {
    e.preventDefault();
    submitForm();
});
});
</script>

我的问题出现在这段代码中：

if (data.indexOf("login_fail") >= 0){
$(".home_column").flip({
    direction:'lr',
        color: 'rgba(0, 0, 0, 0.2)',
            content:'<h211>Incorrect Password</h211><br/><h21>Forgot Your password?</h21><br/><div id="clicker">Try Again</div>'
})  

$('#clicker').live('click', function(e) {  
       $(".home_column").revertFlip()
    })

当用户输入正确的用户名但密码错误时，会返回我的数据＆＃39; login_fail＆＃39;

这告诉脚本用户输入了正确的用户名但密码错误。

此时，div翻转并询问用户是否忘记了密码并为他们提供了恢复密码的选项。我还有一个再试一次按钮，允许用户将div翻转回登录表单并重试。

如果用户点击我的div id #clicker

，我很难尝试触发点击功能上的还原翻转调用

请有人告诉我我哪里出错了吗？感谢

jgin / ajax登录表单在登录时或登录失败时翻转

0 个答案: