如何在点击时更改提交值

Posted 2023-05-09

【中文标题】如何在点击时更改提交值

【英文标题】：How to change submit value on click

【发布时间】：2019-09-17 21:57:02

【问题描述】：

我有一个简单的表格

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>

提交时的请求时间有时可能会很长（超过30s，bc of business logic on big file...）

我想在用户单击按钮后更改按钮的值。目标是显示字体很棒的加载器而不是初始文本 (<i class="fas fa-spinner fa-pulse"></i>)。有 jQuery sn-p 我用来实现这个...

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...

如何将按钮中显示的文本从 text 更改为 fa image loader 而不会引发该错误？

【问题讨论】：

隐藏它并显示加载器

实现此目的的一种方法是使用一个隐藏的 div，其中包含加载程序。然后单击，隐藏按钮并使用加载器显示隐藏的 div。

不要将 HTML 加载器设置为按钮的值，改用$(this).html('<i class="fas fa-spinner fa-pulse"></i>');

怎么样：jsfiddle.net/khrismuc/q187vLtu

【参考方案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>