单击按钮时阻止表单提交

本文关键字：表单提交 按钮 单击 | 更新日期: 2023-09-27 18:34:31

我在表单中有一个按钮。问题是当我单击它时，它不执行服务器端功能。是否可以在执行服务器功能和客户端验证时阻止表单提交？

提前谢谢。

html(在表单内( 

  <button class="submit" runat="server" id="v4"  onserverclick="v4_Click" >Validate</button>

jquery

 $('#v4').click(function (event) {
             if (validation()) {
                 slideToStep(5);
             }
             return false;
         });

C#

protected void v4_Click(object sender, System.EventArgs e)
        {
            System.Diagnostics.Debug.Write("test");
        }

单击按钮时阻止表单提交

Is it possible to prevent form submission是的您可以简单地在jQuery上写入e.preventDefault()/Return false()单击按钮

但同样While using server side function我没有得到这个

我相信

你可以通过将event.preventDefault()绑定到表单的submit事件而不是按钮的click事件来实现你想要的。

  1. 为按钮设置一个onclick，以调用提交表单的函数。

    <button class="submit" id="v4" onclick="SubmitForm();" runat="server" onserverclick="v4_Click" >Validate</button>

  2. 设置 SubmitForm() 函数以提交表单，然后将函数绑定到提交事件： 

函数 SubmitForm(( {    $('#form1'(.submit((;}$(函数 (( {    $('#form1'(.submit(function (event( {        if (validation((( {            幻灯片到步骤(5(;        }        还        {            验证失败，阻止表单提交。            event.preventDefault((;        }    });});

问题出在你的 javascript 代码中，在你的情况下，return false总是被调用，相反，你应该只在验证失败时调用它：

$('#v4').click(function (event) {
     if (validation()) {
         slideToStep(5);
     } else{
         return false;
     }
});

编辑：

基本上，如果你想调用button_click事件，你需要提交表单，在你的情况下，我会使用WebMethod来调用ajax的服务器端验证函数。像这样：

C#：

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string Validate(string params)
{
    // your validations
    return "Received : " + params;
}

jquery：

$(document).ready(function() {
  $("#v4").click(function() {
     $.ajax({
      type: "POST",
      url: "Default.aspx/Validate",
      data: "{params: 5 }",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg) {
         alert(msg.d);
      }
});

另类：

你也可以使用customValidator，ASP将为你完成所有jquery的工作。

相关文章：