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 multiple radio buttons

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

We first look at a form with multiple radio buttons and see how we could use simple if loops to access the buttons.

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

            var item;
            var i = 0;

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

            if (radio_button[i].checked) {
                item = radio_button[i].value;
                document.getElementById("buy_id").innerHTML = item;
            } else if (radio_button[++i].checked) {
                item = radio_button[i].value;
                document.getElementById("buy_id").innerHTML = item;
            }
            if (radio_button[++i].checked) {
                item = radio_button[i].value;
                document.getElementById("buy_id").innerHTML = item;
            }
            if (radio_button[++i].checked) {
                item = radio_button[i].value;
                document.getElementById("buy_id").innerHTML = item;
            }
            if (radio_button[++i].checked) {
                item = radio_button[i].value;
                document.getElementById("buy_id").innerHTML = item;
            }
            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>

button

When designing this form, we know how many buttons there are and so we know that there are not too many if loops that we need to use to process all the buttons.

Note also how we use ++i to increment the radio_button array and access them one by one.  In ++i, the + is an operator and it means we pre-increment i before put it into the array radio_button.

 

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.
 

HTML Form: Radio buttons

This entry is part 9 of 10 in the series HTML Form

At times, you only want users to make one selection.  This can be done by using radio buttons.

When you select a radio button, all the other buttons in the group are cleared.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

<p>Where would you like to go next?</p>

<form method='post'>
    <input type='radio' name='country' value='england' checked='checked'>England<br>
    <input type='radio' name='country' value='brazil'>Brazil<br>
    <input type='radio' name='country' value='malaysia'>Malaysia<br>

</form>

</body>
</html>

 

 

jQuery Mobile: Mini Size Radio Buttons

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

For a more compact mini size radio button, add the data-mini=’true’ attribute to the element to create a mini version.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.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.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Mini Size Radio Buttons</h1></div>
    <br>

    <p>Mini Size Radio Buttons</p>

    <form>
        <fieldset data-role='controlgroup' data-mini='true'>
            <input type='radio' name='radio_choice' id='radio_choice_id1' value='on' checked='checked'>
            <label for='radio_choice_id1'>One</label>
            <input type='radio' name='radio_choice' id='radio_choice_id2' value='off'>
            <label for='radio_choice_id2'>Two</label>
            <input type='radio' name='radio_choice' id='radio_choice_id3' value='other'>
            <label for='radio_choice_id3'>Three</label>
        </fieldset>
    </form>

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