dqy0707
2019-04-02 19:47 阅读 132

防止双击addtocart按钮

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;
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    donglang1976 donglang1976 2019-04-04 04:38

    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.

    点赞 评论 复制链接分享
  • doudang4568 doudang4568 2019-04-02 19:51

    You can disable it with JavaScript

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

    Added to your code:

    <?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     }?>
    
    点赞 评论 复制链接分享
  • douxian7808 douxian7808 2019-04-02 19:53

    I would have that onclick javascript disable the button. Using jquery:

    $(this).prop("disabled", true);
    
    点赞 评论 复制链接分享

相关推荐