Radio Buttons

1. Radio Buttons

2. Input/Form/Radio Group

3. Use the dialog to enter label and values for the radio buttons

4. Result in Design View

5. Result in Code View Note that this is a place where the name and id attributes are not the same. All of the radio buttons in a group (only one from the group can be selected) have the same name but different ids.

6. Server-side using switch statement

7. In Browser

8. To vertically align the table cell, highlight the cell, go to the Property Inspector, use the drop-down list next to Vert

9. Vertical aligning in code and design

10. Server-side using an array

11. Adding a client-side (JavaScript) validation to make sure a radiobutton was selected Add an onclick attribute to the submit button

12. Define function that ensures on of the radio buttons was selected

13. For loop for(i=0; i< document.getElementsByName("radLunch").length; i++) { if(document.getElementsByName("radLunch")[i].checked) { choice=document.getElementsByName("radLunch")[i].value; } } The for loop “walks through” each radio button asking whether or not it has been checked.

14. Beginning of for loop for(i=0; i< document.getElementsByName("radLunch").length; i++) • Starts with keyword “for” • There is a set (array) of radio buttons. The variable i will play the role of an index and will proceed through the indices. The i=0 indicates that indices start at 0.

15. Beginning of for loop (Cont.) for(i=0; i< document.getElementsByName("radLunch").length; i++) • The iteration through the loop continues until the condition becomes false Condition: i< document.getElementsByName("radLunch").length • Unlike PHP, JavaScript uses the name attribute to specify a set of items -- hence getElementsByName. • The length property of an array indicates how many elements it has.

16. Beginning of for loop (Cont.) for(i=0; i< document.getElementsByName("radLunch").length; i++) • If the length is 4, then the indices are 0, 1, 2, and 3 so when i gets to 4 we should leave the loop – Hence the condition i < the length of the array. • The last part i++ is short hand for add one to the value of i and make it the new i. In other words, i is incremented.

17. Asking if a radio button is selected if(document.getElementsByName("radLunch")[i].checked) { choice=document.getElementsByName("radLunch")[i].value; } • The above code asks if the ith element of the radio button array is checked. If it is, the variable choice is set to the value property of the radio button.

18. Don’t proceed to server if no choice has been made if(choice=="") { alert("Please make a selection for lunch."); return false; } • If the choice variable is still “” then no choice was made. Call this to the user’s attention with an alert. Then return false so that the information (which is incomplete) is NOT sent to the server

19. Code Variation (more efficient) function validateForm() { var i; var choice=""; for(i=0; i< document.getElementsByName("radLunch").length; i++) { if(document.getElementsByName("radLunch")[i].checked) { choice=document.getElementsByName("radLunch")[i].value; return true; } } alert("Please make a selection for lunch."); return false; } Return true as soon as a match is found. If the loop is complete then you did not find a match – no need to ask.

20. Another variation if(document.getElementById("radLunch_"+i).checked) { choice=document.getElementById("radLunch_"+i).value; return true; } • Once inside the loop, instead of using getElementsByName (giving an array), you can use concatenation to construct the ids and use getElementById