JavaScript/jQuery Track Number of Image Button Clicks

Question

Sorry for a this newbie question, so please be patient with me ;) I am still studying JavaScript/jQuery.

My goal is to ensure that the user will click the image button only once (to avoid having duplicate values due to duplicate form submit).

Here's the approach that I'm going to do:

Since the button is an image, I could not just disable it after first button click. I could hide the image button but I don't think that's a good idea because the user might wonder what happened to the button. So I thought I could just create a global variable in JavaScript to keep track how many times the user clicked the button across duplicate browser tabs .

Here's my sample code:

HTML

<html>
     <head><title>Global Variable Test 1</title></head>
     <body>
           <script type="text/javascript" src="clickCount.js"></script>
           <a href="#" onClick="countClicks();"><img src="arrow.gif" /></a>
     </body>
</html>

JavaScript

<!-- hide script from old browsers
  var counter = 0;
  function countClicks() {
        counter++;
        if(counter > 1)
       alert("Waah, stop clicking!");
        else
       alert('Number of clicks:' + counter);
  }
// end hiding script from old browsers -->

Well, I was able to count the number of clicks on one page but if I have two tabs open both on the same page, I can't seem to "share" my variable on the next page (ie When I click the image button on tab one and click it again in tab two, the click count should be 2 not one). So my question is: How could I create a global variable in JavaScript that could be shared across browser tabs ? Is there a better way to ensure that users can only click the image button once?

Any help would be very much appreciated.

TIA.

Answer 1

My goal is to ensure that the user will click the image button only once (to avoid having duplicate values due to duplicate form submit).

use the following statement:

    $('#mybuttonid').one("click", function() {
      //my action on click here
    });

it will fires the click event only once

How could I create a global variable in JavaScript that could be shared across browser tabs?

You can't. You can use cookies instead.

Answer 2

I think a better strategy would be to disable the image button, IMO. You can make it appear to be disabled (faded out, nonresponsive) but not actually remove it - ie fade it out a little and ignore subsequent clicks.

Example:

$('#yourButton').click(function(e){
    $(this).fadeTo(0.5);
    $.get("someURL", {buttonClick:1});
    $(this).unbind().bind('click', function(e){
        e.preventDefault();  
    });
});

EDIT: To create the global var, AFAIK you can't do this across browser tabs - rather, you should store that in the session. You could use a bit of PHP or whatever to do this, and query it using AJAX when the button is clicked (see revised example).

JavaScript/jQuery Track Number of Image Button Clicks

Question

2 answers

solution1
3 ACCPTED 2011-09-21 08:05:34

solution2
0 2011-09-21 08:07:22

JavaScript/jQuery Track Number of Image Button Clicks

Question

2 answers

solution1 3 ACCPTED 2011-09-21 08:05:34

solution2 0 2011-09-21 08:07:22

solution1
3 ACCPTED 2011-09-21 08:05:34

solution2
0 2011-09-21 08:07:22