Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript JavaScript Get Radio Button Value

JavaScript Get Radio Button Value

Just a simple example that get selected value of a group of radio button. In order to read the selected value, we need to loop through radio button in the list, compare then find out which radio item is selected.

Example below is just one of various ways that get value of selected radio button. We will use getElementsByTagName() method to access all input elements, compare with name of the group of radio button and determine whether a particular item is checked via a loop.

Get Radio Button Selected Value

1. Display list of radio button in HTML

<div class="center">
	<div style="line-height:20px; padding-bottom:10px;">
		Visa: <input type="radio" name="payment_option" value="Visa" /><br />
		Master: <input type="radio" name="payment_option" value="Master" /><br />
		American Express: <input type="radio" name="payment_option" value="AmericanExpress" /><br />
		Paypal: <input type="radio" name="payment_option" value="Paypal" /><br />
		Bank Account: <input type="radio" name="payment_option" value="Bank" /><br />
	</div>
	<input class="button" type="button" id="btn_deposit" value="Check" onclick="setClick();" />
</div>

<div class="center"> <div style="line-height:20px; padding-bottom:10px;"> Visa: <input type="radio" name="payment_option" value="Visa" /><br /> Master: <input type="radio" name="payment_option" value="Master" /><br /> American Express: <input type="radio" name="payment_option" value="AmericanExpress" /><br /> Paypal: <input type="radio" name="payment_option" value="Paypal" /><br /> Bank Account: <input type="radio" name="payment_option" value="Bank" /><br /> </div> <input class="button" type="button" id="btn_deposit" value="Check" onclick="setClick();" /> </div>

2. JavaScript Get Radio Button Value

<script language="javascript">
function setClick()
{
	var payment_options = document.getElementsByTagName('input');
	var payment_option = '';
	for (var i = 0; i < payment_options.length; i++) {
		if (payment_options[i].name == 'payment_option' && payment_options[i].checked) {
			payment_option = payment_options[i].value;
			break;
		}
	}
 
	if(payment_option != "")
		alert("payment_option: " + payment_option);
	else
		alert("Please select a payment method!");
}
</script>

<script language="javascript"> function setClick() { var payment_options = document.getElementsByTagName('input'); var payment_option = ''; for (var i = 0; i < payment_options.length; i++) { if (payment_options[i].name == 'payment_option' && payment_options[i].checked) { payment_option = payment_options[i].value; break; } } if(payment_option != "") alert("payment_option: " + payment_option); else alert("Please select a payment method!"); } </script>

+ [download id=”7″ format=”1″]
+ Check out demonstration page

Feb 13, 2012Hoan Huynh

Source Code Demo page

Visual Studio Auto generate comments using GhostDoc pluginCapture WebPage Right On Google Chrome
You Might Also Like:
  • JQuery Get selected value of radio button
  • Facebook Like Button And Recommend Button With fb:like, iframe and html5
  • Get Image Width Height With JQuery And JavaScript
  • Javascript Problem Set focus textbox on Firefox
  • How To Track Website With Multiple Google Analytisc Accounts
  • JavaScript Detect Protocol (HTTP/ HTTPS) To Load Or Handle Accordingly
  • Javascript generate a random number using Math.random
  • Create Count Down Download Page With JavaScript
  • Jquery checkbox checked
  • Create Pie Chart With HTML & JavaScript
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

10 years ago Javascriptchecked, getElementsByTagName198
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,444 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,824 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,638 views
JQuery Allow only numeric characters or only alphabet characters in textbox
14,982 views
C# Read Json From URL And Parse/Deserialize Json
11,694 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development