jQuery simple modification to disable click on image when it was clicked once

开发者_C百科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>

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>
   

i took just the part of submitting form:

$("#JqPostForm").submit(function(e){
   e.preventDefault();   

    $.post("add.php",
    function(data){
            $("#submit").attr('src','image3.png');
            $("#submit").attr('disabled',true);
            $("#submit").unbind('click');
            $("#message_post").html("Thank you");

    });
});

I'm assuming you still want it to act like a submit button. I would bind a click handler, then change the image and disable the input and unbind the handler:

$('#submit').click(function(e){ 
    $(e.target).unbind('click').attr('src','image3.png').attr('disabled', true);
});

I missed the part about removing the thank you message... You just need to add a timeout to your $.post callback, like:

$.post("add.php",
    function(data){
        $("#message_post").html("Thank you");
        setTimeout("$('#mesage_post').html('');", 5000);
    });

You can always use the jquery .one()

http://api.jquery.com/one/