用加载gif替换提交按钮 [英] Replace submit button with loading gif
问题描述
我无论如何都不是jquery专家，我无法弄清楚这一点。
I'm not a jquery expert by any means and I cannot figure this out.
<input class="button" name="save" type="submit" onclick="$(this).replaceWith('<img src=images/loading.gif />'); console.log(this); $('#myForm').submit();" value="SUBMIT">
代码确实替换了按钮，但图像图标已损坏。但是，如果我右键单击损坏的图像并将其正确且有效的路径复制到loading.gif。
The code does replace the button but with a broken image icon. However, if I right click the broken image and copy the url its the correct and valid path to the loading.gif.
我还添加了< script> < head> 中的标签。
I also have added the <script> tags in the <head>.
任何人都有想要解决这个问题吗？
Anybody have an idea to fix this?
谢谢
推荐答案
只需保存自己头痛并把javascript放在它自己的标签中，从而消除了逃避引号的麻烦;在示例中，请注意源中images之前的/。
Just save yourself the headache and put the javascript in it's own tag, thus removing the headache of escaping quotes; in the example, notice the "/" before the "images" in the source.
注意：如果images文件夹的级别高于您调用的文件级别从，您需要将网址设为../ images / loading.gif
Note: if the images folder is in a level higher than the file you are calling from, you need to put the url as "../images/loading.gif"
标签中的javascript
javascript in the tag
<script type="javascript">
$(function(){
$("input[name='save']").click(function(e){
$(this).replaceWith('<img src="/images/loading.gif" />');
console.log(this);
$('#myForm').submit();
});
});
</script>
和你的html：
<input class="button" name="save" type="submit" value="SUBMIT">
编辑：2013年2月17日 - 替代解决方案
我意识到这可能不是当时最好的解决方案，因为将来某个时候你可能会对html进行编辑，比如你的提交按钮或你的img src，然后必须更新jquery脚本。因此，加载两个html元素，将其中一个隐藏在初始页面加载中。然后在单击期间，隐藏按钮，并显示img。这也很好，因为您不必在您的javascript中写入任何src网址。
I realized this may have not been the best solution at the time, because sometime in the future you might make edits to the html, like to either your submit button or your img src, and then would have to update the jquery script. So instead, load up both html elements, hiding one of them on the initial page load. Then during a click, you hide the button, and show the img. This is also good because you don't have to have any src urls written in your javascript.
<input class="button" name="save" type="submit" value="SUBMIT">
<img src="/images/loading.gif" />
<script type="javascript">
$("#loadingGif").hide();
$("input[name='save']").click(function (e) {
$(this).hide();
$("#loadingGif").show();
console.log(this);
$('#myForm').submit();
});
<script type="javascript">
这篇关于用加载gif替换提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
