2013-07-19 166 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>