在php jquery中ajax调用成功后允许表单操作提交

Question

<form id="formId" method="POST" action="#">

</form>

<script>
 $(document).ready(function () {
        $("#formId").submit(function (event) {

            alert("Handler for .submit() called.");
            var data= $("#txtDriverpassword").val();
            var data1= $("#driverId").val();

            $.ajax({
                type: "GET",
                url: "page.php",
                data: {"data": data, "data1": data1, "method": "verifypassword"},
                success: function (result) {

                    if (result === "valid") {
                        // alert('valid credentials....');

return true;

                    }
                    else {
                        alert("invalid credentials");
                       return false;

                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //  alert("Status: " + textStatus); alert("Error: " + errorThrown); 
                    $("#successMessage").html(textStatus);
                }
            });
            //event.preventDefault();
        });
    });
<script>

Inside the form I have a table with dynamic data and validation for it using foreach. Now for one single input validation I just used an ajax call - if ajax call is a success, the form needs to submit. The query for insertion is written in the same page. can i know how to solve it? preventing default is working, but removing default event in the ajax success call is not working?

How to solve?

Answer 1

Because the ajax-call is asynchronous you have to prevent the first form submit and then when it's validated true make a new form submit. I haven't tried it but this should work (notice the lock variable I introduced):

<script>
 $(document).ready(function () {
        var lock = false;
        $("#formId").submit(function (event) {
            if(!lock) {
                alert("Handler for .submit() called.");
                var driverPassword = $("#txtDriverpassword").val();
                var driverId = $("#driverId").val();

                $.ajax({
                    type: "GET",
                    url: "page.php",
                    data: {"data": data, "data1": dataaa, "method": "verifypassword"},
                    success: function (result) {

                        if (result === "valid") {
                            // alert('valid credentials....');
                            $("#formId").submit();
                        }
                        else {
                            alert("invalid credentials");

                        }
                        lock = true;
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //  alert("Status: " + textStatus); alert("Error: " + errorThrown); 
                        $("#successMessage").html(textStatus);
                    }
                });
                event.preventDefault();
            }
        });
    });
<script>