How can i make my javascript code add the total amount

Question

Hi so i have been working on this code that allows the user to select different radio button options and then gives them the total cost after they select them.

This is what i have tried: (html)

 Total <input type="text" id="count" value="$0" readonly />       


<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
<h4>Contact plugin</h4>
<input type="radio" name="pak1" class="mnozstvi_sleva" value="4&#x00A;Qty" onClick="changeText(0)">No

<input type="radio"  class="mnozstvi_sleva" onclick="changeText(5)" value="2&#x00A;Qty" name="PAk1" >Yes!

<h4> Mailing list</h4> <input type="radio"  class="mnozstvi_sleva" onclick="changeText2(0)" value="2&#x00A;Qty" name="PAk21" >No

  <input type="radio"  class="mnozstvi_sleva" onclick="changeText2(10)" value="2&#x00A;Qty" name="PAk21" >Yes
        `

(javascript)

function changeText(value) {
 document.getElementById('count').value = 10 * value;   
}

function changeText2(value) {
 document.getElementById('count').value = 10 * value;   
}

So i need this to add together instead of change to one number you can run the code here on jsfiddle: jsfiddle

Answer 1

Guess you need to use handlers for two radios. You are using only for the Yes and nothing for the other. Try something like this:

 function updateTotal () { total = 0; total += frm.contact_plugin.value * 10 + frm.mailing_list.value * 10; document.getElementById("total").innerHTML = total; }

 * {font-family: Segoe UI;} form ul, form ul li {list-style: none; margin: 0; padding: 0;} form ul li strong, form ul li label {display: inline-block; width: 120px; padding: 3px;} form ul li label {width: 75px;}

 <p><strong>Billing</strong></p> <form action="" id="frm"> <ul> <li> <strong>Contact plugin</strong> <label><input type="radio" value="1" name="contact_plugin" onclick="updateTotal()" /> Yes</label> <label><input type="radio" value="0" name="contact_plugin" onclick="updateTotal()" /> No</label> </li> <li> <strong>Mailing list</strong> <label><input type="radio" value="1" name="mailing_list" onclick="updateTotal()" /> Yes</label> <label><input type="radio" value="0" name="mailing_list" onclick="updateTotal()" /> No</label> </li> </ul> </form> <p><strong>Total:</strong> <span id="total">0</span>$</p>

Answer 2

For example

var cost1 = 0, cost2 = 0;
function changeText(value) {
 cost1 = 10 * value;   
calculateSum();
}

function changeText2(value) {
 cost2 = 10 * value;   
calculateSum();
}

function calculateSum() {
document.getElementById('count').value = cost1 + cost2;
}

Answer 3

I suggest more dynamic way: DEMO

You should call below method like changeTotal(100, this.name) . It doesn't depend parent, so, you can use everywhere, with any tags(not only input) through event

var groups = {};
function changeTotal(value, group) {
    groups[group.toLowerCase()] = value;//toLowerCase has added for  PAk1 and pak1
    var sum = 0;

    Object.keys(groups).forEach(function (key) {
        sum += groups[key]
    });
    document.getElementById('count').value = "$"+(10 * sum);
}

Answer 4

 function updateTotal () { total = 0; total += frm.contact_plugin.value * 10 + frm.mailing_list.value * 10; document.getElementById("total").innerHTML = total; }

 * {font-family: Segoe UI;} form ul, form ul li {list-style: none; margin: 0; padding: 0;} form ul li strong, form ul li label {display: inline-block; width: 120px; padding: 3px;} form ul li label {width: 75px;}

 <p><strong>Billing</strong></p> <form action="" id="frm"> <ul> <li> <strong>Contact plugin</strong> <label><input type="radio" value="1" name="contact_plugin" onclick="updateTotal()" /> Yes</label> <label><input type="radio" value="0" name="contact_plugin" onclick="updateTotal()" /> No</label> </li> <li> <strong>Mailing list</strong> <label><input type="radio" value="1" name="mailing_list" onclick="updateTotal()" /> Yes</label> <label><input type="radio" value="0" name="mailing_list" onclick="updateTotal()" /> No</label> </li> </ul> </form> <p><strong>Total:</strong> <span id="total">0</span>$</p>