问题描述
|
我有一个具有两种不同用途(创建新帖子或更新现有帖子)的表单,该表单显示在fancybox弹出窗口中。
我想使用两个按钮来提交表单; \'保存\'和\'保存并关闭\'。 “保存”按钮将只提交表单,并从服务器接收带有时间戳的“成功”消息(因此我可以显示“最后保存的”消息)。
\“保存并关闭\”将从服务器返回一条成功消息,并关闭fancybox。
我的麻烦是,我不知道如何告诉提交处理程序单击了哪个提交按钮,因此它知道是成功关闭框还是仅显示时间戳。
我在考虑是否可以捕获提交按钮的ID,因为它击中了验证程序,可以将其传递给成功处理程序...
这是我的验证器
$(\'#contact\').validate({
rules: {
title: {
required: true
},comments: {
required: true,maxlength: 200
}
},messages: {
comments: {
maxlength: \"Too much text. 200 chars. max.\"
}
},submitHandler: function() {
$(\'#loading_contact\').show();
var formData = $(\"#contact\").serializeArray();
$.ajax({
type: \"POST\",url: \"admin.cfc?method=createPosting&returnformat=json\",data: formData,dataType: \"json\",cache: false,success: function(data) {
$(\'#formwrapper\').empty();
$(\'#formwrapper\').html(data.message);
}
});
}
});
还有我的表格
<cfform name=\"contact\" id=\"contact\">
<cfif arrayLen(errors)>
<p>Please correct the following error(s):
<ul><cfloop index=\"e\" array=\"#errors#\">
<li>
<cfoutput>#e#</cfoutput>
</li>
</cfloop>
</ul>
</p>
</cfif>
<cfinput type=\"hidden\" id=\"job_id\" name=\"job_id\">
<p><label for=\"title\" id=\"ltitle\">Position Title</label></p>
<cfinput style=\"color:black\" type=\"text\" id=\"title\" class=\"oneliner required\" name=\"title\">
<p><label for=\"comments\" id=\"lcomments\">Description</label></p>
<cftextarea style=\"color:black;height:600px;\" id=\"comments\" name=\"comments\" class=\"required\"></cftextarea>
<p style=\"padding:15px 0 0 0;\"><cfinput style=\"background:none;border:none;text-decoration:underline;color:black;\" type=\"submit\" id=\"submit\" value=\"Save\" name=\"submit\"><img id=\"loading_contact\" src=\"../images/loading.gif\" /> <cfinput style=\"background:none;border:none;text-decoration:underline;color:black;\" type=\"submit\" id=\"saveclose\" value=\"Save and Close\" name=\"saveclose\"><img style=\"display:none;\" id=\"save_close\" src=\"../images/loading.gif\" /></p>
</cfform>
解决方法
Javascript的变量具有函数作用域,因此要将按下的按钮传递给成功处理程序,请尝试以下操作:
$(\':button\').click(function(){
var type = $(this).attr(\'id\');
$(\'#contact\').validate({
submitHandler: function() {
$.ajax({success: function(data) {if(type===\'\'){}} });
};
});
});
我省略了您已经知道的代码-这只是您的带有传递变量的validate和ajax方法的commithandler和successhandler
, 另一个选择是让两个按钮都执行ajax发布。您可以先通过form.valid()查看文档来检查表单是否有效。 \“ close \”选项的ajax发布成功调用也会关闭该框。
更新:您还可以使提交按钮在页面上的某个位置设置一个字段,并让成功处理程序读取该字段以确定是否应关闭该框。变一点点,但可以。
, 我不确定现在如何调用您的sumbit处理程序,但是将其删除并使用:
$(\'#submit\').bind(\'click\',function (e) {
e.preventDefault();
submitHandler(false);
});
$(\'#saveclose\').bind(\'click\',function(e) {
e.preventDefault();
submitHandler(true);
});
总结表格应该起作用。我的意思是您将传递给sumbitHandler的布尔值,如果需要关闭则为true。