title: Getting select option values in optgroup to show extra content
body: <p>I have browsed the forum and tried afew things mentioned in these links:
  <a href="https://stackoverflow.com/questions/2675694/how-to-get-option-value-javascript">Check if dropdown&#39;s selected option is not the first with JavaScript</a>
  <a href="https://stackoverflow.com/questions/2225901/get-index-of-select-option-in-an-optgroup-with-jquery">Get index of select option in an optgroup with jquery</a></p>
  
  <p>I am still rather basic in my knowledge of Javascript, mostly just using it for form actions. I've never used jQuery (yet), and from what I've read I don't need to for what I'm doing (so please no jQuery solutions!)</p>
  
  <p>What I am trying to do is have content show based on which button/option is clicked/selected.
  Step 1 works fine (it just shows the dropdown box when the "not a student" button is clicked. No problems there.</p>
  
  <p>Step 2 I am currently stuck on. (And I know there will be problems with step 3, but I have not got to looking at them yet).</p>
  
  <p>Step 2 needs to show a form based on whether an option in the dropdown was selected. Possibly (I am not sure yet) I will require to have a different form for each option selected (but I think once i have the base code that i can work this out using "if" and "else").</p>
  
  <p>Here is my HTML document, with the JS coding in the head.</p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;Tims Form&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .errormsg {
      color: red;
      font-style: italic;
      display:none;
      }
  
  #interest {
      display:none;
      }
  
  #msgform {
      display:none;
      }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
      function reveal()
          {
              document.getElementById("interest").style.display="block";
          }
  
      function hide()
          {
              document.getElementById("interest").style.display = "none";
          }
  
      function showForm()
              /* to display form only when dropdown selection made and submit-button pressed */
          {
              var sel=document.getElementById('interest_choice');
  
              if (sel.options[sel.selectedIndex].value == "0")
                  {
                      document.getElementById("msgform").style.display = "block";
                      document.getElementById("selection_error").style.display = "none";
                  }
  
              else { document.getElementById("msgform").style.display = "none"; 
                      document.getElementById("selection_error").style.display = "block";
                  }
          }
  
      function checkForm()
          {
              var is_valid=true;
              var email=document.getElementById("email");
  
              /* not a blank field validation */
              if (document.getElementById("firstname").value == "")
                  {
                      document.getElementById("firstname_error").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("firstname_error").style.display = "none"; }
  
              if (document.getElementById("lastname").value == "")
                  {
                      document.getElementById("lastname_error").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("lastname_error").style.display = "none"; }
  
              if (document.getElementById("subject").value == "")
                  {
                      document.getElementById("subject_error").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("subject_error").style.display = "none"; }
  
              if (document.getElementById("message").value == "")
                  {
                      document.getElementById("message_error").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("message_error").style.display = "none"; }
  
              /* email validation */
              if (email.value =="")
                  {
                      document.getElementById("email_blank").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("email_blank").style.display = "none"; }
  
              if (email.value.indexOf("@") == -1)
                  {
                      document.getElementById("email_valid").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("email_valid").style.display = "none"; }
  
              if (email.value.indexOf("@") ==0)
                  {
                      document.getElementById("email_valid").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("email_valid").style.display = "none"; }
  
              if (email.value.lastIndexOf(".")&lt;email.value.indexOf("@") )
                  {
                      document.getElementById("email_blank").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("email_blank").style.display = "none"; }
  
              if (email.value.lastIndexOf(".")&gt;((email.value.length*1)-3))
                  {
                      document.getElementById("email_valid").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("email_valid").style.display = "none"; }
  
              /* Phone data must be numeric validation */
              if (document.getElementById("phone").value="")
                  {
                      document.getElementById("phone_error").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("phone_error").style.display = "none"; }
  
              if (isNaN(document.getElementById("phone").value))
                  {
                      document.getElementById("phone_error").style.display = "block";
                      is_valid=false;
                  }
              else { document.getElementById("phone_error").style.display = "none"; }
  
          return is_valid;
          }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!-- onclick to show the div with id="interest" when Not A Student is selected --&gt;
      I am: &lt;br/&gt;
      &lt;button id="student" onclick="hide()"&gt;A Student&lt;/button&gt;
      &lt;button id="not_student" onclick="reveal()"&gt;Not A Student&lt;/button&gt;
  
  &lt;!-- if not a student --&gt;
  &lt;div id="interest"&gt;
  What area are you interested in studying?
  
  &lt;!-- dropdown (select) list with option groups 
  need a submit button to return the value before the form will show?
  --&gt;
  &lt;form&gt;
  &lt;select id="interest_choice"&gt;
      &lt;optgroup label="Arts"&gt;
          &lt;option value="arts"&gt;Arts degree&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="Business/Economics"&gt;
          &lt;option value="be_undergrad"&gt;My first degree (undergraduate)&lt;/option&gt;
          &lt;option value="be_postgrad"&gt;Postgraduate&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="Science"&gt;
          &lt;option value="science"&gt;Science degree&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="Human Sciences"&gt;
          &lt;option value="hs_undergrad"&gt;Undergraduate&lt;/option&gt;
          &lt;option value="psych_postgrad"&gt;Postgraduate Psychology&lt;/option&gt;
          &lt;option value="ling_postgrad"&gt;Postgraduate Linguistics&lt;/option&gt;
          &lt;option value="edu_postgrad"&gt;Postgraduate Education&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  &lt;button onclick="showForm()"&gt;Enquiry Form&lt;/button&gt;
  &lt;div class="errormsg" id="selection_error"&gt;Please make a selection above.&lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;!-- form --&gt;
  &lt;div id="msgform"&gt;
  &lt;form onsubmit="return checkForm();"&gt;
      &lt;fieldset&gt;
          &lt;label&gt;
              First Name:
              &lt;input type="text" name="firstname" id="firstname"&gt;
              &lt;div class="errormsg" id="firstname_error"&gt;Please enter your first name&lt;/div&gt;
          &lt;/label&gt;
          &lt;br/&gt;
          &lt;label&gt;
              Last Name:
              &lt;input type="text" name="lastname" id="lastname"&gt;
              &lt;div class="errormsg" id="lastname_error"&gt;Please enter your last name&lt;/div&gt;
          &lt;/label&gt;
          &lt;br/&gt;
          &lt;label&gt;
              Email:
              &lt;input type="text" name="email" id="email"&gt;
              &lt;div class="errormsg" id="email_blank"&gt;Please enter your email address&lt;/div&gt;
              &lt;div class="errormsg" id="email_valid"&gt;Please enter a valid email address&lt;/div&gt;
          &lt;/label&gt;
          &lt;br/&gt;
          &lt;label&gt;
              Phone:
              &lt;input type="text" name="phone" id="phone"&gt;
              &lt;div class="errormsg" id="phone_error"&gt;Please enter a numeric phone number. Do not include ().&lt;/div&gt;
          &lt;/label&gt;
          &lt;br/&gt;
          &lt;label&gt;
              Subject: (Please only submit one question per enquiry. You can submit multiple enquiries.)&lt;br/&gt;
              &lt;input type="text" name="subject" id="subject"&gt;
              &lt;div class="errormsg" id="subject_error"&gt;Please enter a subject&lt;/div&gt;
          &lt;/label&gt;
          &lt;br/&gt;
          &lt;label&gt;
              Message:
              &lt;textarea name="message" id="message"&gt;&lt;/textarea&gt;
              &lt;div class="errormsg" id="message_error"&gt;Please enter a message&lt;/div&gt;
          &lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;input type="submit" value="Submit Form"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Currently when I click "Enquiry Form" button it just refreshes the page back to the first buttons. </p>
  
  <p>And explanation and help would be appreciated!
  Thanks.</p>