What is the best way to show a loader and disable the button when we submit a form:
@using (Ajax.BeginForm(MVC.Account.Login(), new AjaxOptions { OnSuccess = "onLoginSuccess" }, new { @id = "loginForm" }))
{
<div id="logbtn">
<input type="submit" name="invisible" class="subinvisible"/>
<p>@HeelpResources.AccountLoginViewLoginButtonLabel</p>
<img src="~/Content/Images/ui-symb-arrow-right-white-15x15.png" width="13" height="12" />
</div>
}
The loader image file is
<img src="~/Content/Images/ui-loader-white-16x16.gif" />
Maybe using the OnBegin from the BeginForm to show the loader and the OnComplete to hide-it? But how can I change the image?
Any sugestion to find nice quality free loaders?
Thanks
Put your loading image tag inside a div tag like this:
<div id="loading">
<img src="~/Content/Images/ui-loader-white-16x16.gif" />
</div>
In your CSS file:
div#loading { display: none; }
And, in your form:
@using (Ajax.BeginForm(MVC.Account.Login(),
new AjaxOptions { OnSuccess = "onLoginSuccess", LoadingElementId = "loading",
OnBegin = "onLoginBegin" },
new { @id = "loginForm" }))
{
<div id="logbtn">
<input type="submit" name="invisible" class="subinvisible"/>
<p>@HeelpResources.AccountLoginViewLoginButtonLabel</p>
<img src="~/Content/Images/ui-symb-arrow-right-white-15x15.png" width="13" height="12" />
</div>
}
And, add a script to your View:
<script type="text/javascript">
function onLoginBegin()
{
// Disable the button and hide the other image here
// or you can hide the whole div like below
$('#logbtn').hide();
}
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With