防止雙擊addtocart按鈕

Question

我正在將此代碼用於addtocart

我的代碼像這樣工作正常，除了雙擊時我將項目添加兩次，如何解決此問題？

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

更新：

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

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>

並在頁面頂部：

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

您可以簡單地將CSS屬性pointerEvents用於按鈕，並將其值設置為none即可，並且一旦按鈕被單擊就不允許單擊。

現在第二件事是如何調用它，我建議對您的代碼進行一些更改，然后通過jquery將click函數綁定到元素，並刪除內聯onclick屬性。

對於要傳遞的參數，將其調整為元素的數據集 。

將范圍HTML更改為以下內容

<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'] ?>">

然后通過在視圖頂部添加此代碼段來通過jquery綁定點擊。

$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);

希望這能解決問題。

Answer 2

您可以使用JavaScript禁用它

onClick="this.disabled=true; this.value='Added to cart';"

添加到您的代碼：

<?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="this.disabled=true; this.value='Added to cart'; 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     }?>

Answer 3

我會讓那onclick javascript禁用按鈕。 使用jQuery：

$(this).prop("disabled", true);