小编典典

jQuery验证需要单击两次提交提交表单

ajax

我有一个模式表单,用户必须完成表单(否则验证将显示必填字段错误消息),然后单击“提交输入类型”,不执行任何操作,然后再次单击它,然后将通过ajax发布,并返回“谢谢”消息。

我环顾了Stackoverflow,并为遇到的问题应用了答案,但仍然无法正常工作。我确实删除了event.preventDefault();
从中,以及$(“#review-
form”)。submit(function(event){,然后单击一次提交输入后,表单将按应有的方式提交,但不会发布到数据库中。

以下是#review-form的jQuery

$("#review-form").validate({
    submitHandler: function () {
        $("#review-form").submit(function (event) {
            var rating = $(this).find('input[name=rating]');
            // var rating = $(this).find('input[name=rating]').val();
            var review = $(this).find('textarea[name=review]');
            var form_settings = $(this).find('input[name=form_settings]');
            var xid = $(this).find('input[name=XID]');
            var entry_id = $(this).find('input[name=entry_id]');
            var entry_type = $(this).find('input[name=entry_type]');
            var site_id = $(this).find('input[name=site_id]');
            var first_name = $(this).find('input[name=first_name]');
            var middle_initial = $(this).find('input[name=middle_initial]');

            $.ajax({
                url: $("#review-form").attr("action"), //your server side script
                data: $(this).serialize(),
                type: 'POST',
                success: function (data) {
                    //$('#response').append('<li>' + data + '</li>');
                    $('#review-form').hide();
                    $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
                },
                error: function (jxhr, msg, err) {
                    $('#response').append('<li style="color:red">' + msg + '</li>');
                }
            });
            event.preventDefault();
        });
    }
});

更新:我删除了$(“#review-form”)。submit(function(event){}); 然后我更改了$(this).find
…,并通过指定#form-
review的表单ID进行了检索,然后通过了data参数。我注释掉所有单独的变量,只是将$(this).serialize()传递到data参数中,但这没有用。

以下代码可在chrome和firefox中使用,但在firefox中,它将关闭模式并重定向到域的首页,它应使用谢谢msg保持模式打开,就像在chrome中一样:

$("#review-form").validate({
    submitHandler: function() {

         $.ajax({
             url: $("#review-form").attr("action"), //your server side script
             data: $("#review-form").serialize(),                
             type: 'POST',
             success: function (data) {
                 $('#review-form').hide();
                 $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
             },
             error: function (jxhr, msg, err) {
                 $('#response').append('<li style="color:red">' + msg + '</li>');
             }
         });

        event.preventDefault(); 
    }
});

最终工作产品:

$("#review-form").validate({
    submitHandler: function() {

         $.ajax({
             url: $("#review-form").attr("action"),
             data: $("#review-form").serialize(),
             type: 'POST',
             success: function (data) {
                 $('#review-form').hide();
                 $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
             },
             error: function (jxhr, msg, err) {
                 $('#response').append('<li style="color:red">' + msg + '</li>');
             }
         });
    }
});

阅读 231

收藏
2020-07-26

共1个答案

小编典典

您正在插件的回调中绑定一个新的submit事件处理程序submitHandler。该处理程序不会立即触发,因为submit事件已经在进行中。

不用了 该submitHandler回调将已经preventDefault在内部插件代码中

删除这个

$("#review-form").submit(function(event) { })

并保留其中包含的所有代码 submitHandler

由于您使用serialize()的是数据…。您不需要创建任何一个单独的字段变量

2020-07-26