Question

我有一个表单，它有两种不同的用途（创建新帖子或更新现有帖子），显示在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>

Answer 1

Javascript的变量带有函数范围，因此要将按下的按钮传递给成功处理程序，请尝试以下操作：

 $(':button').click(function(){
       var type = $(this).attr('id');
       $('#contact').validate({  
          submitHandler: function() {
             $.ajax({success: function(data) {if(type===''){}} });
          };
       });
    });

我省略了你已经知道的代码 - 这只是你的submithandler和successhandler for validate和ajax方法与传递的变量

Answer 2

另一种选择是让你的按钮都做一个ajax帖子。您可以先查看表单来检查表单是否有效。有效（）请参阅docs。 ajax post成功调用“关闭”选项也会关闭该框。

更新：您还可以让提交按钮在页面的某个位置设置一个字段，并让您的成功处理程序读取该字段以确定它是否应该关闭该框。得到一点点hacky，但它会工作。

Answer 3

我不确定你的sumbit处理程序现在是如何调用的，但是删除它并使用：

$('#submit').bind('click', function (e) {
   e.preventDefault(); 
   submitHandler(false);
});
$('#saveclose').bind('click', function(e) {
   e.preventDefault();
   submitHandler(true);
});

总结表格应该有效。我的意思是你将有一个传递给sumbitHandler的布尔值，如果需要关闭它将是真的。

在使用jQuery Validate进行验证之前获取提交按钮的ID

3 个答案: