Как запустить JavaScript код при успешной отправке формы?

Question

У меня есть Asp. Net MVC веб-приложение. Я хочу запустить некоторый код для успешного ответа метода 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(), но я хочу запустить функцию FunctionToBeCalled() после ответа APIMethod().

Поэтому я внес следующие изменения, ссылаясь на эту ссылку. Но теперь 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');}

Так что я не могу решить проблему.

Answer 1

Я думаю, вам следует удалить тег бритвенной формы, если вы хотите опубликовать свою форму с помощью ajax вызова и добавить URL-адрес post api непосредственно в запрос ajax вместо того, чтобы получать его из тега бритвенной формы с помощью id:

Вот пересмотренная версия вашего кода:

<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');}

Answer 2

Главное здесь то, что я не использовал кнопку отправки, вместо этого я использовал ссылку и обработал все остальное в файле js. Таким образом, форма никогда не будет отправлена, если файл js отсутствует на странице, и с этим файлом js он инициирует отправку формы самостоятельно, а не отправку формы при нажатии кнопки отправки

Вы можете адаптировать это к своему решению, чтобы увидеть, как оно реагирует. У меня есть что-то подобное в производстве, и оно отлично работает.

(function() {
    $(function() {
        var _$pageSection = $('#ProccessProductId');
        var _$formname = _$pageSection.find('form[name=productForm]');

        _$formname.find('.buy-product').on('click', function(e) {

          e.preventDefault();

          if (!_$formname.valid()) {
            return;
          }
          var formData = _$formname.serializeFormToObject();

          //set busy animation

          $.ajax({
            url: 'https://..../', //_$formname.attr('action')
            type: 'POST',
            data: formData,
            success: function(content) {
              AnotherProcess(content.Id)
            },
            error: function(e) {
              //notify user of error 
            }
          }).always(function() {
            // clear busy animation
          });
        });


        function AnotherProcess(id) {

          //Perform your operation
        }
      }
    }

<div class="row" id="ProccessProductId">

  @using (Html.BeginForm("APIMethod", "Configuration", FormMethod.Post, new { @class = "form-horizontal", name="productForm" id = "formID" })) {
  <li class="buy-product"><a href="#">Save & Proceed</a></li>
  }

</div>

Answer 3

Если вы хотите выполнить какую-то работу в случае успеха, потерпите неудачу и т. Д. c. Ситуация с отправкой формы, тогда вам нужно будет использовать Ajax вызов на ваш взгляд. При использовании ASP.NET MVC вы можете попробовать следующий подход.

Просмотр:

$('form').submit(function (event) {
    event.preventDefault();

    var formdata = $('#demoForm').serialize();
    //If you are uploading files, then you need to use "FormData" instead of "serialize()" method. 
    //var formdata = new FormData($('#demoForm').get(0)); 

    $.ajax({
        type: "POST",
        url: "/DemoController/Save",
        cache: false,
        dataType: "json",
        data: formdata,

        /* If you are uploading files, then processData and contentType must be set to 
        false in order for FormData to work (otherwise comment out both of them) */
        processData: false, //For posting uploaded files
        contentType: false, //For posting uploaded files
        //

        //Callback Functions (for more information http://api.jquery.com/jquery.ajax/)
        beforeSend: function () {
            //e.g. show "Loading" indicator
        },
        error: function (response) {
            $("#error_message").html(data);
        }, 
        success: function (data, textStatus, XMLHttpRequest) {
            $('#result').html(data); //e.g. display message in a div
        }, 
        complete: function () {
            //e.g. hide "Loading" indicator
        },
    });
});

Контроллер :

public JsonResult Save(DemoViewModel model)
{
    //...code omitted for brevity
    return Json(new { success = true, data = model, message = "Data saved successfully." 
}

Обновление: Если SubmitButton вызывает метод JavaScript или использует вызов AJAX, необходимо выполнить проверку в этом методе вместо нажатия кнопки, как показано ниже. В противном случае запрос по-прежнему отправляется на Controller без проверки.

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

Надеюсь, это поможет.

Answer 4

Обновите свою функцию следующим образом.

$('#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 ("form") выдавала ошибку. Для этого вам необходимо добавить следующие библиотеки 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> 

Answer 5

Вам необходимо использовать Ajax .BeginForm, эта статья должна помочь [https://www.c-sharpcorner.com/article/asp-net-mvc-5-ajax-beginform-ajaxoptions-onsuccess-onfailure/]