使用JQuery和Ajax無法訪問<form>屬性

我試圖在登錄失敗時在登錄表單上使用「搖動」效果。問題是我無法使用Jquery的.attr（）方法獲取<form>屬性（類型，方法等），因爲它總是返回undefined。有趣的是，<form>每次都會搖晃。使用JQuery和Ajax無法訪問<form>屬性

HTML表單

<form name="loginForm" id="loginForm" method="post" action="http://127.0.0.1/appnut/login"> 
    <table> 
     <tr> 
      <td><label>Usuario:</label> </td> 
      <td><input name="username" type="text" size="32" maxlength="32" /></td> 
     </tr> 
     <tr> 
      <td><label>Password:</label> </td> 
      <td><input name="password" type="password" size="32" maxlength="32" /></td> 
     </tr> 
    </table> 
    <input type="submit" value="Iniciar Sesion" /> 
</form>

的Javascript：

<script type="text/javascript" 
      src="public/js/jquery.js"></script> 
    <script type="text/javascript" 
      src="public/js/jquery_effects.js"></script> 
    <script type="text/javascript" 
      src="public/js/jquery_shake.js"></script> 
    <script> 
     $(document).ready(function() { 
      var attempts = 0; // number of Login attempts 
      var initialShakes = 3; // number of shakes on first failed attempt 
      var maxShakes = 10; // maximum number of shakes 

      // Login form submit event 
      $("#loginForm").submit(function() { 
       var isLoginValid = false; 
       var form = $("#loginForm"); 
       $.ajax(
        { type: form.attr("type"), 
         url:form.attr("action"), 
        //******THESE TWO WILL RETURN UNDEFINED AND 
        //******THE AJAX CALL WILL FAIL 
         data:$(form).serialize(), 
         success: function(data){ 
          alert(data); 
          isLoginValid=TRUE; 
         } 
        } 
       ); 

       if (isLoginValid) 
       { 
        alert("true"); 
        // Your code for valid login goes here....... 
       } 
       else 
       { 
        alert("false"); 
        // Shake the form because Login is not valid 
        shakeLoginForm(); 

        attempts++; 
       } 

       return false; 
      }); 

      function shakeLoginForm() { 
       // Determine how many times the form will shake. 
       // Initially, it will start from the value of initialShakes, 
       // then increase by 1 on every failed attempt. 
       // The following assures that the number 
       // of shakes will not exceed the specified maximum. 
       var shakeTimes = Math.min(initialShakes + attempts, maxShakes); 

       // The single line code to shake the form. 
       $("#loginForm").effect("shake", { times: (shakeTimes) }); 
      } 
     }); 
    </script>`

來源

2013-08-02 raskolnnikov

嘗試

$(document).ready(function() { 
    var attempts = 0; // number of Login attempts 
    var initialShakes = 3; // number of shakes on first failed attempt 
    var maxShakes = 10; // maximum number of shakes 

    // Login form submit event 
    $("#loginForm").submit(function() { 
     var form = $(this); // use this since it points to the submitted form 
     $.ajax({ 
      type : form.attr("method"), // there is no type attribute, it is method in the form 
      url : form.attr("action"), 
      data : form.serialize(), 
      success : function(data) { 
      } 
     }).fail(function() { //change the error handler to use ajax callback because of the async nature of Ajax 
      alert("false"); 
      // Shake the form because Login is not valid 
      shakeLoginForm(); 

      attempts++; 
     }).done(function() { 
      alert("true"); 
      // Your code for valid login goes here....... 

     }); 

     return false; 
    }); 

    function shakeLoginForm() { 
     // Determine how many times the form will shake. 
     // Initially, it will start from the value of initialShakes, 
     // then increase by 1 on every failed attempt. 
     // The following assures that the number 
     // of shakes will not exceed the specified maximum. 
     var shakeTimes = Math.min(initialShakes + attempts, maxShakes); 

     // The single line code to shake the form. 
     $("#loginForm").effect("shake", { 
      times : (shakeTimes) 
     }); 
    } 
});

來源

2013-08-02 05:36:27

你做了什麼改變？目前尚不清楚。 – Jared

@Jazza增加了幾條評論 –

在你的代碼，而不是類型使用方法。

我試着訪問attr，如下所示，我可以像下面那樣完美獲取它。

alert($("#loginForm").attr("method")); 

alert($("#loginForm").attr("action"));

在您的代碼：

form.attr("method")

，而不是

form.attr("type")

來源

2013-08-02 05:40:35

OFC它會導致你不確定：

type: form.attr("type"),

沒有這樣的類型在那裏，也許你指的是

type: form.attr("method"),

來源

2013-08-02 05:42:58

使用JQuery和Ajax無法訪問<form>屬性

回答

相關問題