2013-07-19 131 views
1

好的,我一直在研究一个jQuery脚本整天,大部分是调整它来让错误显示正常,并且突然 - 代码停止工作。表单不提交或任何东西。jquery随机停止工作

下面我已经包含了代码;我假设它的东西在jQuery方面(即谷歌或某事),因为我将代码恢复到最后的工作配置,仍然没有得到任何东西。

编辑:没有控制台错误,jQuery没有提交。这是我遇到的问题。

<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<title>Login Test</title> 
<link rel='stylesheet' href='theme/default/style.css' /> 
</head> 
<div id='alert' class='hidden'> 
Error 
</div> 
<body> 
<div id='welcome_holder'> 
<table cellpadding="0" cellspacing="0" id='welcome'> 
<form method='post' action='actionlog.php' id='login'> 
<tr> 
<th colspan='3'><h3>Citizen Login</h3></th> 
</tr> 
<tr> 
    <td class='user'>Username</td><td class="user">:</td><td class="user"><input type='text' name='username' id='username'></td></tr> 
<tr> 
    <td class='pass'>Password</td><td class="pass">:</td><td class="pass"><input type='password' name='password' id='password'></td> 
</tr> 
<tr><th colspan='3'><input type='submit' /></th></tr> 
<tr><th colspan='3'><span style='font-size: 12px;'>Don't have an account? <a href='register.php'>Register Today!</a><br /> Forgotten Password/Username?</span></th> 
</tr> 
</form> 
</table> 
</div> 

<script type='text/javascript'> 
    $('#login').submit(function() { 
     $.ajax({ 
      url: 'actionlog.php', 
      type: 'POST', 
      data: { 
        username: $('#username').val(), 
        password: $('#password').val() 
      }, 
      success: function(data) { 
       if(data == 'true') 
       { location.reload(); } 
       else 
       { 
        $('#alert').addClass('show'); 
       } 

      } 
     }); 
     return false; 
    }); 
</script> 
+0

你为什么在身体外面有警戒格? – Sergio

+3

控制台对此有何评论? – tymeJV

+1

而不是让你的表格放在表格中。 – Musa

回答

0

出现了一些与代码有关的问题,第一件事就是在文档准备好后绑定到dom事件。最重要的是,在提交表单时,您需要使用event.preventDefault()来阻止事件,这会停止浏览器使用表单的方法执行表单的操作(也称为发布到url)我已更新代码以反映这些更改,还根据对您的问题的评论修复了HTML。

<html> 
<head> 
    <title>Login Test</title> 
    <link rel='stylesheet' href='theme/default/style.css' /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type='text/javascript'> 
    // use $(document).ready(function(){}) 
    // $(function(){}) is a shortcut for ready function 
    $(function(){ 
     $('#login').submit(function(e) { 
      // stop the form from submitting and allow the ajax to run 
      e.preventDefault(); 
      $.ajax({ 
       url: 'actionlog.php', 
       type: 'POST', 
       data: { 
         username: $('#username').val(), 
         password: $('#password').val() 
       }, 
       success: function(data) { 
        if(data == 'true') 
        { 
         location.reload(); 
        } 
        else 
        { 
         $('#alert').addClass('show'); 
        } 
       } 
      }); 
      return false; 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <!-- alert div needs to be in body tag --> 
    <div id='alert' class='hidden'>Error</div> 
    <div id='welcome_holder'> 
     <!-- form outside of table --> 
     <form method='post' action='actionlog.php' id='login'> 
      <table cellpadding="0" cellspacing="0" id='welcome'> 
       <tr> 
        <th colspan='3'><h3>Citizen Login</h3></th> 
       </tr> 
       <tr> 
        <td class='user'>Username</td> 
        <td class="user">:</td> 
        <td class="user"><input type='text' name='username' id='username'></td> 
       </tr> 
       <tr> 
        <td class='pass'>Password</td> 
        <td class="pass">:</td> 
        <td class="pass"><input type='password' name='password' id='password'></td> 
       </tr> 
       <tr> 
        <td colspan='3'><input type='submit' /></td> 
       </tr> 
       <tr> 
        <td colspan='3'> 
         <span style='font-size: 12px;'>Don't have an account? <a href='register.php'>Register Today!</a><br /> Forgotten Password/Username?</span> 
        </td> 
       </tr> 
      </table> 
     </form> 
    </div> 
</body> 
</html>