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

问题描述：

 <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(); 
    }); 
});

。@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调用

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

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

@迈克尔哈伦哦，我明白了。谢谢。 – robhardgood

答

你可以使用jQuery提交事件处理程序处理这一点。

$("#form1").submit(function() 
       { 
       $('#submit1').hide(); 
       $('.loadingImg').show(); 
       return true; 
       });

检查此链接API参考http://api.jquery.com/submit/

这会在提交时隐藏整个表单。 OP要求只有提交按钮应该消失 – marissajmc

@marissa，更新我的脚本以包含按钮ID而不是'this' – Elangovan

答

这里是这样做没有jQuery的的一种方法：

<form id="f"> 
    <input /> 
    <p id="p" style="display:none;">Loading!</p> 
    <input id="b" type="submit" /> 
</form> 
<script type="text/javascript"> 
(function (d) { 
    d.getElementById('f').onsubmit = function() { 
    d.getElementById('b').style.display = 'none'; 
    d.getElementById('p').style.display = 'block'; 
    }; 
}(document)); 
</script>

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

相关推荐