我如何防止重复提交

Question

Good Day Guys !

I have a problem here

I have 3

      <a href="{$baseUrl}/default/report/download-ready-prompt?id={$order.id}" name ="ahref" id="promptButton" class="button-blue printing">Prompt</a> &nbsp;

      <a href="{$baseUrl}/default/report/download-ready-cert?id={$order.id}" name = "ahref" id="certButton" class="button-blue printing withSignature">Cert</a> &nbsp; 

      <a href="{$baseUrl}/default/report/download-ready-invoice?id={$order.id}" name ="ahref" id="invoiceButton" class="button-blue printing withSignature">Invoice</a> &nbsp;

These 3 links load in the same page

if a click one link it will download. but if i click it again i will not download

because i input a javascript like this

    <script type="text/javascript"> 
    {literal}
        $(document).ready(function(){
             var submitStatus = false;
        $('a#promptButton').click(function(e){
             if (!submitStatus) {
               submitStatus = true;
        } else {
             e.preventDefault();
        }
        });
        $('a#certButton').click(function(e){
           if (!submitStatus) {
          submitStatus = true;
         } else {
        e.preventDefault();
        }
        });
        $('a#historyButton').click(function(e){
        if (!submitStatus) {
          submitStatus = true;
        } else {
          e.preventDefault();
        }
        });
        $('a#invoiceButton').click(function(e){
        if (!submitStatus) {
           submitStatus = true;
        } else {
           e.preventDefault();
        }
        });
        });
      {/literal}
      </script>

What will be my code if i want to download twice but i will prevent double submission? Anybody can help me Please :(

Answer 1

This sample code may help to solve your issue.

HTML

<a href="http://www.google.com" target="_blank" >Google</a>
<a href="http://www.yahoo.com"  target="_blank">Yahoo</a>
<a href="http://www.stackoverflow.com"  target="_blank">Stackoverflow</a>

JS:

$('a').click(function(e){
    $this = $(this);
    if($this.data('disabled') == 'true'){
        e.preventDefault();
        setTimeout(function(){$this.data('disabled', 'false')}, 10); //Enable the anchor tag after 10 milliseconds
    }else{
        $this.data('disabled', 'true');
    }    
});

Demo: http://jsfiddle.net/rUrk4/6/

Answer 2

I have simple solution for you,

Just put this jQuery code after including JQuery ofcourse

<script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

<script type="text/javascript">$('a:visited').click(function(){return false;});</script>

this will prevent click on all visited links in your page. :)

So first time the click will work second time will not..

I hope this much explaination will do :)