How to Add radio buttons and Check-boxes Input selections together to form an output in JavaScript

I have created a hot beverage program whereby you can choose what type of beverage you want using radio buttons and then choose what to have with the drink i.e. sugar, milk, honey using checkboxes. How will I create an output with javascript to show that the user has chosen for example, tea with sugar and milk?

Ingredients:

  <ul>
    <li><input type="radio" id="Tea"       name="ingred" value="teabag"              />  Teabag</li>
    <li><input type="radio" id="Coffee"    name="ingred" value="coffee_beans"        />  Coffee Beans</li>
    <li><input type="radio" id="Chocolate" name="ingred" value="chocolate_granules"  />  Hot Chocolate Granules</li>
    <li><input type="radio" id="Bovril"    name="ingred" value="bovril_sludge"       />  Bovril Sludge</li>
    <li><input type="button" value="OK"    onclick="testRadioButtons()" /></li>
  </ul>
  </div>


    <img id="beverageholder" src="images/placeholder.gif" alt="Image gallery" />


    <p><label for="extra">Extras:</label></p>
   <ul>
     <li><input type="checkbox" id="Milk"  name="extras" value="milk" />Milk</li>
     <li><input type="checkbox" id="White" name="extras" value="whiteSugar" />White Sugar</li>
     <li><input type="checkbox" id="Brown" name="extras" value="brownSugar" />Brown Sugar</li>
     <li><input type="checkbox" id="Honey" name="extras" value="honey" />Honey</li>
     <li><input type="button" value="OK" onclick="testCheckBoxes()" /></li>
   </ul>
   <div id="extraDesign"/>
        <!--The unchecked images are used as placeholders -->
        <img id="fuelplaceholder"        src="images/curtains1.jpg" alt="Fuel filler crossed out"      width="275px" height="250" style="border-style: solid; border-color: #FF0000; s" />
        <img id="tyresplaceholder"       src="images/curtains2.jpg" alt="Race tyres crossed Out"       width="275px" height="250" style="border-style: solid; border-color: #FF0000; s"/>
        <img id="suspensionplaceholder"  src="images/curtains3.jpg" alt="Shock absorbers crossed Out"  width="275px" height="250" style="border-style: solid; border-color: #FF0000; s" />
        <img id="suspensionplaceholder2" src="images/curtains4.jpg" alt="Fuel filler crossed out"      width="275px" height="250" style="border-style: solid; border-color: #FF0000; s" />
   </div>  

                Your Beverage

Your Beverage Awaits Here:

Your Hot Beverage is:

I'm looking to have a picture that shows the type of beverages revealed once the user chooses a radio button and checkboxes then presses submit to show the results.

Just started learning theory with JavaScript but still getting to grips with the practical side of it..

Answers


Here's a quick sample of one possible approach though before I continue, a couple of thoughts:

1. By applying a class to the element with the id of 'hideMe', you could make it invisible. If none of the checkboxes are checked you'd set this class, otherwise you'd clear it. The class would be a css selector - one that 'enabled or not' a style that hid the element. If you're having the drink without any extras, it makes no sense to follow the drink name with the text 'with'

2. I just grabbed the text you had set to the IDs, using this to display the user's selection. You'd probably be better off adding an attribute (let's say, dispText) that you assigned the display text to.

E.g <li><input type="checkbox" id="White" name="extras" value="whiteSugar" dispText='White Sugar'/>White Sugar</li>

You could then extract this with .getAttribute('dispText'), rather than .id

E.g byId('drinkResult').innerHTML = radioList[i].getAttribute('dispText');

Doing so would then mean you display the text "White Sugar", rather than "White" as it does currently.

3. Since you can only have 1 radio button in a group selected at once, you dont need to iterate through the collection of them when one is pressed. You simply attach a handler to the object, handling the click event. Since the handler is attached to and in fact, a part of, each radio element - the function can access the element with the keyword this. You can the attach the same function to each radio-button. The function simply gets the text of whichever element triggered it, before saving it somewhere. You still need to iterate through the collection of radios on startup though - this will let you set a default option in the HTML, with the javascript reflecting this default when the page loads.

4. Use of document.querySelectorAll is a recent addition to the HTML spec. It wont work with older browsers - look up when it was introduced and compatible browsers to see if its a viable option for you.

Javascript:

function byId(e){return document.getElementById(e);}
window.addEventListener('load', mInit, false);

function mInit()
{
    var radioList = document.querySelectorAll('input[type=radio]');
    var i, n = radioList.length;
    for (i=0; i<n; i++)
    {
        radioList[i].addEventListener('click', onIngredRadioClick, false);
        if (radioList[i].checked)
            byId('drinkResult').innerHTML = radioList[i].id;
    }

    var checkList = document.querySelectorAll('input[type=checkbox]');
    n = checkList.length;
    for (i=0; i<n; i++)
    {
        checkList[i].addEventListener('click', onExtrasCheckboxClick, false);
    }
}

function onIngredRadioClick(e)
{
    var curSel = this.id;
    byId('drinkResult').innerHTML = curSel;
}

function onExtrasCheckboxClick(e)
{
    var checkList = document.querySelectorAll('input[type=checkbox]');
    var i, n = checkList.length;
    var msg = '';
    for (i=0; i<n; i++)
    {
        if (checkList[i].checked)
        {
            // add a comma in front of all items except the first
            // adding it after each element often leaves us with a 
            // 'dangling' comma as the last character in the line.
            if (msg.length != 0)
                msg += ',';

            msg += checkList[i].id;
        }
    }
    byId('extrasResult').innerHTML = msg;
}

HTML:

<p>Drinks:</p>
<ul>
    <li><input type="radio" id="Tea"       name="ingred" value="teabag" checked      />Teabag</li>
    <li><input type="radio" id="Coffee"    name="ingred" value="coffee_beans"        />Coffee Beans</li>
    <li><input type="radio" id="Chocolate" name="ingred" value="chocolate_granules"  />Hot Chocolate Granules</li>
    <li><input type="radio" id="Bovril"    name="ingred" value="bovril_sludge"       />Bovril Sludge</li>
</ul>

<p>Extras:</p>
   <ul>
     <li><input type="checkbox" id="Milk"  name="extras" value="milk" />Milk</li>
     <li><input type="checkbox" id="White" name="extras" value="whiteSugar" />White Sugar</li>
     <li><input type="checkbox" id="Brown" name="extras" value="brownSugar" />Brown Sugar</li>
     <li><input type="checkbox" id="Honey" name="extras" value="honey" />Honey</li>
   </ul>
<span id='drinkResult'></span><span id='hideMe'> with </span><span id='extrasResult'></span>

Need Your Help

Why Stackoverflow binds user actions dynamically with javascript?

javascript jquery

Checking the HTML source of a question I see for instance:

Install apache module X-Sendfile on MAMP

apache mamp x-sendfile apache-modules

How can I install X-Sendfile apache module so that MAMP can use it?