JavaScript: how to Prevent Double button click or disable the button

Question

I have a webpage where multiple user information details is there.so when i click on the complete (here complete button is there beside every user details) button it should do some task(eg. I'm sending mail here) and disable the button after i redirected to same page again. How do I do it? Any possible suggestion?

[ It's a blade template as i'm making laravel web application]

A demo of my webpage:

<html>
    <head> 
        <title> User Details </title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 

    </head>
    <body>


<div class="container">
<h3> Student Details </h3>
      <table  class="table table-striped table-bordered"  id="example">
        <thead>
          <tr>
            <td>Serial No</td>
            <td>Student Name</td>
            <td>Stdunet Email</td>
            <td>Course Name</td>  
            <td>Phone Number</td>
          <td>Action</td>
        </tr>
        </thead>
        <tbody>
          <?php $i=1; ?>
        @foreach($user as $row)
        @if($row->courses()->first())
          <tr>
            <td>{{$i}}</td>
            <td>{{$row->name }}</td>
            <td>{{$row->email}}</td>
           <td>{{$row->courses()->first()->name}} </td>
            <td>{{$row->phone}}</td>
           <td>

               <a href="{{route('sendMail',$row->id)}}" class="btn btn-warning">Complete</a>                                        

            </td>
          </tr>
          <?php $i++; ?>
          @endif


        @endforeach
        </tbody>


      </table>

    </div>

    </body>
</html>

pradeep1991singh · Accepted Answer · 2016-04-13 04:19:07Z

1

You can use jquery's .one() method.

// prevent anchor to click 
$(document).ready(function() {
  var clickCtr = 0;  
  $("a.btn").click( function() {
    if(clickCtr > 0) {
      return false; 
    }
    clickCtr++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<a href="https://www.google.co.in" target="_blank" class="btn btn-warning">Complete</a>

edited Apr 13, 2016 at 4:19

answered Apr 13, 2016 at 3:44

pradeep1991singh

8,4054 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hola Over a year ago

See the problem is with your solution is when i click in the first time it's showing clicked and do the task but when i click again it's again do the task but i don't want to do that! it should either disable the button or preventing from further click. here to mention I have list of same button in same page as you can see.

pradeep1991singh Over a year ago

@x69 Ok updated code accordingly, see working demo here - jsfiddle.net/pradeep1991singh/wzj5o3kz/1

Aleks · Accepted Answer · 2016-04-13 04:26:30Z

So there is couple ways to handle your issue.

A simple one from the client side would be to use jQuery (since your importing it in your HTML) to temporarily disable the button.

Here is an exemple:

$(document).ready(function () {
     clicked = false;
     $(".btn").on('click', function (event) {  
           if (!clicked) {
             clicked = true;
             $(".text").text("Clicked!");
             setTimeout(function(){ 
               clicked = false;
               $(".text").text("");
             }, 2000);
           } else {
              $(".text").text("Already clicked!");
           }
     });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn btn-warning">Complete</button>
<text class="text"></text>

Collectives™ on Stack Overflow

JavaScript: how to Prevent Double button click or disable the button

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related