How to output a total price when clicking the radio button?

Question

I have checked the following question : How to output the price when clicking the radio button?

But it didn't help me with solution, that's why I am posting similar question.

I have two radio check boxes. One offers Silver plan and the other Gold plan. If the user clicks Silver Plan that the Total price will be $499.

I don't understand how to best achieve it.

<div class="plan-wrapper">
                        <label id="silver-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="$699"/> Silver Plan</label>
                        <label id="silver-plan-price">$699</label>
                        <label id="gold-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="$999"/> Gold Plan</label>
                        <label id="gold-plan-price">$999</label>
                        </div>


                  <div class="wrapper-b">
                        <span id="total">Total</span>
                        <output type="number" name="price" id="output"></output>
                        <!--<span id="total-price"></span>-->
                </div>

JS

<script>
function calculate(obj) {
document.getElementById("output").innerHTML = obj.value;
}
</script>

Can't understand what you try to calculate. And how the total price will be 499? Also i answered that question some time ago :) — Alex Char, Dec 02 '14 at 19:47

score 1 · Answer 1 · answered Dec 02 '14 at 19:47

1

You need to add value to your inputs...

<input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" **value="$699"**/>

<input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" **value="$999"**/>

answered Dec 02 '14 at 19:47

brso05

13,142
2
21
40

I actually had it like that before, but the code still didn't work. I removed it, thought maybe it is wrong... – Nathalie Dec 02 '14 at 19:51
@Nathalie No it should work if you add that even if you don't it should work it should default to "on" – brso05 Dec 02 '14 at 19:52
@Nathalie I copied and pasted your code and it works fine I just added the value... – brso05 Dec 02 '14 at 19:53

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

First of all, your radio buttons does not have the value attribute, so obj.value won't work.

Take a look here: Get Radio Button Value with Javascript

edited May 23 '17 at 12:27

Community

1
1

answered Dec 02 '14 at 19:47

Tzach

12,889
11
68
115

score 0 · Answer 3 · answered Dec 02 '14 at 19:51

0

i think you missed the value for each input:

function calculate(obj) {
  document.getElementById("output").innerHTML = obj.value;
}

<div class="plan-wrapper">
                        <label id="silver-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="699"/> Silver Plan</label>
                        <label id="silver-plan-price">$699</label>
                        <label id="gold-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="999"/> Gold Plan</label>
                        <label id="gold-plan-price">$999</label>
                        </div>


                  <div class="wrapper-b">
                        <span id="total">Total</span>
                        <output type="number" name="price" id="output"></output>
                        <!--<span id="total-price"></span>-->
                </div>

answered Dec 02 '14 at 19:51

Leandro Carracedo

7,233
2
44
50

I don't understand how it works for you. It doesn't work for me at all. – Nathalie Dec 02 '14 at 20:01
I ran your "Run code snippet" and it works just as I want it to work. I made sure it is similar to my code and it is, but Total doesn't get outputed when I test it on my website – Nathalie Dec 02 '14 at 20:05
@Nathalie i suggest you using developer tools in your browser to check if you are facing any Javascript errors. – Leandro Carracedo Dec 02 '14 at 20:11
I have checked the dev tools on Chrome and I don't have any warnings, I also ran my website in IE and it still didn't work.I will check my code, maybe there is a typing mistake I oversaw. I appreciate your help. – Nathalie Dec 02 '14 at 20:20

score 0 · Accepted Answer · answered Dec 02 '14 at 20:25

First of all you must to set values to your radio. Then set class or names and grab elements. It could be done using jQuery All the job could be done too using AngularJs, if you want to use output.

So if I got your question this is the code:

jQuery(document).ready(function(){

    $(document).on("click", ".planClass", function(e){

    if($(this).is(':checked')){

        $("#output").html($(this).val());
    }

    });  

});

see at JSfeedle http://jsfiddle.net/4tafnwcj/1/

How to output a total price when clicking the radio button?

4 Answers4