如何从下拉列表中在购物车中添加价格

Question

我想在点击其中一个时添加价格

<div class="col-12 col-sm-9 col-md-9 col-lg-8">
                            <select class="form-control" type="text" value="">
                              <option value="0">Not Required</option>
                              <option value="50">Before Care only(6am to 9am)</option>
                              <option value="60">After Care Only (5pm to 7pm)</option>
                              <option value="110">Both</option>
                              </select>
                          </div>

应该将其添加到购物车中

 <h4 class="price" id="prictot">{{$cdetail ->c_price}}</h4>

         <form action="{{ route('/payment') }}" id="theForm" method="POST">
          @csrf
          <input type="hidden" id="price" name="price" value="{{$cdetail ->price}}"><br>
          <button type="submit" class="btn radius-xl text-uppercase">Buy This Courses</button>
         </form>

使用ajax获取价值并放入“prictot”

<script>
$(document).ready(function() {
$("#priceadd").on('change', function () {
    var optionText = $("#priceadd option:selected").val();
     realprice=document.getElementById("prictot").innerHTML
    document.getElementById("prictot").innerHTML = optionText 
});
});
</script>

Answer 1

您可以简单地获取 select-box 和 <h4> 的值并将它们相加，然后将总值添加到您的 div 和隐藏的输入中。即：

$(document).ready(function() {
//on change of slect
  $("#priceadd").on('change', function() {
  //get select value
    var optionText = parseInt($(this).val());
    //get text inside h4
    var realprice = parseInt($("#prictot").text());
    //add 
    var total =optionText +  realprice;
    //add total to div nd inputs
    $("#prictot").text(total)
    $("#price").val(total)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 col-sm-9 col-md-9 col-lg-8">
  <select class="form-control" id="priceadd">
    <option value="0">Not Required</option>
    <option value="50">Before Care only(6am to 9am)</option>
    <option value="60">After Care Only (5pm to 7pm)</option>
    <option value="110">Both</option>
  </select>
</div>
<h4 class="price" id="prictot">110</h4>

<form action="{{ route('/payment') }}" id="theForm" method="POST">
  @csrf
  <input type="text" id="price" name="price" value="110"><br>
  <button type="submit" class="btn radius-xl text-uppercase">Buy This Courses</button>
</form>

如果您需要在其值更改之前获取已存在于<h4> 中的总数，您可以将自定义属性添加到<h4> 标记，该属性将具有先前的值。即：

$(document).ready(function() {
//on change of slect
  $("#priceadd").on('change', function() {
    //get old value
    var old_value = parseInt($("#prictot").attr('total-price'))
  //get select value
    var optionText = parseInt($(this).val());
    
    //add 
    var total =optionText +  old_value;
    //add total to div nd inputs
    $("#prictot").text(total)
    $("#price").val(total)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 col-sm-9 col-md-9 col-lg-8">
  <select class="form-control" id="priceadd">
    <option value="0">Not Required</option>
    <option value="50">Before Care only(6am to 9am)</option>
    <option value="60">After Care Only (5pm to 7pm)</option>
    <option value="110">Both</option>
  </select>
</div>
<!--added custom attribute-->
<h4 class="price" total-price="110" id="prictot">110</h4>

<form action="{{ route('/payment') }}" id="theForm" method="POST">
  @csrf
  <input type="text" id="price" name="price" value="110"><br>
  <button type="submit" class="btn radius-xl text-uppercase">Buy This Courses</button>
</form>

Answer 2

您从 laravel 获得的价格可能不需要使用隐藏输入。您可以将该值直接插入刀片模板中的 js 代码中。请参阅下面的解决方案。

$("#priceadd").on('change', function () {
    let price = 100 // this is only for stackoverflow
    // in your project you do
    // let price = {{$cdetail->price}}
    let optionPrice = parseInt($("#priceadd option:selected").val())
    document.getElementById("prictot").innerHTML = optionPrice + price
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h4 class="price" id="prictot">Nothing selected</h4>
<select class="form-control" type="text" value="" id="priceadd">
  <option value="0">Not Required</option>
  <option value="50">Before Care only(6am to 9am)</option>
  <option value="60">After Care Only (5pm to 7pm)</option>
  <option value="110">Both</option>
</select>