显示动态单选输入元素的总和，并在单击另一个单选输入元素时也应显示

Question

I'm working on a project where I want to show total price accordingly when extra room option selected by the traveler.

It is easy to do when the number of travelers is static but all the data come from the database. So below in the code I mention the static version of the form.

Here are the complete code, Please help me because I'm unable to figure it out the issue:

 $(document).ready(function(){ $('#extraRoomInput_m1').click(function(){ $('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>"); }); $('#extraRoomInput_f1').click(function(){ $('#passanger-1').html("<div class='row px-2 mt-2'><div class='col-md-6'>Maggie (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>"); }); var extraRoom1 = $("input[name='extraRoom356a192b7913b04c54574d18c28d46e6395428ab']").val(); var res = parseInt(extraRoom1); res = res+parseInt(extraRoom1); $('#extraRoomInput_m2').click(function(){ $('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Own Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceOwnRoom'> 150000.00</span></div></div>"); }); $('#extraRoomInput_f2').click(function(){ $('#passanger-2').html("<div class='row px-2 mt-2'><div class='col-md-6'>Esther (Twin Room) </div><div class='col-md-6 text-right'>INR <i class='fa fa-inr pl-1'></i> <span id='priceTwinRoom'>125000.00</span></div></div>"); }); var extraRoom2 = $("input[name='extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0']").val(); var res = parseInt(extraRoom2); res = res+parseInt(extraRoom2); // alert(res); $('#total_price').html(res); });

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid mt-4" id="p-1"> <h3 class="mb-1"> <i class="fa fa-bed fa-fw"></i> Maggie's room type </h3> <p>Maggie would you like your own room?</p> <div class="row mb-5"> <div class="col-md-6"> <label class="w-100"> <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;"> <div class="text-center"> <input type="radio" class="extraRoomOption_m" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_m1" value="150000"> <p><b>Yes please</b></p> <p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p> <p>You will have your own room</p> </div> </div> </label> </div> <div class="col-md-6"> <label class="w-100"> <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;"> <div class="text-center"> <input type="radio" class="extraRoomOption_f" name="extraRoom356a192b7913b04c54574d18c28d46e6395428ab" id="extraRoomInput_f1" value="125000" checked=""> <p><b>No thanks</b></p> <p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p> <p>You will share a room with another traveller of the same gender</p> </div> </div> </label> </div> </div> <h3 class="mb-1"> <i class="fa fa-bed fa-fw"></i> Esther's room type </h3> <p>Esther would you like your own room?</p> <div class="row mb-5"> <div class="col-md-6"> <label class="w-100"> <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;"> <div class="text-center"> <input type="radio" class="extraRoomOption_m" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_m2" value="150000"> <p><b>Yes please</b></p> <p>INR <i class="fa fa-inr pl-3"></i> 150000.00 (per person)</p> <p>You will have your own room</p> </div> </div> </label> </div> <div class="col-md-6"> <label class="w-100"> <div class="jumbotron style-04 m-2 checkRadioBtn py-3" style="min-height:28vh;cursor:pointer;"> <div class="text-center"> <input type="radio" class="extraRoomOption_f" name="extraRoomda4b9237bacccdf19c0760cab7aec4a8359010b0" id="extraRoomInput_f2" value="125000" checked=""> <p><b>No thanks</b></p> <p>INR <i class="fa fa-inr pl-3"></i> 125000.00 (per person)</p> <p>You will share a room with another traveller of the same gender</p> </div> </div> </label> </div> </div> </div> <div class="card"> <a class="card-link" data-toggle="collapse" href="#tripInformation"> <div class="card-header text-dark fs-20"> Classic Golden Triangle (CGT) </div> </a> <div id="tripInformation" class="collapse show" data-parent="#tripAccordation"> <div class="card-body p-0"> <ul class="list-group border-0"> <li class="list-group-item header-bg-dull border-0 px-2"> <div class="row"> <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-clock-o"></i> Duration</div> <div class="col-md-8">6 Nights/7 Days</div> </div> </li> <li class="list-group-item header-bg-dull border-0 px-2"> <div class="row"> <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-pin"></i> Start</div> <div class="col-md-8">NEW DELHI, DELHI</div> </div> </li> <li class="list-group-item header-bg-dull border-0 px-2"> <div class="row"> <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-map-marker"></i> Finish</div> <div class="col-md-8">NEW DELHI, DELHI</div> </div> </li> <li class="list-group-item header-bg-dull border-0 px-2"> <div class="row"> <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-users"></i> Passengers</div> <div class="col-md-8"> <p> <i class="fa fa-fw fa-male"></i> Maggie Clarke Schwartz </p> <p> <i class="fa fa-fw fa-female"></i> Esther Ball Clayton </p> </div> </div> </li> <li class="list-group-item header-bg-dull border-0 px-2"> <div class="row"> <div class="col-md-4 font-weight-bold"><i class="fa fa-fw fa-bed"></i> Room type</div> <div class="col-md-8 text-right"> <span class="font-weight-bold"> <i class="fa fa-inr"></i> Price (per person) </span> </div> </div> <div class="row"> <div class="col-md-12"> <div id="passanger-1"><div class="row px-2 mt-2"><div class="col-md-6">Maggie (Own Room) </div><div class="col-md-6 text-right">INR <i class="fa fa-inr pl-1"></i> <span id="priceOwnRoom"> 150000.00</span></div></div></div> <div id="passanger-2"> <div class="row px-2 mt-2"> <div class="col-md-6"> Esther (Twin Room) </div> <div class="col-md-6 text-right"> INR <i class="fa fa-inr pl-1"></i> <span id="priceTwinRoom"> 125000.00 </span> </div> </div> </div> </div> </div> </li> <li class="list-group-item active border-0 px-2 fs-20"> <div class="row"> <div class="col-md-4 font-weight-bold"> <i class="fa fa-fw fa-inr"></i> Price </div> <div class="col-md-8 text-right"> <i class="fa fa-inr"></i> <span id="total_price">300000</span> (per person) </div> </div> </li> </ul> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

I haven't looked at all the code, but you seem to be setting up event handlers for the buttons. This is an asynchronous action that will fire when the button is pressed. However your total price is not wanting for the event to fire so won't be affected. You need to put the total price calculation in the callback function of the event. This is a common Javascript mistake because the asynchronous nature is tricky to understand. There is lots of material on the web to explain this - make sure you understand the concepts and don't try to cut and paste code

In the second res calculation you are overwriting the res value calculated for extra room1 instead of adding the values together. To make it clearer, call the first res something like extraRoom1Total and the second extraRoom2Total and then add them together. This will make the code easier to understand and therefore easier to debug and maintain