【问题标题】:Submitting a form with ajax after jQuery validation is successfulljQuery验证成功后用ajax提交表单
【发布时间】:2013-09-18 04:18:31
【问题描述】:

好的,我有一个正在使用 jQuery Validation 进行验证的表单,我现在正尝试使用 AJAX 提交它。使用下面的代码,一旦表单有效并且您单击提交页面重新加载并将输入放置在 url 地址栏中(即 method="get")

在 ajax 方法中,我将其设置为 POST,但它似乎没有使用 ajax 调用。

我做错了什么?

$().ready(function() {
    var $form = $(this);
   //validate the inquiry form on keyup and submit
    $("#inquiryForm").validate({
        showErrors: function(errorMap, errorList) {
            for (var error in errorMap)  {
                $.growl.error({ message: errorMap[error] });
             }
        },
        onkeyup: false,
        rules: {
            fullName: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            inquiry: {
                required: true,
                minlength: 5,
                maxlength: 500
            }
        },
        messages: {
            fullName: "Your name is required",
            email: "A valid email address is required",
            inquiry: "Your inquiry is required and must have between 5-500 characters"
        },

        submitHandler: function(form) {
            $.ajax({
                url: form_submit/inquiry_form/inquiry_form.php,
                type: "POST",
                data: $(form).serialize(),
                success: function(response) {
                    $('#inquiryFormHolder').html("Your form was submitted!");
                }            
            });
            return false;
        }
    });
});

【问题讨论】:

  • 您在代码中传递var $form 的位置?可能你必须通过submitHandler: function( $form ) {
  • 不。结果相同。不过还是谢谢。
  • 您在 firebug 控制台中看到过任何错误吗?

标签: javascript jquery ajax forms jquery-validate


【解决方案1】:

尝试使用:

submitHandler: function(form) {
    $.ajax({
        url: form_submit/inquiry_form/inquiry_form.php,
        type: "POST",
        data: $(form).serialize(),
        success: function(response) {
            $('#inquiryFormHolder').html("Your form was submitted!");
        }            
    });
    $form.submit();
}

【讨论】:

  • 不。结果相同。不过还是谢谢。
  • 你试过把它放在ajax调用之后吗?并删除 return false;
  • @FouadFodail 朋友,你想让他在ajax调用之后放什么?请帮忙。
猜你喜欢
  • 2023-03-11
  • 1970-01-01
  • 2014-06-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多