如何在表单提交成功时运行JavaScript代码？

我有一个Asp.NETMVCWeb应用程序。我想对表单提交时调用的API方法的成功响应运行一些代码

我有下面的代码

@using (Html.BeginForm("APIMethod", "Configuration", FormMethod.Post, new { @class = "form-horizontal", id = "formID" }))
{

}

$('#formID').submit(function (e) {
$.validator.unobtrusive.parse("form");
e.preventDefault();
if ($(this).valid()) {
    FunctionToBeCalled(); //JS function
}
}

但是

FunctionToBeCalled（）

函数在

APIMethod（）

之前被调用，但是我想在响应

APIMethod（）

之后运行

FunctionToBeCalled（）

函数

因此，我通过引用链接进行了以下更改。但是现在APIMethod被调用了两次

$('#formID').submit(function (e) {
$.validator.unobtrusive.parse("form");
e.preventDefault();
if ($(this).valid()) {
//Some custom javasctipt valiadations
    $.ajax({
        url: $('#formID').attr('action'),
        type: 'POST',
        data: $('#formID').serialize(),
        success: function () {
            console.log('form submitted.');
            FunctionToBeCalled(); //JS function
        }
    });

}
}
function FunctionToBeCalled(){alert('hello');}

---

因此，我无法解决这个问题。

您需要使用Ajax.BeginForm，这篇文章应该有助于[]

如果您想在表单提交的成功、失败等情况下执行一些工作，那么您需要在视图中使用

Ajax

调用。当您使用ASP.NET MVC时，可以尝试以下方法

查看：

控制器：

更新：如果SubmitButton调用

JavaScript

方法或使用

AJAX

调用，则应使用此方法进行验证，而不是如下所示的单击按钮。否则，请求仍将发送到

控制器

，无需验证

function save(event) { 
    //Validate the form before sending the request to the Controller
    if (!$("#formID").valid()) {
        return false;
    }
    ...
}

---

希望这有帮助。

更新您的函数，如下所示

$('#formID').submit(function (e) {
    e.preventDefault();
    try{    
      $.validator.unobtrusive.parse("form");          
      if ($(this).valid()) {              
          $.ajax({
              url: $('#formID').attr('action'),
              type: 'POST',
              data: $('#formID').serialize(),
              success: function () {
                  console.log('form submitted.');
                  FunctionToBeCalled(); //JS function                      
              }
          });    
      }
    }
    catch(e){
      console.log(e);
    }                

});

检查浏览器控制台的获取错误。上述代码将阻止提交表单

我认为行$.validator.unobtrusive.parse（“表单”）抛出了错误。 为此，您需要添加以下jQuery库

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script> 

---

这里最重要的一点是，我没有使用提交按钮，而是使用了一个链接，并在js文件中处理了其余部分。这样，如果js文件不在页面上，表单将被提交，并且使用此js文件，当单击submit按钮时，它将自行启动表单提交，而不是表单提交

您可以根据您的解决方案对其进行调整，以了解其响应方式。我有这样的东西在生产中，它的作品很好

（函数（）{
$（函数（）{
var$pageSection=$（'processProductId'）；
var$formname=$pageSection.find（'form[name=productForm]'）；
_$formname.find（'.buy product'）。on（'click'，函数（e）{
e、 预防默认值（）；
如果（！\u$formname.valid（））{
返回；
}
var formData=$formname.serializeFormToObject（）；
//设置忙动画
$.ajax({
网址：'https://..../“，//”$formname.attr（“操作”）
键入：“POST”，
数据：formData，
成功：功能（内容）{
另一个进程（content.Id）
},
错误：函数（e）{
//通知用户错误
}
}).always（函数（）{
//清除忙动画
});
});
函数另一个进程（id）{
//执行您的操作
}
}
}

@使用（Html.BeginForm（“APIMethod”，“Configuration”，FormMethod.Post，new{@class=“form horizontal”，name=“productForm”id=“formID”}））{

}

如果您想使用ajax调用发布表单，并将post api URL直接添加到ajax请求中，而不是使用id从razor表单标记中获取，我认为您应该删除razor表单标记：

以下是您的代码的修订版本：

<form method="post" id="formID">
    <!-- Your form fields here -->
    <button id="submit">Submit</button>
</form>

---

只需传递一个参数并使用一个条件语句来确定值是否可用。一旦可用，就执行操作。

success:function（text）{if（text）{FunctionToBeCalled（）}

APIMethod

被调用两次，而不是JS方法

FunctionToBeCalled（）

addfunctiontobecalled（）函数也是..@MohammedShafeek updatedadd返回false；在关闭$（'#formID'）之前。提交（函数（e）{will sove..我还必须在表单提交时在javascript端进行一些自定义验证。这个问题应该可以帮助您完成我尝试了您的代码，它给出了相同的问题。

Save

被调用了两次。您可以尝试使用（Html.BeginForm（“APIMethod”，“Configuration”，FormMethod.Post，new{@class=“form horizontal”，id=“formID”}{}块？只需尝试使用普通的

html表单

？以及如何调用javascript函数save？如果我从代码中删除

html.begin.

行。如何

$（'form'）。提交（

将被调用。你确定你在我的回答中使用了完全相同的代码吗？因为我总是使用这种方法，而且效果很好。

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script> 

<form method="post" id="formID">
    <!-- Your form fields here -->
    <button id="submit">Submit</button>
</form>

$('#submit').on('click', function (evt) {
        evt.preventDefault();
        $.ajax({
            url: "/Configuration/APIMethod",
            type: 'POST',
            dataType : 'json',
            data: $('#formID').serialize(),
            success: function () {
               console.log('form submitted.');
               FunctionToBeCalled(); //JS function
           }
       });
});

function FunctionToBeCalled(){alert('hello');}