TwitterBootStrap 提交按钮仍然提交表单

Posted 2023-02-25

【中文标题】TwitterBootStrap 提交按钮仍然提交表单

【英文标题】：TwitterBootStrap Submit Button still submits the form

【发布时间】：2014-04-09 20:54:28

【问题描述】：

我有以下带有 onclick 功能的 Bootstrap 提交按钮。

@html.Bootstrap().SubmitButton().Text("Submit Final").Id("btnSubmitBottom").Style(ButtonStyle.Primary).HtmlAttributes(new  onclick = "return SubmitCheck('Submit Final')", name = "command", value = "Submit Final" ).Disabled(blnButtonsDisabled)

SubmitCheck 有这个调用另一个函数并返回文本值的 ajax 代码。根据该值，我向用户显示一个确认框（true）或一个 Bootbox modal（false）。

               $.ajax(
                    type: "GET",
                    url: "professionalismSubmitFinal",
                    data:  teacherID: CurrentTeacherID ,
                    dataType: "text",
                    error: function (xhr, status, error) 
                    ,
                    success: function (textVal) 
                        if (textVal == 'True') 
                            if (confirm("Are you sure you want to submit this as final?")) 
                                $('#IsPublic').val(true);
                                $('#IsFinal').val(true);
                                submitFormOkay = true;
                                return true;
                            
                            else 
                                $('#IsFinal').val(false);
                                return false;
                             //cancelled from modal
                         else 
                            bootbox.alert("You cannot Submit until this has been Submitted as Final.");
                            return false;
                        
                    
                );

问题是当 Ajax 调用返回 'False' 时，引导箱警报正确显示，但随后表单也提交了。

我做错了什么？我认为onclick = return SubmitCheck 会阻止这种行为？

【问题讨论】：

您的return 语句是从匿名的success 回调函数返回的，而不是从SubmitCheck() 返回的。您需要阻止表单的默认操作，等待 ajax 调用完成，然后重新提交表单，可能在删除处理程序或设置一些标志以让提交通过之后。

@JasonP - 你有一个例子可以告诉我如何做到这一点吗？

【参考方案1】：

也许按钮点击事件上的event.preventDefault();会对你有所帮助

$("#yourButton").click(function(event) 
    event.preventDefault();
);

希望我正确理解了您的问题。

【讨论】：

如果它通过了我所有的检查，那么我该如何提交表单呢？