我有一个模式表单,用户必须完成表单(否则验证将显示必填字段错误消息),然后单击“提交输入类型”,不执行任何操作,然后再次单击它,然后将通过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>'); } }); } });
您正在插件的回调中绑定一个新的submit事件处理程序submitHandler。该处理程序不会立即触发,因为submit事件已经在进行中。
submit
submitHandler
不用了 该submitHandler回调将已经preventDefault在内部插件代码中
preventDefault
删除这个
$("#review-form").submit(function(event) { })
并保留其中包含的所有代码 submitHandler
由于您使用serialize()的是数据…。您不需要创建任何一个单独的字段变量
serialize()