Как изменить значение отправки при клике

Question

У меня есть простая форма

HTML

<form action="@Url.Action("Controler", "FES")" method="POST">
 <button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>

Время запроса при отправке может иногда быть длинным (более 30 с, до н.э. бизнес-логики на большомфайл ...)

Я хочу изменить значение кнопки после того, как пользователь нажал на нее.Цель состоит в том, чтобы отобразить потрясающий загрузчик шрифтов вместо исходного текста (<i class="fas fa-spinner fa-pulse"></i>).Существует фрагмент кода jQuery, который я использую для достижения этой цели ...

jQuery

$("#upload-fes-btn-control").click(function () {
    $(this).attr('value', '<i class="fas fa-spinner fa-pulse"></i>');
});

Я столкнулся с ошибкой из-за этого кода в моем контроллере

Потенциально опасное значение Request.Form было обнаружено с клиента

Контроллер

if (Request.Form["upload"] != null)
{
   //Logic with ViewModel...
}

Как изменить текстотображается в кнопке из текста в загрузчик изображений fa без этой ошибки?

Answer 1

используйте этот код $(this).html('<i class="fa fa-spinner fa-pulse"></i>');

$("#upload-fes-btn-control").click(function (e) {
    e.preventDefault();
    $(this).html('<i class="fa fa-spinner fa-pulse"></i>');
    //example after page load
    setTimeout(function(){ 
        $("#upload-fes-btn-control").html('');
        $("#upload-fes-btn-control").html('Contrôler');
    }, 5000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form action="@Url.Action("Controler", "FES")" method="POST">
 <button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>