防止双击addtocart按钮

Question

I am using this code for addtocart

my code is like this which is working fine, except that I am getting the item added twice when double clicking, How I can fix this?

<?php 
    if (!in_array(strtotime($timeslot), $slots)){ ?>
    <div  style="margin-top:2%;text-align: center;margin-left: -10px" class="btn-group" data-toggle="buttons">
    <span class="btn btn-danger mylabel"  onclick="addToCart(<?=$timing['id']?>,'<?=$timeslot?>',<?=$values['id']?>,<?=$values->instructor->manager['location_id']?>)"  id="btntime<?=$timing['id'] ?>">
    <input type="radio" class="radio-inline" id="time<?=$timing['id']?>" name="time" value="<?=$timing['id']?>"  >

<?php  echo date('h:i', strtotime($timeslot)) . '- ' . date('h:i A', strtotime($endTime)); ?>

     </span>
    </div>
    <?php     }?>

update:

xhr:http://testing.com/reservation/add2cart?id=346&url=reservation&instructor_id=147&location_id=1&start_time=10:20:00&date1=2019-04-17
xhr:http://testing.com/reservation/reservation?location=1&date1=2019-04-17
xhr:http://testing.com/reservation/reservation?location=1&date1=2019-04-17

updated code as suggested by Muhammad Omer Aslam

<?php 
if (!in_array(strtotime($timeslot), $slots)){ ?>
<div  style="margin-top:2%;text-align: center;margin-left: -10px" class="btn-group" data-toggle="buttons">
<span 
class="btn btn-danger mylabel" 
data-cart="<?php echo \yii\helpers\Json::encode(['timing_id'=>$timing['id'], 'timeslot'=>$timeslot, 'values_id'=>$values['id'], 'manager_location_id'=>$values->instructor->manager['location_id']])?>" 
id="btntime<?=$timing['id'] ?>">
<input type="radio" class="radio-inline" id="time<?=$timing['id']?>" name="time" value="<?=$timing['id']?>"  >

<?php      echo date('h:i', strtotime($timeslot)) . '- ' . date('h:i A', strtotime($endTime)); ?>

</span>
</div>
<?php } ?>      

<?php
  }

 }
} else {
?>

<label>Staff is on holiday</label>
 <?php
  }
}
} else {
?> <label style="text-align:center">Today this instructor is not available</label>
<?php
}
?>
</div>

and just on top of the page:

<?php
use app\models\User;
use app\modules\admin\models\ClassDuration;
use app\modules\admin\models\OrderItem;
use app\modules\admin\models\Location;
use app\modules\admin\models\Manager;
use app\modules\admin\models\WorkingDays;
//$cart_value = \Yii::$app->getRequest()->getCookies()->getValue('order_item');
//var_dump($cart_value);
$js=<<<JS
    $(document).on('click','span.mylabel',function(e){
         e.preventDefault();
         $(this).css({pointerEvents:'none'});
         let cart_params= $(this).data('cart');
         addToCart(cart_params.timing_id,cart_params.timeslot, cart_params.values_id, cart_params.manager_location);
    });
JS;
$this->registerJs($js,\yii\web\View::POS_READY);


$session = Yii::$app->session;
$cart_value= $session['value'];
//var_dump($session['value']);
$st = Yii::$app->getTable;
$url = Yii::$app->controller->action->id;

Answer 1

You can simply use the CSS property pointerEvents for the button, and set its value to none that would do it and disallow clicking on the button once it is clicked.

Now the second thing is how to call it, I would recommend making a few changes to your code, and bind the click function to the element via jquery and remove the inline onclick attribute.

For the parameters that you are passing, adjust them to the dataset for the element.

Change your span HTML to the following

<span 
 class="btn btn-danger mylabel" 
 data-cart='<?php echo \yii\helpers\Json::encode(['timing_id'=>$timing['id'], 'timeslot'=>$timeslot, 'values_id'=>$values['id'], 'manager_location_id'=>$values->instructor->manager['location_id']])?>' 
 id="btntime<?=$timing['id'] ?>">

and then bind the click via jquery by adding this snippet on the top of the view.

$js=<<<JS
    $(document).on('click','span.mylabel',function(e){
         e.preventDefault();

        //this disables the clicking any further
         $(this).css({pointerEvents:'none'});

         // get the dynamic params fromt he dataset
         let cart_params= $(this).data('cart');

         //send them as params to the cart method
         addToCart(cart_params.timing_id,cart_params.timeslot, cart_params.values_id, cart_params.manager_location_id);
    });
JS;
$this->registerJs($js,\yii\web\View::POS_READY);

Hope this solves the problem.