BIT116: Scripting Radio Buttons

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

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

Radio buttons

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

What the demo page looks like:

<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

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

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

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

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