使用AJAX和标签提交表单

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;

我一直试图让这个工作,但无法。我的所有表单通常都有提交输入,我处理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>

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.

Chrome控制台中未提供任何错误。感谢您提供的任何帮助。

2 个解决方案

#1

use document ready &

使用文件准备&

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

#2

Your logic is wrong:

你的逻辑错了:

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

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

When the link is clicked, you bind the an action to the submit event to your form. That is not what you want; you probably want to trigger the submit action code when the link is clicked.

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

Apart from that you are not cancelling the default click action of the link so it will be followed.

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

You only need:

你只需要:

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

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

Edit: Good point by @Andreas, you need to address your form correctly in the modified code:

编辑:@Andreas的好点,您需要在修改后的代码中正确地处理您的表单:

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

#1