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

更新的代码由建议穆罕默德·奥默·阿斯兰姆

<?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属性。

对于要传递的参数，请将其调整为元素的dataset。

将范围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);

防止双击addtocart按钮

3 个答案: