How do you add radio button valus together, yet differentiate them if they have the same value?

Course Queries Syllabus Queries 3 years ago

254 3 0 0 0

User submissions are the sole responsibility of contributors, with TuteeHUB disclaiming liability for accuracy, copyrights, or consequences of use; content is for informational purposes only and not professional advice.

Answers (3)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 3 years ago

 

So I'm working on an order form, where people can select different quantities of items, and it then uses">uses JS to calculate to the totals. So for example you can select 2 Brown hats ($15 each) and the TOTAL automatically becomes $30. In the POST page I can then pull the name of the text box and know they ordered 2 brown hats.

Here is my problem: I want to set up a radio button option that will allow them to select one item only, and have it add to that final total here is what it looks like:

 type="radio" value="0" name="Syllabus" checked="No" /> Paper ($0) />

 type="radio" value="0" name="Syllabus" checked="No" /> USB ($0) />

 type="radio" value="20" name="Syllabus" checked="No" /> Both ($20) />

So how can I use JS to add $20 to the total if "BOTH" is selected? And then of course $20 is removed if they select one of the other options. And finally, if they do select PAPER or USB, how do I know in the final output what they selected, since the value will be 0 either way?

Thanks for the help!

------ IF IT HELPS ANYONE HERE IS THE CODE I USE TO ADD THE VALUES OF THE OTHER TEXT BOXES, I THEN PAD THE TOTAL WITH ZEROS AND ROUND IT ------

// JavaScript Document

    function CalculateTotal(frm) {
    var order_total = 0

    var syllabuscost;

    var radios = document.getElementsByTagName('input');
    var radiovalue;
    for (var z = 0; z < radios.length; z++) {
        if (radios[z].type === 'radio' && radios[z].checked) {
            // get value, set checked flag or do whatever you need to
            radiovalue = radios[z].value; 

            //Change the syllabus cost depending on the value of the radio button
            if (radiovalue == "Paper" || radiovalue == "USB") {
                syllabuscost = 0
            }
            else if (radiovalue == "Both") {
                syllabuscost = 20
            }      
        }
    }

    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {

        // Get the current field
        form_field = frm.elements[i]

        // Get the field's name
        form_name = form_field.name

        // Is it a "product" field?
        if (form_name.substring(0,4) == "PROD") {

            // If so, extract the price from the name
            item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))

            // Get the quantity
            item_quantity =
                                                
0 views
0 shares

profilepic.png
manpreet 3 years ago

You could store the dollar values in an object instead.

var costs = {
    "paper" : 0,
    "usb"   : 0,
    "both"  : 0
};

The values of the radio buttons can (and should) be unique.

<input type="radio" value="paper" name="Syllabus" checked="No" /> Paper ($0)<br />

<input type="radio" value="usb" name="Syllabus" checked="No" /> USB ($0)<br />

<input type="radio" value="both" name="Syllabus" checked="No" /> Both ($20)<br />

And then, in your CalculateTotal function, reference costs["paper"], etc.


0 views   0 shares

profilepic.png
manpreet 3 years ago

The value should be the product name and not just the price, for this exact reason.

As a solution you could include both the name and price in the value field separated by a delimiter, that would give you enough information:

 type="radio" value="paper|0" name="Syllabus" checked="No" /> Paper ($0) />
 type="radio" value="usb|0" name="Syllabus" checked="No" /> USB ($0) />
 type="radio" value="both|20" name="Syllabus" checked="No" /> Both ($20) />

Accessing the value in your script:

item_quantity = parseInt(form_field.value.split('|')[1])

0 views   0 shares

No matter what stage you're at in your education or career, TuteeHUB will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.

Similar Forum