Essentially, I have the option to attend yes or no events. If 'no' is chosen, the dropdown menus are hidden.
However, even when a validation error occurs upon submission, is there a way to disregard hidden elements during validation?
The script on my page:
1. <SCRIPT LANGUAGE="JavaScript"'>
2. <!--
3. function validateForm(){
4. if(document.colour.list1.selectedIndex==0)
5. {
6. alert("Please select an Item.");
7. document.colour.list1.focus();
8. return false;
9. }
10. return true;
11. }
12. //-->
13.
14.
15.</script>
16.<script type="text/javascript">
17.window.onload=registerEventHandlers;
18. function registerEventHandlers()
19.{
20. document.getElementById("radio1").onclick = function(){
21. hideDiv(this,"list1")
22. };
23. document.getElementById("radio2").onclick = function(){
24. showDiv(this,"list1")
25. };
26. }
27.
28. function showDiv(targetElement,toggleElementId){
29.
30. var showAll=document.getElementsByTagName("div"),
31. i,
32. re = new RegExp('\\b' + toggleElementId + '\\b');
33. for(i=0; i < showAll.length; i++){
34. if (re.test(showAll[i].className)) {
35. showAll[i].style.visibility="visible";
36. showAll[i].style.display="block";
37. }
38. }
39.}
40.function hideDiv(targetElement,toggleElementId){
41. var hideAll=document.getElementsByTagName("div"),
42. i,
43. re = new RegExp('\\b' + toggleElementId + '\\b');
44. for(i=0; i < hideAll.length; i++){
45. if (re.test(hideAll[i].className)) {
46. hideAll[i].style.visibility="hidden";
47. hideAll[i].style.display="none";
48. }
49. }
50.}
51.</script>
52.
53.
54.
55.Yes:<input type="radio" id="radio2" name="yesNo" value="yes" />
56.No:<input type="radio" id="radio1" name="yesNo" value="no"/>
57.<div class="list1" style="display: none;" >
58. <select name="colour">
59. <option>Please Select</option>
60. <option>red</option>
61. <option>orange</option>
62. <option>blue</option>
63. </select>
64.</div>
65. <div class="list1" style="display: none;" >
66.<select name="shade">
67. <option>Please Select</option>
68. <option>dark</option>
69. <option>light</option>
70.</select>
71.</div>