Cannot access <form> attributes using JQuery and Ajax

Question

I'm trying to use the "shake" effect on my login form whenever the login fails. The issue is I can't get the <form> attributes (type, method, etc) using Jquery's .attr() method because it always returns undefined. Funnily enough, the <form> ends up shaking every time.

HTML FORM

<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>`

Answer 1

Try

$(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)
        });
    }
});

Answer 2

In you code instead of type use method.

i have try access attr as follow and i am able to get it perfectly as below.

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

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

In your code :

form.attr("method")

instead of

 form.attr("type")

Answer 3

ofc it will cause you undefined:

type: form.attr("type"),

there is no such type in there, maybe youre referring to

type: form.attr("method"),