javascript - 如何在点击时更改提交值
问题描述
我有一个简单的表格
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片段我用来实现这个......
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?
解决方案
使用此代码$(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>
推荐阅读
- java - 天气图标字体
- vba - 如何将整个范围从 Excel 粘贴到 Lotus 作为位图?
- python-3.x - 难以用 python 代码输入训练数据集
- python - 在 Python 中使用 MultiIndex 和 to_excel 时创建的标题下方的空行
- angular - 如何将完整 Angular 应用程序的工作源代码发布到 npm?
- angularjs - 为什么 $compile 在 ng-repeat 中创建多个元素?
- .net - 作为使用免费版 Visual Studio 的 Windows Installer 设置的一部分,如何更改 VB .net 应用程序的设置?
- asp.net-mvc - MVC:提交 Ajax.Beginform 后清除模型值
- python - 在最新版本的 python pandas 中创建 pandas.Series 在 Matlab 中不起作用
- sql - 根据单个单元格中的多个条件选择记录