如何在点击提交按钮后显示图片？

我有这样的架杆GIF图片，默认情况下不可见：如何在点击提交按钮后显示图片？

 <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p>

当用户点击在窗体底部提交按钮，我想是要显示GIF，并提交按钮消失。基本上，提交按钮应该由此加载条替换，以便用户知道在再次单击之前等待。我相信我可以使用一些onclick javascript ... 帮助？

是你使用AJAX提交按钮，或者是提交表单？ – Elangovan

@Elangovan它只是提交表单。没有什么花哨。 Plain ol'html is my forte' – robhardgood

你可以这样用jQuery做到这一点：

添加的jQuery到您的网站

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

添加以下代码里面<script>标签或外部JS文件。引号之间的文本是您的提交按钮的选择器。

$(document).ready(function(){ 
    $('#submit-btn-id').click(function(){ 
     $(this).hide(); 
     $('.loadingImg').show(); 
    }); 
});

2011-09-06 02:28:36 marissajmc

。@ImgImg与p.loadingImg之间的区别在@Andre的响应中有什么区别？此外，＃提交应该是#theIDofthesubmitbutton，对不对？ – robhardgood

您可以使用p.loadingImg或.loadingImg - 它们指向相同的元素。如果“IDofthesubmitbutton”是你提交按钮的ID，那么你就是用它。 – marissajmc

呜呜呜，我终于搞定了！请忽略我所有的noob评论...：D感谢@ marissa.c和所有人 – robhardgood

$(function(){ 
    $('input[type="submit"]').click(function(){ 
     $('p.loadingImg').show(); 
    }); 
});

1-您还可以禁用提交按钮，以避免第二次点击，使用$（本）.attr（ '禁用'， '禁用'）;在点击事件

2 - 如果您的形式是由AJAX submited，这是更好地为您在Ajax调用

2011-09-06 02:29:11 Andre

请原谅我的总jquery-ignorance，但是如何从我的提交按钮调用jquery函数？我只是使用onclick =“”事件？ – robhardgood

@robhardgood，@安德烈的JS代码应该放在'

回答