jQuery simple modification to disable click on image when it was clicked once
<p>jQuery simple modification to disable clicking</p>

<p>The following jQuery make use of an image submit button of a the JqPostForm form to post. </p>

<p>How to change the image from image1.png to image3.png when clicked and disable further clicking ? and how to remove the Thank you message after 2 sec ?</p>

<p>There is no need of keeping the form.</p>

<pre><code>&lt;script&gt;
$(function(){
    $("#JqPostForm").submit(function(e){
       e.preventDefault();   

        $.post("add.php",
        function(data){

                $("#message_post").html("Thank you");

        });
    });

$('#submit').hover(
            function(){ // Change the input image's source when we "roll on"
                $(this).attr({ src : 'image2.png'});
            },
            function(){ // Change the input image's source back to the default on "roll off"
                $(this).attr({ src : 'image1.png'});             }
        );

});
&lt;/script&gt;

&lt;form id="JqPostForm"&gt;

&lt;input type="image" name="submit" id="submit" src="image1.png"&gt;

&lt;/form&gt;
&lt;div id="message_post"&gt;&lt;/div&gt;
</code></pre>
