1

选择提交按钮时，我运行了表单验证，但我不希望运行默认提交功能。相反，我想运行一个 ajax 发布代码以将数据存储在表单中，并从服务器端发布数据。

我无法找到在哪里取消默认提交并添加 ajax 代码。

这是我的验证码

    $("#formEnroll").validate({
    errorElement:"p",
    submitHandler: function(form) {
            var phoneNumber = form.day_phone.value;             
            var phoneParts  = phoneNumber.split("-");
            form.dayArea.value = phoneParts[0];
            form.dayPrefix.value = phoneParts[1];
            form.daySuffix.value = phoneParts[2];               
            form.submit();
    }

});

这是我要运行的 ajax 代码，而不是默认提交

$.ajax({
    type: "POST",
    url: "/php/localProxy.php",
    data: $('#formEnroll').serialize(),
    success: function (response) {
            document.location = 'http://www.xxxx.com/thank-you';

    },
    error: function () {
            alert('There was a problem!');  // handle error
    }
        });
4

3 回答 3

2

您可以调用 ajax 函数而不是 form.submit(); form.submit(); 将使用默认提交提交您的代码。

  $('#formEnroll').on('submit', function(e){
        e.preventDefault(); 

        $(this).validate({
            errorElement:"p",
            submitHandler: function(form) {
                var phoneNumber = form.day_phone.value;             
                var phoneParts  = phoneNumber.split("-");
                form.dayArea.value = phoneParts[0];
                form.dayPrefix.value = phoneParts[1];
                form.daySuffix.value = phoneParts[2];               
                submitform();
            }
        });
    })

    function submitform(){
    $.ajax({
        type: "POST",
        url: "/php/localProxy.php",
        data: $('#formEnroll').serialize(),
        success: function (response) {
                document.location = 'http://www.xxxx.com/thank-you';

        },
        error: function () {
                alert('There was a problem!');  // handle error
        }
    });

    }
于 2012-09-12T04:48:16.363 回答
0

您可以将验证插件包装到通用表单提交函数中以停止标准执行。

$('#formEnroll').on('submit', function(e)
{
    e.preventDefault(); // stop form submission

    // Run validation
    $(this).validate({
        errorElement:"p",
        submitHandler: function(form) {
            var phoneNumber = form.day_phone.value;             
            var phoneParts  = phoneNumber.split("-");
            form.dayArea.value = phoneParts[0];
            form.dayPrefix.value = phoneParts[1];
            form.daySuffix.value = phoneParts[2];               
            submitform(); // call your ajax function here
        }
    });
});

function submitform(){
    $.ajax({
        type: "POST",
        url: "/php/localProxy.php",
        data: $('#formEnroll').serialize(),
        success: function (response) {
                document.location = 'http://www.xxxx.com/thank-you';

    },
    error: function () {
        alert('There was a problem!');  // handle error
    }
});

除了使用事件对象e，您还可以return false;在.on函数末尾停止触发默认事件。

于 2012-09-12T04:37:10.163 回答
0

您可以通过单击提交按钮使用 jquery 中的 click 事件通过 ajax 发送数据，并且该功能应该return false通过您可以使用 ajax 发送数据并避免默认提交的方式来避免默认提交。

于 2012-09-12T05:23:27.617 回答