0

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 (i.e 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.

3
  • You can share data through localstorage. Saving in one tab and geting it in another
    – ant_Ti
    Sep 21, 2011 at 8:14
  • @ant_Ti Localstorage? Could you expound that a little bit? Thanks. Sep 21, 2011 at 8:26
  • try read this
    – ant_Ti
    Sep 21, 2011 at 9:12

2 Answers 2

3

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.

3
  • Thanks for your speedy reply. It's not working. Please see jsfiddle.net/annelagang/szHgJ Sep 21, 2011 at 8:22
  • Yes, first - you didn't choose jQuery framework on left panel, second - it's typo in my sample: finction -> function.
    – Samich
    Sep 21, 2011 at 8:29
  • Yey, it works! Nice trick. But if I do duplicate tabs, the alert still pops up on the second tab. Good job though. Sep 21, 2011 at 8:38
0

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 - i.e 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).

4
  • I like your "faded out" image idea. Actually, I am using ASP.NET for this application. The sample above is just a test code that I will transfer to the real code if successful. The reason I am using JavaScript/jQuery is to avoid server postbacks. Btw, your code is not working :'c jsfiddle.net/annelagang/KEqqH Sep 21, 2011 at 8:32
  • Ah, sorry. My eyes seem to skip your AJAX suggestion part. Hehe. Will try it using AJAX. Thanks. Sep 21, 2011 at 8:53
  • @AnneLagang you need to set the library to jQuery on your fiddle :) Sep 21, 2011 at 9:11
  • Yeah, figured that one out. LOL Thanks. Sep 21, 2011 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.