1 / 11

BIT116 : Scripting

Learn about radio buttons in scripting and how to use them in HTML forms. Understand their functionality and how to handle user inputs.

ophelian
Download Presentation

BIT116 : Scripting

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 SoSoand Low. • Totally A Ton!!!!<br/> = Notice that the text is outside the button and unconnected to it

  8. $("#getFeedback").click( function() { varwhichOne = $('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() { varwhichOne = $('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. $("#getFeedback").click( function() { varwhichOne = $('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

More Related