CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-4jquery-validation-engine
mortenstarck
mortenstarck

Reputation: 2803

jQuery ajax form error

The is that i get an error the the click event is used. The Ajax call is "cancelled" before the server side code has finish. Then i do an debugger at the $Ajax error method, the statusText is just saying statusText: "error". I found an temporary solution by removing the <form id="formid">.... <form/>. But since i'm using jQuery.ValidationEnginen which can only be used on a .

The jQuery code:

$("#formid").validationEngine('attach', { scroll: false }).css({ color: "#4a6b0e" });

    $('#submitLogin').click(function () {
          var self = this;
            var UserName = $("#UserName").val();
            var Password = $("#Password").val();
            var RememberMe = $("#RememberMe").val();
            var PropertyId = ol.property.infoId;
            $.ajax({
                type: "POST",
                url: ol.url("~/Authentication/LogIn"),
                data: { "UserName": UserName, "Password": Password, "RememberMe": RememberMe },
                success: function (data) {

                  if (data.Errormes) {
                    $("#Result").html("Error: " + data.Errormes);
                  } else {
                    window.location.reload();
                  }
                },
                error: function (data, arg1, arg2, arg3) {
                  alert("Error: Run for your life!!");
                }
            });
        });

The form:

<form id="formid">
            <div class="LeftCol">Brugernavn</div>
            <div class="RightCol">
                <input type="text" style="width: 250px" id="UserName" name="UserName" class="validate[required,custom[email]]">
            </div>
            <div class="LeftCol">Adgangskode</div>
            <div class="RightCol">
                <input type="password" style="width: 250px" id="Password" name="Password" class="validate[required]" />
            </div>
            <div class="LeftCol">Husk mig?</div>
            <div class="RightCol">
                <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true">
            </div>
                <br><div class="RightCol" id="Result" style="color:red;"></div><br>
        <input id="submitLogin" type="submit" value="Log in" class="oline-button-green white" />
 </form>

Upvotes: 1

Views: 355

Answers (1)

wakooka
wakooka

Reputation: 1428

Try to add this :

 $('#submitLogin').click(function (e) {
    e.preventDefault();
   // ...
 });

Since you bind a click event to a submit button, your ajax request is being sent asynchronously and the form is also being sent which is causing the page to reload and the ajax request to be cancelled.

To avoid the form to be submitted when you click on the submit button, you'll have to prevent the submit button from its default behaviour by using e.preventDefault();

Upvotes: 3

Related Questions