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

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>

you want to consider more than just disabling the submit button. There are multiple ways to submit any form, particularly with keyboard navigation. See my similar answer here. http://stackoverflow.com/questions/6201505/temporary-disabling-a-submit-button/6201614#6201614 — Jordan, Aug 22 '11 at 17:51

score 5 · Accepted Answer · answered Aug 22 '11 at 17:43

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

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>

Chris Pickett · Answer 2 · 2011-08-22T17:48:41.100

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

score 1 · Answer 3 · answered Aug 22 '11 at 17:43

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");

    });
});

score 0 · Answer 4 · answered Aug 22 '11 at 17:56

0

You can always use the jquery .one()

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

answered Aug 22 '11 at 17:56

Mr. Smee

968
11
28

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

4 Answers4