Javascript: Looping through radio buttons without jQuery

There are times when you don’t have access to a third-party library such as jQuery to make life easy and those are the times where you regret not paying any attention to how actual javascript works. Going through radio buttons with jQuery is very easy, but with javascript it is a little bit more unclear if you haven’t done it before.

I’m going to show you a very simple example where I have four radio buttons and I want to know which one is selected:

index.htm

<!DOCUMENT html>
<html>
	<head>
		<title>Javascript Radio Button Demo</title>
		<script type="text/javascript" src="MyScript.js"></script>
	</head>
	<body>
		<h1>My Form with radio buttons!</h1>
		<form id="MyForm" name="MyForm" action="#" method="GET">
			<p><input type="radio" name="direction" value="north"> North</p>
			<p><input type="radio" name="direction" value="east"> East</p>
			<p><input type="radio" name="direction" value="south"> South</p>
			<p><input type="radio" name="direction" value="west"> West</p>
			
			<p><input type="submit" name="submit" value="Submit"></p>
		</div>
	</body>
</html>

MyScript.js

window.onload = function()
{
	//Fetch the form element
	var form = document.getElementById("MyForm");
	
	//Bind the 'onsubmit' event to an anonymous function
	form.onsubmit = function()
	{
		//Find out how many radio buttons you have
		var numberOfDirections = form.direction.length;
		
		//Loop through the radio buttons
		for(var i = 0; i < numberOfDirections; i++)
		{
			//Select a radio button
			var direction = form.direction[i];
			
			//Check if the radio button is checked
			if(direction.checked)
			{
				alert("You selected " + direction.value);
			}
		}
		
		return false;
	}
}

What is important is that the name-tag is the same for all radio buttons that are considered to be part of the same group. This way the document-object will generate array properties in the form-objects for the radio buttons. As we loop through that array we can check if the radio button checked-property is true. If it is, we found the checked radio button.

Nifty Notepad++ features

Notepad++ has several kewl features  and I thought I’d list some of them here:

 

Autoclose HTML-tags

If you are working in HTML or XML files you can get Notepad++ to close your HTML-tags for your. Simply go to TextFX => TextFX Settings => +Autoclose XHTML/XML <Tag>.

 

Encode HTML

If you need to add HTML-code to a HTML-page you have the problem that the code is interpreted as, well, HTML. This means you need to convert the tags and Notepad++ will do this for you. Select the section you want to encode in Notepad++ and go to TextFX => TextFX Convert => Encode HTML (&<>!).

 

Run your file

Use the run menu to launch your file in a web browser. Use the Modify option at the bottom of the list to change the short cuts.

 

Line up your CSS files

This one is quite nifty and it makes your CSS beautiful. Select a colon (:) in your CSS file, then highlight all the text and go to TextFX => TextFX Edit => Line up Multiple Lines by (Clipboard Character):

Before
Before
After
After

 

Use auto complete

Go to Settings => Preferences => Backup/Auto-completion and check the “Enable auto-completion on each input”-box.

 

 Use the Plugin-manager to install plugins

Some people think it’s to complex to install plugins in notepad++. “You have to download the DLL files and dump them in the correct folder etc”. Bah! Use the plugin-manager, it’s what it is there for! Go to Plugins => Plugin Manager => Show Plugin Manager and simply select the plugins you want to install. Afterwards, restart notepad++ and you’ll find your new plugins in the Plugin menu.

 

Column select

By holding down ALT while selecting text you can select text by column instead of row:

 

Remove row

If you press CTRL + L you will remove the row where your cursor currently resides.