2016-04-13 74 views
0

我有一個網頁,其中多個用戶信息的詳細信息there.so當我點擊完整(這裏完成按鈕旁邊有每個用戶的詳細信息)按鈕,它應該做一些任務(例如,我在這裏發送郵件),並在我重新導向到同一頁面後禁用按鈕。 我該怎麼做? 任何可能的建議?JavaScript:如何防止雙擊按鈕或禁用按鈕

[這是一個刀片模板,因爲我正在做laravel Web應用程序]

我的網頁上的演示:

<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> 

回答

0

因此,有幾種方法來處理您的問題。

從客戶端的一個簡單的將是使用jQuery(因爲您導入它在您的HTML)暫時禁用該按鈕。

這裏是個例:

$(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>

1

您可以使用jQuery的.one()方法。

// 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>

+0

看到的問題是與您的解決方案是,當我在第一時間點擊它顯示點擊並做任務,但是當我再次單擊它再次做任務,但我不想要做到這一點! 它應該禁用按鈕或防止進一步點擊。 這裏提到我在同一頁面上有同樣的按鈕列表,你可以看到。 – Hola

+0

@ x69相應的更新代碼,請參閱此處的工作演示 - https://jsfiddle.net/pradeep1991singh/wzj5o3kz/1/ – pradeep1991singh

+0

@ x69此處 - https://jsfiddle.net/pradeep1991singh/wzj5o3kz/1/ – pradeep1991singh