Example: Radio Buttons and Checkboxes Onclick

This example pizza order form demonstrates using JavaScript to handle radio buttons and checkboxes onclick.

Example Form: Radio Buttons and Checkboxes Onclick

Size:

Toppings:

(Submit button disabled for online demo)

Example Form Markup

The markup for the form is displayed here:

<form action="#" method="post" class="demoForm" id="pizzaForm">
    <fieldset>
    <legend>Example Form: Order Pizza</legend>
    
    <p>Size:
        <label><input type="radio" name="size" value="5" /> Small</label>
        <label><input type="radio" name="size" value="8" checked="checked" /> Medium</label>
        <label><input type="radio" name="size" value="12" /> Large</label>
        <input type="hidden" name="sz_tot" value="0.00" />
    </p>
    
    <p id="pizza_toppings">Toppings:
        <label><input type="checkbox" name="mushrooms" value=".40" /> mushrooms</label>
        <label><input type="checkbox" name="onions" value=".30" /> onions</label>
        <label><input type="checkbox" name="black_olives" value=".40" /> black olives</label>
        <label><input type="checkbox" name="sausage" value=".50" /> sausage</label>
        <label><input type="checkbox" name="pepperoni" value=".50" /> pepperoni</label>
        <input type="hidden" name="tops_tot" value="0.00" />
    </p>
    
    <p><label>Total: $ <input type="text" name="total" class="num" value="0.00" readonly="readonly" /></label></p>
    
    <p><input type="submit" name="submit" value="Submit" disabled /> (Submit button disabled for online demo)</p>
    
    </fieldset>
</form>

JavaScript for Radio Buttons and Checkboxes Onclick

The JavaScript used to handle the radio buttons and checkboxes onclick is displayed here:

// removes from global namespace
(function() {
        
    // format val to n number of decimal places
    // modified version of Danny Goodman's (JS Bible)
    function formatDecimal(val, n) {
        n = n || 2;
        var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
        while (str.length <= n) {
            str = "0" + str;
        }
        var pt = str.length - n;
        return str.slice(0,pt) + "." + str.slice(pt);
    }
    
    function getRadioVal(form, name) {
        var radios = form.elements[name];
        var val;
        
        for (var i=0, len=radios.length; i<len; i++) {
            if ( radios[i].checked == true ) {
                val = radios[i].value;
                break;
            }
        }
        return val;
    }
    
    function getToppingsTotal(e) {
        var form = this.form;
        var val = parseFloat( form.elements['tops_tot'].value );
        
        if ( this.checked == true ) {
            val += parseFloat(this.value);
        } else {
            val -= parseFloat(this.value);
        }
        
        form.elements['tops_tot'].value = formatDecimal(val);
        updatePizzaTotal(form);
    }
    
    function getSizePrice(e) {
        this.form.elements['sz_tot'].value = parseFloat( this.value );
        updatePizzaTotal(this.form);
    }
    
    function updatePizzaTotal(form) {
        var sz_tot = parseFloat( form.elements['sz_tot'].value );
        var tops_tot = parseFloat( form.elements['tops_tot'].value );
        form.elements['total'].value = formatDecimal( sz_tot + tops_tot );
    }

    
    
    var form = document.getElementById('pizzaForm');

    var el = document.getElementById('pizza_toppings');

    // input in toppings container element
    var tops = el.getElementsByTagName('input');

    for (var i=0, len=tops.length; i<len; i++) {
        if ( tops[i].type === 'checkbox' ) {
            tops[i].onclick = getToppingsTotal;
        }
    }

    var sz = form.elements['size'];
    
    for (var i=0, len=sz.length; i<len; i++) {
        sz[i].onclick = getSizePrice;
    }
    
    // set sz_tot to value of selected
    form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'size') ) );
    updatePizzaTotal(form);

}());

Find out more about the JavaScript used to handle radio buttons and checkboxes onclick.

View the source code of this page to locate the form markup and associated JavaScript. It is near the top, separated from other page content by comments.

Back to top