Javascript solution ignore clicks proceeding the first click?

Question

I have a button or anchor element that redirect the user to a different view. Once the button is clicked, it fires a DB write event. However, when the user clicks the button multiple times waiting for the page to reload, multiple records get created and it causes issues with the application saving the form that follows.

What is the best way, maybe in javascript or jQuery to ignore the clicks after the first one?

UPDATE:

I actually did this and it worked -- it doesn't disable button but returns false on the on click event.

<script>
  $("#linkresponse").click(function() {
    $(this).click(function() {
      return false;
    });
      return true;
  });
</script>

Does this seem like a good solution, any reason I shouldn't follow it?

show loader on front end side show that user will know that process are going in background. alternatively you can disable button click once its clicked(not recommended). Check this out http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation?answertab=active#tab-top — Deep Mehta, Jul 20 '15 at 22:25

score 4 · Accepted Answer · answered Jul 20 '15 at 22:27

4

Whenever an event should occur only once for an element, use jQuery's one() method:

$('#myButton').one('click', function(){
  ...
});

answered Jul 20 '15 at 22:27

Rick Hitchcock

35,202
5
48
79

score 0 · Answer 2 · answered Jul 20 '15 at 22:26

0

Create a global variable (call it hasClicked or something) set to 'false'. In your onclick method, have logic like this at the very top:

if (hasClicked)
    return;
else
    hasClicked = true;

answered Jul 20 '15 at 22:26

Hayden Schiff

3,280
19
41

score 0 · Answer 3 · answered Jul 20 '15 at 22:34

I actually added this script. It does not disable the button, but it will return false for each subsequent click. It works now! Thank you for your suggestions as well.

<script>
  $("#buttonid").click(function() {
    $(this).click(function() {
      return false;
    });
      return true;
  });
</script>

Javascript solution ignore clicks proceeding the first click?

3 Answers3