how to add price in cart from dropdown

Question

I want to add price when click one of them

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

It should be added their in cart total

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

Using ajax and getting value and put in "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

You can simply get value of select-box and <h4> and add them and put total value to your div and hidden inputs . i.e :

$(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>

If you need to get the total which was already there inside <h4> before the value of it get change you can add a custom attribute to <h4> tag which will have the previous value . i.e :

$(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>