How do I show the sum of all dynamic radio input values after I click on it in a specific result div by using jQuery?

Question

This is my last post here in this coder's community because I ask this in many ways but didn't get the proper solution. So I simplify my code and paste it here again. I'm not so good in jquery/js so that is why I'm stuck with this code.

Please help me, It'll be great help for me because this is my first project and I just moved from a banking sector to programming world. Thanks in advance for all your efforts and help.

Following is the code where I mentioned the static version of html part(it is dynamically coming from database).

 var matched = $('.option_yes'); var countedItem = matched.length; //This code is for the example purpose to show the value when hit on radio button $(document).on('click', '.extraRoomOption:checked', function(e){ //$('#p'+i+'_price').html($(this).val()); alert($(this).val()); }); //This is the rubished(Because I wrote this) code that will be use in production: var i; for(i = 1; i <= countedItem; i++){ $('input[name=extraRoom'+i+']').on('click', function(e){ if($(e.target).is('#extraRoomInput_y'+i)){ $('#p'+i+'_price').html($(this).val()); } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3>Maggie's room type</h3> <p>would you like your own room?</p> <label> <input type="radio" class="extraRoomOption option_yes" name="extraRoom1" id="y1_extraRoomInput" value="150000"> <b>Yes, please</b> </label> <label> <input type="radio" class="extraRoomOption option_no" name="extraRoom1" id="n1_extraRoomInput" value="125000" checked> <b>No, thanks</b> </label> <hr> <h3>Esther's room type</h3> <p>would you like your own room?</p> <label> <input type="radio" class="extraRoomOption option_yes" name="extraRoom2" id="y2_extraRoomInput" value="150000"> <b>Yes, please</b> </label> <label> <input type="radio" class="extraRoomOption option_no" name="extraRoom2" id="n2_extraRoomInput" value="125000" checked> <b>No, thanks</b> </label> <br> <hr><hr> <h2>Room type</h2> <p>Maggie (Twin Room) And Price is <span id="p1_price">125000</span></p> <p>Esther (Twin Room) And Price is <span id="p2_price">125000</span></p> <p><b>Total Price is <span id="totalPrice">250000</span></b></p>

Ignore this if you don't want to know about how my website is working.

Let me explain first how my website should be work:
1) When a user come to my website and click on tour and then fill booking form with his basic personal information.
2) After that all information will be save into the database and then the tailor your trip page appear just after the first step.
3) Now this is the tricky part where I'm stuck. When user click on Room type option it should work like: The price of the selected passenger would be update automatically and then sum of all passenger's price should be show in final price box.
4) Here are the my previous question link:

Show sum of the dynamic price when click on radio button in jquery
Show sum of dynamic radio input element and It should also show when click on another radio input element

5) See the picture below:

Answer 1

You need to add the form tag (It is easier to work with input fields with it). Please note the html code is almost the same as from your example, only the form tag was added.

 document.addEventListener('DOMContentLoaded', function() { var form = document.getElementById('radio-form'); var inputs = form.querySelectorAll('input[type="radio"]'); var p1 = document.getElementById('p1_price'); var p2 = document.getElementById('p2_price'); var total = document.getElementById('totalPrice'); function setPrice() { var room1 = form.elements['extraRoom1']; var room2 = form.elements['extraRoom2']; p1.innerHTML = room1.value; p2.innerHTML = room2.value; total.innerHTML = +room1.value + +room2.value; }; Array.prototype.forEach.call(inputs, function(input) { input.addEventListener('change', setPrice); }); setPrice(); });

 <h3>Maggie's room type</h3> <p>would you like your own room?</p> <form id="radio-form"> <label> <input type="radio" class="extraRoomOption option_yes" name="extraRoom1" id="y1_extraRoomInput" value="150000"> <b>Yes, please</b> </label> <label> <input type="radio" class="extraRoomOption option_no" name="extraRoom1" id="n1_extraRoomInput" value="125000" checked> <b>No, thanks</b> </label> <hr> <h3>Esther's room type</h3> <p>would you like your own room?</p> <label> <input type="radio" class="extraRoomOption option_yes" name="extraRoom2" id="y2_extraRoomInput" value="150000"> <b>Yes, please</b> </label> <label> <input type="radio" class="extraRoomOption option_no" name="extraRoom2" id="n2_extraRoomInput" value="125000" checked> <b>No, thanks</b> </label> </form> <br> <hr> <hr> <h2>Room type</h2> <p>Maggie (Twin Room) And Price is <span id="p1_price">125000</span></p> <p>Esther (Twin Room) And Price is <span id="p2_price">125000</span></p> <p><b>Total Price is <span id="totalPrice">250000</span></b></p>

Correct the code if necessary. I hope I helped you.

Answer 2

This code might be helpful... I have added data-target attribute to target particular price with ID.

 jQuery(document).ready(function($) { $(document).on('click', '.extraRoomOption:checked', function(e){ var targetPrice = $(this).data('target'); $('#'+targetPrice).text($(this).val()); grandTotal(); }); function grandTotal(){ var total = 0; $('.extraRoomOption:checked').each(function(e){ total += parseFloat($(this).val()); }); $('#totalPrice').text(total); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3>Maggie's room type</h3> <p>would you like your own room?</p> <label> <input type="radio" class="extraRoomOption option_yes" name="extraRoom1" id="y1_extraRoomInput" data-target="p1_price" value="150000"> <b>Yes, please</b> </label> <label> <input type="radio" class="extraRoomOption option_no" name="extraRoom1" id="n1_extraRoomInput" value="125000" data-target="p1_price" checked> <b>No, thanks</b> </label> <hr> <h3>Esther's room type</h3> <p>would you like your own room?</p> <label> <input type="radio" class="extraRoomOption option_yes" name="extraRoom2" id="y2_extraRoomInput" data-target="p2_price" value="150000"> <b>Yes, please</b> </label> <label> <input type="radio" class="extraRoomOption option_no" name="extraRoom2" id="n2_extraRoomInput" value="125000" data-target="p2_price" checked> <b>No, thanks</b> </label> <br> <hr><hr> <h2>Room type</h2> <p>Maggie (Twin Room) And Price is <span id="p1_price">125000</span></p> <p>Esther (Twin Room) And Price is <span id="p2_price">125000</span></p> <p><b>Total Price is <span id="totalPrice">250000</span></b></p>