Question

I've been trying to get this to work but unable to. All my forms normally have submit input on them and I process AJAX submission like below;

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

Now I want to achieve the same thing using an tag. Below is my code that doesn't work;

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

No error provided in Chrome console. Thanks for any help provided.

Answer 1

使用文件准备＆amp;

 $("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.

单击链接后，将操作绑定到表单的提交事件。那不是你想要的;您可能希望在单击链接时触发提交操作代码。

除此之外，您不会取消链接的默认点击操作，因此将会遵循该操作。

你只需要：

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

使用AJAX和<a> tag

2 个答案: