Javascript: Processing radio buttons using for loop

This entry is part 22 of 27 in the series Javascript Tutorial

In the earlier example, we have used many if else loops to process the radio buttons.

A more elegant way is to use for loop.

<!DOCTYPE html>
<html>
<head>
    <title>Form with radio buttons</title>
    <script>
        function submitForm(form) {

            var item;
            var i;
            var length;

            var radio_button = document.getElementsByName('radio_button');

            length = radio_button.length;

            for (i = 0; i < length; i++) {
                if (radio_button[i].checked) {
                    item = radio_button[i].value;
                    document.getElementById("buy_id").innerHTML = item;
                }
            }
        }
    </script>
</head>
<body>
<form>
    <p>What would you like to buy this year?</p>
    <input type="radio" name="radio_button" value="iPad" checked="checked">iPad<br>
    <input type="radio" name="radio_button" value="Camera">Camera<br>
    <input type="radio" name="radio_button" value="iPhone">iPhone<br>
    <input type="radio" name="radio_button" value="Car">Car<br>
    <input type="radio" name="radio_button" value="House">House<br>
    <input type="radio" name="radio_button" value="Aeroplane">Aeroplane<br>
    <input type="button" value="Submit" onclick="submitForm(this.form)">
</form>
<p>What I have bought</p>

<h3 id="buy_id"></h3>
</body>
</html>

 

The codes used in this example are a lot shorter and the number of lines needed in this for loop is almost equivalent to one if loop in the earlier example.

 

Javascript: Form with radio buttons

This entry is part 19 of 27 in the series Javascript Tutorial

Now we look at how to pass values into a form with radio buttons.

<!DOCTYPE html>
<html>
<head>
    <title>Form Inputs</title>
    <script>
        function submitForm(form) {
 
            var item;
 
            var rad_button = document.getElementsByName('radio_button');
 
            if (rad_button[0].checked) {
                item = rad_button[0].value;
            } else if (rad_button[1].checked) {
                item = rad_button[1].value;
            }
            document.getElementById('buy_id').innerHTML = item;
        }
    </script>
</head>
<body>
<p>What would you like to buy this year?</p><br/>
 
<form>
    <input type='radio' name='radio_button' value='ipad' checked='checked'>iPad<br>
    <input type='radio' name='radio_button' value='camera'>Camera<br><br>
    <input type='button' value='Submit' onclick='submitForm(form)'>
</form>
<p>I bought a</p>
 
<h2 id='buy_id'></h2>
</body>
</html>
.

In order to access the value of radio buttons, we pass the name radio_button into a variable rad_button using getElementsByName.

You can also see how the value of the first button is accessed by rad_button[0] and the second value by rad_button[1].

A group of radio buttons is actually arranged in an Array datatype.  This is an important concept in HTML elements and we will get more into this in the later articles.
 

CSS3: Designing buttons with attributes

This entry is part 4 of 13 in the series CSS3

We will now design 3 buttons with a combination of attribute selectors, box shadow, border-radius, multiple backgrounds, and CSS gradients to achieve the effects as in the buttons below.
 
CSS Gradients

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>CSS Gradients</title>
    <style>
        input {
            border: none;
            -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
            box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
            -webkit-border-radius: 10px;
            border-radius: 10px;
            cursor: pointer;
            color: #fff;
            font: bold 1.2em Arial, Helvetica, sans-serif;
            margin: 0 10px 0 0;
            padding: 10px 10px 10px 10px;
            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
        }

        input[type='submit'] {
            background: #91BD09;
            background: -webkit-linear-gradient(#91BD09, #578730);
            background: -moz-linear-gradient(#91BD09, #578730);
            background: linear-gradient(#91BD09, #578730);
        }

        input[value='Cancel'] {
            background: #b53109;
            background: -webkit-linear-gradient(#b53109, #540303);
            background: -moz-linear-gradient(#b53109, #540303);
            background: linear-gradient(#b53109, #540303);
        }

        input[type='reset'] {
            background: #f0bb18;
            background: -webkit-linear-gradient(#f0bb18, #a46b07);
            background: -moz-linear-gradient(#f0bb18, #a46b07);
            background: linear-gradient(#f0bb18, #a46b07);
        }

    </style>
</head>
<body>

<input type='submit' id='submit' name='submit' value='Submit'/>
<input type='reset' id='reset' name='reset' value='Reset'/>
<input type='submit' id='cancel' name='cancel' value='Cancel'/>

</body>
</html>

jQuery Mobile: Icon sets

This entry is part 46 of 73 in the series jQuery Mobile

A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, listview buttons and more. There is a SVG and a PNG image of each icon.

Icon Sets
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Button Icons</h1></div>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">action</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-alert">alert</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d">arrow-d</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d-l">arrow-d-l</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-d-r">arrow-d-r</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-l">arrow-l</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-r">arrow-r</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-u">arrow-u</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-u-l">arrow-u-l</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-arrow-u-r">arrow-u-r</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-audio">audio</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-back">back</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-bars">bars</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-bullets">bullets</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar">calendar</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-camera">camera</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-carat-d">carat-d</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-carat-l">carat-l</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-carat-r">carat-r</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-carat-u">carat-u</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-check">check</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-clock">clock</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-cloud">cloud</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-comment">comment</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete">delete</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-edit">edit</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-eye">eye</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-forbidden">forbidden</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-forward">forward</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-gear">gear</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-grid">grid</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-heart">heart</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home">home</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-info">info</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-location">location</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-lock">lock</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-mail">mail</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-minus">minus</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-navigation">navigation</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-phone">phone</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">plus</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-power">power</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-recycle">recycle</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-refresh">refresh</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-search">search</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-shop">shop</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-star">star</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-tag">tag</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-user">user</button>
    <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-video">video</button>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code