Processing_user_input_part_2

Ok. We've seen how to add user inputs to a form, and how to get the value of text boxes, popup menus and text areas. Now it is time to get information from checkboxes and radio buttons.

Consider the following form code: code format="html4strict"   I understand.

code This creates a checkbox with the words "I understand" to the right of it. We could also put a button in here that calls a javascript function, but in this case, I am having it call the function, understandingUpdated, whenever the user checks or unchecks the box. Next, let's add in a bit of javascript to determine whether the box is checked or not. To do this, we have two things to learn. The first of these is the "checked" attribute of the checkboxes. The quantity "document.forms[0].understand.checked" is either true or false. media type="custom" key="2741267" We can use an "if" statement to determine whether it is true or not. The syntax for this is as follows: code format="html4strict" if (//expression//) {  //what to do if expression is true// } else {  //what to do if expression is false// } //what to do next, regardless.// code The "expression" is a true or false statement, such as "document.forms[0].understand.checked." The "what to do" placeholders are any javascript code you like, including more if statements. The "else" command and following curly bracket set are optional. So in this case, we will say: code format="html4strict"  function updateCheck {   if (document.forms[0].understand.checked) {            document.getElementById("status").style.visibility = "visible"; }         else {            document.getElementById("status").style.visibility = "hidden"; }  } code So now, if i add a called "status" that has a message, I get a layer that appears and disappears. media type="custom" key="2741263"

Radio Buttons
Radio buttons have a slightly different challenge. For them to work properly, you have a set of radios that are all named the same thing. This is how they know how to stay mutually exclusive. Other than that, they are just round checkboxes. In fact, they, too have a "checked" attribute. The trick is determining which radio button you are talking about. Consider the following form: code format="html4strict"  None

Dashed

Dotted

Double

code In this code snippet, I created a new form, which has a contained inside of it. (In general, you don't need to put a here - but we are going to be changing the border of the with the radios this time, so that's why it is here.) Inside the form are four radio buttons, each with the same name but different values. (Actually, in this case, we aren't using the values.) Each of them has a different piece of text next to it, and if the user changes the state of any one of them, the as-yet-unwritten updateRadio function will be called. The first radio button is pre-checked when the page is loaded. Now to write the javascript: The updateRadio function has to check through the radio buttons one by one to see whether each one is checked. (Only one should be.) Again, the trick is determining which radio is which, since they all have the same name. Actually it is not that bad. The "none" radio button is actually referred to as borderType[0], the "dashed" button is borderType[1], and so forth. As we have discussed previously, the lists always start with 0. Here is what the javascript would look like: code format="html4strict"  function updateRadio {			if (document.forms[1].borderType[0].checked) {				document.getElementById("radioLayer").style.borderStyle = "none"; }			if (document.forms[1].borderType[1].checked) {				document.getElementById("radioLayer").style.borderStyle = "dashed"; }			if (document.forms[1].borderType[2].checked) {				document.getElementById("radioLayer").style.borderStyle = "dotted"; }			if (document.forms[2].borderType[3].checked) {				document.getElementById("radioLayer").style.borderStyle = "double"; }		} code As you can see, the function has four repeating steps. Each one checks to see whether that particular radio button is checked. Note we are using forms[1] for the second form here. If so, then it changes the border-style of the that surrounds the radio buttons. The result can be seen below: media type="custom" key="2741437"

Radios and checkboxes can be very handy in things like quizzes. There are ways to streamline the radio button analysis, if you like, but they involve loops, which we won't be studying until next semester. If you would like an early preview of how to do this, see me and we can set up a time.