使用 jquery 将提交按钮更改为加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6728787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change submit button to a loading image with jquery
提问by key2starz
On a lot of sites lately, I've seen buttons being replaced with loading/thinking images after they are pressed, to prevent double clicks and make sure the user knows something is going on before the page flickers off. In this case, nothing asynchronous is actually happening -- just a regular form submit.
最近在很多网站上，我看到按钮在按下后被加载/思考图像替换，以防止双击并确保用户在页面闪烁之前知道正在发生的事情。在这种情况下，实际上没有异步发生——只是一个常规的表单提交。
How would I recreate this with jQuery?
我将如何用 jQuery 重新创建它？
回答by sangam
Go the simplest way. Say your button is btnSubmit.
走最简单的路。假设您的按钮是 btnSubmit。
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />
<div id="divMsg" style="display:none;">
<img src="../images/loading.gif" alt="Please wait.." />
</div>
Now using jquery, on click of the button:
现在使用 jquery，点击按钮：
<script type="text/javascript">
$('#btnSubmit').click(function(){
$(this).attr('disabled','disabled');
$('#divMsg').show();
//your client side validation here
if(valid)
return true;
else
{
$(this).removeAttr('disabled');
$('#divMsg').hide();
return false;
}
});
</script>
The submit button will be disabled, the animating image loading.gif will show up. And the page will postback. The benefit is that if validation fails you can again enable the submit button and hide the loading image. In such case, obviously you will show the error message.
提交按钮将被禁用，动画图像 loading.gif 将显示。该页面将回发。好处是如果验证失败，您可以再次启用提交按钮并隐藏加载图像。在这种情况下，显然您将显示错误消息。
回答by Nicolae Albu
Although simply replacing the submit with an image might work, removing the button might prevent the submit input's value from being sent (like when it's disabled). This can cause problems for some applications that rely on the submit's value being sent to the server - for example testing which submit button the user has pressed or using the same controller for many actions.
虽然简单地用图像替换提交可能会起作用，但删除按钮可能会阻止提交输入的值被发送（例如当它被禁用时）。这可能会导致某些依赖于将提交值发送到服务器的应用程序出现问题 - 例如测试用户按下了哪个提交按钮或对许多操作使用相同的控制器。
For those cases, you can use another method that works just as good - hiding the submit and adding an image:
对于这些情况，您可以使用另一种同样有效的方法 - 隐藏提交并添加图像：
$(document).ready(function() {
$('input[type="submit"]').click(function() {
$(this).css('display', 'none');
$('<img>').attr('src', 'http://www.mayla.ro/App_Themes/Glass/Editors/Loading.gif').insertAfter($(this));
});
});
回答by phpawy
My way of doing this:
我这样做的方式：
$(document).ready(function () {
$('.class_name').click(function () {
$(this).parent().append('<img src="data:image/gif;base64,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" />');
$(this).hide();
});
});
回答by gilly3
Use .replaceWith():
使用.replaceWith()：
$(".submitButton").click(function () {
$(this).replaceWith("<img src='loading.gif'>");
});
回答by Sandip Ransing
Event can be binded on form as a standard practice
事件可以作为标准做法绑定在表单上
<script type="text/javascript">
$('form').submit(function(){
$('#btnSubmit').attr('disabled','disabled');
$('#divMsg').show();
//your client side validation here
if(valid)
return true;
else
{
$(this).removeAttr('disabled');
$('#divMsg').hide();
return false;
}
});
</script>
回答by Diff.Thinkr
Simply remove the submit button and replace it with your image (do this from an onclick event).
只需删除提交按钮并将其替换为您的图像（从 onclick 事件中执行此操作）。
回答by mymotherland
I think you are looking for this one ,button have this function updatemycartpage()in onclick event
我想你正在寻找这个，按钮updatemycartpage()在 onclick 事件中有这个功能
<script language="JavaScript">
function updatemycartpage(index,itemId,itemnumber){
jQuery('#Page').html('<p><center><img src="/images/ajax-loader.gif"/></center></p>');
$.post("/cart.php", {
'hidItemId[]' : itemId,
'hidLineId[]' : itemnumber
},function(data){
document.location.href ="/cart.php";
});
}
</script>
回答by JeremyWeir
This replaces all submit inputs with an image onsubmit of the form
这将所有提交输入替换为表单提交时的图像
$(function() {
$("form").submit(function() {
$(":submit").replaceWith('<img src="/loading.gif" />');
});
});
You may also want to disable submitting the form again, in case the user hits enter in a form field...
您可能还想禁用再次提交表单，以防用户在表单字段中点击输入...
$(function() {
// only run this handler on the first submit of the form
$("form").one("submit", function() {
// replace all submit inputs with an image
$(":submit").replaceWith('<img src="/loading.gif" />');
// don't let this form be submitted again
$(this).submit(function() { return false; });
});
});
回答by citronsmurf
Any of the above "replacing" strategies will work, but keep one thing in mind: If you aren't posting back (e.g. webforms), but posting to a different page (e.g. MVC), the user will be able to click back. At this point the button will be hidden and all you will see is a spinner.
上述任何“替换”策略都可以使用，但请记住一件事：如果您不是回发（例如 webforms），而是发帖到不同的页面（例如 MVC），用户将能够单击回。此时按钮将被隐藏，您将看到的只是一个微调器。
I kept running into this problem and found that if you set the unloadattribute of the BODYtag to a blank "", this will sort of "default" the page back to its original state. I guess this clears out your browser's cached version of the page so it will know to go back to the original version where the spinner was hidden. After I added this blank unload, it fixed the issue. I've tried it on FF and Chrome so far
我一直遇到这个问题，发现如果你将标签的unload属性设置BODY为空白""，这将使页面“默认”恢复到其原始状态。我想这会清除您浏览器的页面缓存版本，因此它会知道返回到隐藏微调器的原始版本。在我添加了这个空白卸载后，它解决了这个问题。到目前为止，我已经在 FF 和 Chrome 上试过了
