使用AJAX和<a>標記</a>提交表單

Question

我一直在努力使它起作用，但無法。 我所有的表單通常都具有submit input ，並且我將如下處理AJAX提交；

<script>
$("input#submit").click(function () {
    $("#login-form").submit(function (e) {
        $('#loader').show();
        // Client side validation
        if ($("#email").val() == "" || $("#password").val() == "") {
            $('#loader').hide();
            fieldError();
        } else {
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax({
                url: formURL,
                type: "POST",
                data: postData,
                success: function (response) {
                    switch (response) {
                    case "Valid":
                        $('#loader').hide();
                        $('#login-form').trigger("reset");
                        window.location.href = "index.php";
                        break;
                    case "not eValid":
                        $('#loader').hide();
                        emailError();
                        break;
                    case "not Valid":
                        $('#loader').hide();
                        credError();
                        break;
                    }
                }
            });
        }
        e.preventDefault(); //STOP default action
        e.unbind();
    });
});
</script>

現在，我想使用標簽來實現相同的目的。 下面是我的代碼不起作用；

<script>
$("a.update").click(function () {
    $("#address-form").submit(function (e) {
        $('#loader').show();
        // Client side validation
        if ($("#addressLine1").val() == "" || $("#addressLine2").val() == "" || $("#addressLine3").val() == "") {
            $('#loader').hide();
            fieldError();
        } else {
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax({
                url: formURL,
                type: "POST",
                data: postData,
                success: function (response) {
                    switch (response) {
                    case "Valid":
                        $('#loader').hide();
                        $('#address-form').trigger("reset");
                        //window.location.href="index.php";
                        break;
                    case "not Valid":
                        $('#loader').hide();
                        credError();
                        break;
                    }
                }
            });
        }
        e.preventDefault(); //STOP default action
        e.unbind();
    });
});
</script>

Chrome控制台中未提供錯誤。 感謝您提供的任何幫助。

Answer 1

准備好文件並＆

 $("a.update").click(function (e) {

        $('#loader').show();
        // Client side validation
        if ($("#addressLine1").val() == "" || $("#addressLine2").val() == "" || $("#addressLine3").val() == "") {
            $('#loader').hide();
            fieldError();
        } else {

            var postData = $("#address-form").serializeArray();
            var formURL = $("#address-form").attr("action");

            $.ajax({
                url: formURL,
                type: "POST",
                data: postData,
                success: function (response) {
                    switch (response) {
                        case "Valid":
                            $('#loader').hide();
                            $('#address-form').trigger("reset");
                            //window.location.href="index.php";
                            break;
                        case "not Valid":
                            $('#loader').hide();
                            credError();
                            break;
                    }
                }


            });
            e.preventDefault(); //STOP default action
            e.unbind();
        });

Answer 2

您的邏輯是錯誤的：

$("a.update").click(function () {
    $("#address-form").submit(function (e) {

        $('#loader').show();
        // Client side validation
        // etc.

單擊鏈接后，將動作綁定到表單的Submit事件。 那不是你想要的； 您可能想在單擊鏈接時觸發提交操作代碼。

除此之外，您不會取消鏈接的默認單擊操作，因此將遵循它。

您只需要：

$("a.update").click(function (e) {
    e.preventDefault();

    $('#loader').show();
    // Client side validation
    // etc.

編輯： @Andreas指出，您需要在修改后的代碼中正確解決表單：

        var postData = $("#address-form").serializeArray();
        var formURL = $("#address-form").attr("action");