CODEWITHSUNDEEP
javascriptjquery
EnexoOnoma
EnexoOnoma

Reputation: 8836

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

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>

Upvotes: 3

Views: 9524

Answers (4)

Mr. Smee
Mr. Smee

Reputation: 960

You can always use the jquery .one()

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

Upvotes: 0

Chris Pickett
Chris Pickett

Reputation: 2822

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

Upvotes: 1

Laurent
Laurent

Reputation: 3837

  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>

Upvotes: 5

Marek Sebera
Marek Sebera

Reputation: 40621

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

    });
});

Upvotes: 1

Related Questions