Question

jQuery simple modification to disable clicking

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

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 ?

There is no need of keeping the form.

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

});
</script>

<form id="JqPostForm">

<input type="image" name="submit" id="submit" src="image1.png">

</form>
<div id="message_post"></div>

Answer 1

1. Use $(this).unbind('click').attr('disabled', 'disabled'); on the submit button to disable it.

2. Use setTimeout(function () { $("#message_post").hide(); }, 2000); to hide the message after 2 seconds.

   <script>
   $(function(){
     $("#JqPostForm").submit(function(e){
      e.preventDefault();   
   
       $.post("add.php",
       function(data){
   
               $("#message_post").html("Thank you");
               setTimeout(function () { $("#message_post").hide(); }, 2000);
       });
   });
   
   $('#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'}).unbind('click').attr('disabled', 'disabled');
        }
       );
   
   });
   </script>
   
   <form id="JqPostForm">
   
   <input type="image" name="submit" id="submit" src="image1.png">
   
   </form>
   <div id="message_post"></div>