使用输入按钮添加图像加载器到表单

Question

I have created a wall like this in facebook using php and jquery. There is a textarea and an input type=button, and using jquery when the user posts something it is displayed under the text area without renew the page. I want to enable my script using an image loader named "loader.gif", so that after press submit button the loader start working until the new post appear. Any idea hot to do this?

<?php

<textarea rows="3"  id="comment_text" placeholder="share an update..."   style="font-size:11pt;  color:#363636;  resize:none; ">    </textarea>  

 <input type="button" id="comment_process"  style=""/>

?>

Answer 1

You want to place the loader image where it should ultimately be, but with display:none; in its CSS. Then, when the form is submitted, simply toggle it on.

HTML

<img class='loader' src='images/loader.gif' style='display:none;' />

jQuery

$('form').submit(function(){
    $('.loader').show();
});

If you are submitting the form using ajax, you may need to hide it again if a success/error is returned. If you are doing a true form submission, the page will load to a different location anyway and there is no need to re-hide the image.