Radio Buttons
HTML Radio buttons
2
 Image from: https://en.wikipedia.org/wiki/Radio_button
 HTML:
 We're NOT going to use id here
 (we can't have duplicates id's)
 Instead, we're going to give all the individual HTML elements the same name
 (name attribute allows for duplicates)
 FILE: radio_buttons_demo.html
3
4
<h2>Radio Buttons</h2>
<form>
<h3>How much does BIT 116 rock?</h3>
<p>
<input type="radio" name="enthusiasm" value="High">Totally A Ton!!!!<br/>
Text before button <input type="radio" name="enthusiasm" value="SoSo"> It's Ok <!-- since there's no br,
there's no line break -->
<input type="radio" name="enthusiasm" value="Low">Why, God, why did I sign up for this class?<br/>
<input type="button" id="getFeedback" value="Click here for feedback!">
</p>
</form>
<p id="msgHere">Some Fascinating Text! That I will change! With jQuery!</p>
 <input = Start of the button itself. Note that there's no closing tag. This element puts ONLY the button




on the page
type="radio" = Tells the browser to put a radio button on the page
name="enthusiasm" = We picked enthusiasm. Pick any valid name you want, but be consistent
value="High"> = Again, pick anything you want (we picked High). Each button needs to have a
unique value. For the others we picked SoSo and Low.
Totally A Ton!!!!<br/> = Notice that the text is outside the button and unconnected to it
5
$("#getFeedback").click( function() {
var whichOne = $('input:radio[name=enthusiasm]:checked').val();
// First, what do we get:
//
>>> is added so it's clear what the var is, even if it's empty/blank
alert(">>>" + whichOne + "<<<");
 $('input = We're going to start by asking for all the 'input elements, and then filtering out the ones
we're not interested in
 :radio = Ignore (filter out) anything who's type is not radio
 (as specified using the type="radio" attribute in the HTML – see previous slide)
 [name=enthusiasm] = Amongst the radio buttons, only look at those elements who have a name
attribute and that name attribute is 'enthusiasm'
 :checked') = With the radio inputs named 'enthusiasm', select the one that is checked (if any)
 .val(); = Finally, get the value from that button. The value will be either High, SoSo, or Low (as
specified using the value="…"> attribute in the HTML – see previous slide)
6
$("#getFeedback").click( function() {
var whichOne = $('input:radio[name=enthusiasm]:checked').val();
// First, what do we get:
//
>>> is added so it's clear what the var is, even if it's empty/blank
alert(">>>" + whichOne + "<<<");
if( whichOne === undefined )
$("#msgHere").html( "You need to make a choice!");
else if( whichOne === "High" )
$("#msgHere").html( "Great! I'm glad that you're enjoying the course");
else if( whichOne === "SoSo" )
$("#msgHere").html( "That's too bad. What can I do to help?");
else if( whichOne === "Low" )
$("#msgHere").html( "That's definitely too bad! Please talk to the prof to get some help ASAP!! :( :(
:(");
else
$("#msgHere").html( "INTERNAL ERROR: We should never execute this line of code!!");
});
7
$("#getFeedback").click( function() {
var whichOne = $('input:radio[name=enthusiasm]:checked').val();
// First, what do we get:
//
>>> is added so it's clear what the var is, even if it's empty/blank
alert(">>>" + whichOne + "<<<");
 We're going to start off by simply showing the value of the radio button
8
$("#getFeedback").click( function() {
var whichOne = $('input:radio[name=enthusiasm]:checked').val();
// <snip> - to fit everything on one slide 
if( whichOne === undefined )
$("#msgHere").html( "You need to make a choice!");
else if( whichOne === "High" )
$("#msgHere").html( "Great! I'm glad that you're enjoying the course");
else if( whichOne === "SoSo" )
$("#msgHere").html( "That's too bad. What can I do to help?");
else if( whichOne === "Low" )
$("#msgHere").html( "That's definitely too bad! Please talk to the prof to get some help ASAP!! :( :( :(");
else
$("#msgHere").html( "INTERNAL ERROR: We should never execute this line of
code!!");
});
 if( whichOne === undefined ) = check if the user didn't select anything
 NOTE: there's no quotes around the undefined !!!
 if( whichOne === "High" ) = Otherwise look for the text that we specified in the HTML
 else = We shouldn't need this, but it's better to be safe than sorry
9
 If
 Form validation
 If not a number, etc?  HTML
 If…else
 2-item radio buttons?  HTML
 Multiway
 An item in a list is best described as ____________
 Day or week
 Grade (small scale)
 Default case is an error
 N-way radio button  HTML
 Drop-down list  HTML
 Logical ops
 Guessing game?
 Figuring out tax in a variety of states, for a variety of items?
10
 http://www.webmonkey.com/2010/02/javascript_debugging_for_beginners/
 Keep the console open
 Assertions
 Using alert
 Using console.log
 Printing out objects (including fields)
 http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code
 Using an actual debugger – debugger;
 Console.log( " object: %o string: %s", obj, obj.property);
11