• Development Area Contents

Improving the Squad-sorting Select element

The squad.asp page of Battrick has a select element which can be used to sort the order of the squad. This investigation looks at how the use of this element can be improved.

To avoid any possible insight into the variables used within Battrick, some of the ASP code has been removed.

---

Contents of this page

---

Current code

1. <FORM NAME='SOrder' Method='POST' action='natsquad.asp?userID=<%=sortTeamID%>'>
2. <SELECT NAME='OrderBy' onchange="document.SOrder.submit()">
3. <%If … Then%>
4. <OPTION VALUE=6<%if … Then response.write " SELECTED"%>>Shirt No</OPTION>
5. <%End If%>
6. <OPTION VALUE=1<%if … Then response.write " SELECTED"%>>First name</OPTION>
7. <OPTION VALUE=2<%if … Then response.write " SELECTED"%>>Last name</OPTION>
8. <OPTION VALUE=3<%if … Then response.write " SELECTED"%>>Player ID</OPTION>
9. <OPTION VALUE=4<%if … Then response.write " SELECTED"%>>Age</OPTION>
10. <OPTION VALUE=5<%if … Then response.write " SELECTED"%>>Battrick Rating</OPTION>
11. <%If … Then%>
12. <OPTION VALUE="">---------------</OPTION>
13. <OPTION VALUE=7<%if … Then response.write " SELECTED"%>>Batting</OPTION>
14. <OPTION VALUE=8<%if … Then response.write " SELECTED"%>>Bowling</OPTION>
15. <OPTION VALUE=9<%if … Then response.write " SELECTED"%>>Wicket Keeping</OPTION>
16. <<OPTION VALUE=10<%if … Then response.write " SELECTED"%>>Fielding</OPTION>
17. <OPTION VALUE=11<%if … Then response.write " SELECTED"%>>Stamina</OPTION>
18. <%If … Then%>
19. <OPTION VALUE=13<%if … Then response.write " SELECTED"%>>Fitness Level</OPTION>
20. <%Else%>
21. <OPTION VALUE=12<%if … Then response.write " SELECTED"%>>Fitness Level</OPTION>
22. <%End If
23. End If%>
24. </SELECT>
25. </FORM>

Improvement 1 - Code

• Convert HTML to lowercase
• Convert boolean attribute to attribute="value" for XHTML
• Quotify Value attribute value.

1. <form name="SOrder" method="POST" action="natsquad.asp?userID=<%=sortTeamID%>">
2. <select name="OrderBy" onchange="document.SOrder.submit()">
3. <%If … Then%>
4. <option value="6"<%if … Then response.write " selected=""selected"""%>>Shirt No</option>
5. <%End If%>
6. <option value="1"<%if … Then response.write " selected=""selected"""%>>First name</option>
7. <option value="2"<%if … Then response.write " selected=""selected"""%>>Last name</option>
8. <option value="3"<%if … Then response.write " selected=""selected"""%>>Player ID</option>
9. <option value="4"<%if … Then response.write " selected=""selected"""%>>Age</option>
10. <option value="5"<%if … Then response.write " selected=""selected"""%>>Battrick Rating</option>
11. <%If … Then%>
12. <option value="">---------------</option>
13. <option value="7"<%if … Then response.write " selected=""selected"""%>>Batting</option>
14. <option value="8"<%if … Then response.write " selected=""selected"""%>>Bowling</option>
15. <option value="9"<%if … Then response.write " selected=""selected"""%>>Wicket Keeping</option>
16. <option value="10"<%if … Then response.write " selected=""selected"""%>>Fielding</option>
17. <option value="11"<%if … Then response.write " selected=""selected"""%>>Stamina</option>
18. <%If … Then%>
19. <option value="13"<%if … Then response.write " selected=""selected"""%>>Fitness Level</option>
20. <%Else%>
21. <option value="12"<%if … Then response.write " selected=""selected"""%>>Fitness Level</option>
22. <%End If
23. End If%>
24. </select>
25. </form>

Improvement 2 - Visual

• Use optgroup element for member only options

1. <form name="SOrder" method="POST" action="natsquad.asp?userID=<%=sortTeamID%>">
2. <select name="OrderBy" onchange="document.SOrder.submit()">
3. <%If … Then%>
4. <option value="6"<%if … Then response.write " selected=""selected"""%>>Shirt No</option>
5. <%End If%>
6. <option value="1"<%if … Then response.write " selected=""selected"""%>>First name</option>
7. <option value="2"<%if … Then response.write " selected=""selected"""%>>Last name</option>
8. <option value="3"<%if … Then response.write " selected=""selected"""%>>Player ID</option>
9. <option value="4"<%if … Then response.write " selected=""selected"""%>>Age</option>
10. <option value="5"<%if … Then response.write " selected=""selected"""%>>Battrick Rating</option>
11. <%If … Then%>
12. <optgroup label="---- Skill ----">
13. <option value="7"<%if … Then response.write " selected=""selected"""%>>Batting</option>
14. <option value="8"<%if … Then response.write " selected=""selected"""%>>Bowling</option>
15. <option value="9"<%if … Then response.write " selected=""selected"""%>>Wicket Keeping</option>
16. <option value="10"<%if … Then response.write " selected=""selected"""%>>Fielding</option>
17. <option value="11"<%if … Then response.write " selected=""selected"""%>>Stamina</option>
18. <%If … Then%>
19. <option value="13"<%if … Then response.write " selected=""selected"""%>>Fitness Level</option>
20. <%Else%>
21. <option value="12"<%if … Then response.write " selected=""selected"""%>>Fitness Level</option>
22. <%End If
23. </optgroup>
24. End If%>
25. </select>
26. </form>

1. optgroup option {
2. padding-left: 0;
3. }

Improvement 3 - JavaScript

Cameron explains the problem better than I can. He also provides the solution.

• Changed form name attribute to form id.
• Added select id attribute.
• Removed select onchange attribute
• Page links to select_onchange.js

1. <form id="SOrder" method="POST" action="natsquad.asp?userID=<%=…%>">
2. <select id="OrderBy" name="OrderBy" onchange="document.SOrder.submit()">
3. <%If … Then%>
4. <option value="6"<%if … Then response.write " selected=""selected"""%>>Shirt No</option>
5. <%End If%>
6. <option value="1"<%if … Then response.write " selected=""selected"""%>>First name</option>
7. <option value="2"<%if … Then response.write " selected=""selected"""%>>Last name</option>
8. <option value="3"<%if … Then response.write " selected=""selected"""%>>Player ID</option>
9. <option value="4"<%if … Then response.write " selected=""selected"""%>>Age</option>
10. <option value="5"<%if … Then response.write " selected=""selected"""%>>Battrick Rating</option>
11. <%If … Then%>
12. <optgroup label="---- Skill ----">
13. <option value="7"<%if … Then response.write " selected=""selected"""%>>Batting</option>
14. <option value="8"<%if … Then response.write " selected=""selected"""%>>Bowling</option>
15. <option value="9"<%if … Then response.write " selected=""selected"""%>>Wicket Keeping</option>
16. <option value="10"<%if … Then response.write " selected=""selected"""%>>Fielding</option>
17. <option value="11"<%if … Then response.write " selected=""selected"""%>>Stamina</option>
18. <%If … Then%>
19. <option value="13"<%if … Then response.write " selected=""selected"""%>>Fitness Level</option>
20. <%Else%>
21. <option value="12"<%if … Then response.write " selected=""selected"""%>>Fitness Level</option>
22. <%End If
23. </optgroup>
24. End If%>
25. </select>
26. </form>

Final Working version

Shirt No First Name Last Name Player ID Age Battrick Rating Batting Bowling Wicket Keeping Fielding Stamina Fitness Level

Tags

• accessibility
• asp
• battrick
• development
• navigation
• select
• xhtml

Last updated: 19th Jan 2008 08:37