1. BIT116: Scripting
Radio Buttons

2. Let’s first review due dates
A2 first revision is due today
A1 revision is (technically) due at the start of next class
I promise that I’ll grade the midterm exam before A1 revision
So you’ll (technically) have an extra day or two to finish A1
Remember that you can upload your work as many times as you’d like…. … just make sure to include a complete copy (ALL FILES) even if you haven’t changed some
A3 is due in 1 week

3. Today
Quiz
Go over the Midterm Topic List
Radio Buttons
Check boxes

4. Radio buttons

5. Radio buttons 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)
We need to define the text separately
"Cat", "Dog", and "Turtle" in the above image
FILE: radio_buttons_demo.html

6. What the demo page looks like:

7. <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

8. $("#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') = Amongst 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)

9. $("#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

10. // <snip> - to fit everything on one slide 
$("#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

11. Do Exercises
Work on Exercise #1 for the 'radio buttons' section of this lecture