title: dropdown dependent jquery input in codeigniter
body: <p>ok so now i have a working dropdown dependent forms,, example if i choose item 1 in dropdown some div would appear and if i choose item 2 some other div would appear.. my problem is that even the other div is hidden, it will still get the post values of the hidden input types in a div.. is there a way in which if a div is hidden, its posts input would not be submitted?</p>
  
  <p>here is my jquery</p>
  
  <pre><code>$(function() {
      $(".forms").hide();
      $("#myselect").change(function() {
          switch($(this).val()){ 
              case "student":
                  $(".forms").hide().parent().find("#Form1").show();
                  break;
              case "teacher":
                  $(".forms").hide().parent().find("#Form2").show();
                  break;
          }
      });
  });
  </code></pre>
  
  <p>here is my view</p>
  
  <pre><code>&lt;form&gt;
  &lt;select id="myselect"&gt;
    &lt;option value="student"&gt;student&lt;/option&gt;
    &lt;option value="teacher"&gt;teacher&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="Form1" class="forms"&gt;
  //some input here like &lt;input type="text" name="studentName"/&gt;
  &lt;/div&gt;
  
  &lt;div id="Form2" class="forms"&gt;Form 2 Contents&lt;/div&gt;
  //some input here like &lt;input type="text" name="teacherName"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>
  i have tried this one using .remove(). but it still reads the posts data from #student_profile</p>
  
  <pre><code>$(function() {
      $(".fields").hide();
      $("#role").change(function() {
          switch($(this).val()){ 
              case "3":
                  $(".fields").hide().parent().find("#student_profile").show();
                  break;
              case "2":
                  $(".fields").hide().parent().find("#teacher_profile").show();
                   $("#student_profile").remove();
  
                  break;
              }
          });
      });   
  </code></pre>
  
  <p><strong>EDIT</strong> heres my real code</p>
  
  <pre><code>&lt;form action="add" method="post" class="form label-inline uniform" /&gt;
  
  
  &lt;h3&gt;&lt;a href="#"&gt;User&lt;/a&gt;&lt;/h3&gt;
                      &lt;div class="field"&gt;&lt;label for="username"&gt;Username &lt;/label&gt; &lt;input id="username" name="username" size="50" type="text" class="medium" /&gt;&lt;/div&gt;
  
                      &lt;div class="field"&gt;&lt;label for="password"&gt;Password &lt;/label&gt; &lt;input id="password" name="password" size="50" type="password" class="medium" /&gt;&lt;/div&gt;
  
                      &lt;div class="field"&gt;
                          &lt;label for="role"&gt;Role &lt;/label&gt;
                          &lt;select id="role" name="role" class="medium"&gt;
  
                              &lt;optgroup label="Type of User"&gt;
                                  &lt;option value="3" /&gt;Student
                                  &lt;option value="2" /&gt;Teacher
                                  &lt;option value="1"/&gt;Admin
                              &lt;/optgroup&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;div id="student_profile" class="fields"&gt;
                      &lt;div class="field"&gt;
                                  &lt;label for="type"&gt;Course&lt;/label&gt;
                                  &lt;select id="type" name="stdntCourse" class="medium"&gt;
                                      &lt;optgroup  label="Choose Course"&gt;
                                          &lt;option value="BS IT" /&gt;BS IT
                                          &lt;option value="BS CS" /&gt;BS CS
                                          &lt;option value="BS IS" /&gt;BS IS
                                      &lt;/optgroup&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                              &lt;div class="field"&gt;
                                  &lt;label for="type"&gt;Year&lt;/label&gt;
                                  &lt;select id="type" name="stdntYear" class="medium"&gt;
                                      &lt;optgroup  label="Student Year"&gt;
                                          &lt;option value="1st" /&gt;1st
                                          &lt;option value="2nd" /&gt;2nd
                                          &lt;option value="3rd" /&gt;3rd
                                          &lt;option value="4th" /&gt;4th
                                      &lt;/optgroup&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
  
  
  
                      &lt;/div&gt;
  
                      &lt;div class="field"&gt;&lt;label for="regdate"&gt;Registration Date &lt;/label&gt; &lt;input id="regdate" name="regdate" size="20" type="text" class="large" /&gt;&lt;/div&gt;
  &lt;br /&gt;
  &lt;h3&gt;&lt;a href="#"&gt;User Profile&lt;/a&gt;&lt;/h3&gt;
  
                      &lt;div class="field"&gt;&lt;label for="fname"&gt;First Name &lt;/label&gt; &lt;input id="fname" name="fname" size="50" type="text" class="large" /&gt;&lt;/div&gt;
  
                      &lt;div class="field"&gt;&lt;label for="fname"&gt;Middle Name &lt;/label&gt; &lt;input id="mname" name="mname" size="50" type="text" class="large" /&gt;&lt;/div&gt;
  
                      &lt;div class="field"&gt;&lt;label for="lname"&gt;Last Name &lt;/label&gt; &lt;input id="lname" name="lname" size="50" type="text" class="large" /&gt;&lt;/div&gt;                    
  
                      &lt;div class="field"&gt;&lt;label for="nickname"&gt;Nickname&lt;/label&gt; &lt;input id="nickname" name="nickname" size="50" type="text" class="large" /&gt;&lt;/div&gt;
  
                      &lt;div class="field"&gt;&lt;label for="birthday"&gt;Birthday&lt;/label&gt; &lt;input type="text" size="20" name="birthday" id="birthday" class="large"/&gt;&lt;/div&gt;
  
                      &lt;div class="field"&gt;
                          &lt;label for="type"&gt;Sex&lt;/label&gt;
                          &lt;select id="type" name="sex" class="medium"&gt;
                              &lt;optgroup&gt;
                                  &lt;option value="M" /&gt;Male
                                  &lt;option value="F" /&gt;Female
                              &lt;/optgroup&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;div class="field"&gt;&lt;label for="address"&gt;Address&lt;/label&gt; &lt;input id="address" name="address" size="50" type="text" class="large" /&gt;&lt;/div&gt;
  
                      &lt;div class="field"&gt;&lt;label for="city" class=""&gt;City &lt;/label&gt; &lt;input id="city" name="city" size="20" type="text" class="medium" /&gt;&lt;/div&gt;
  
                      &lt;div class="field"&gt;&lt;label for="country" class=""&gt;Country &lt;/label&gt; &lt;input id="country" name="country" size="20" type="text" class="medium" /&gt;&lt;/div&gt;
  
                      &lt;div class="field"&gt;&lt;label for="zcode"&gt;Zip Code &lt;/label&gt; &lt;input id="zcode" name="zcode" size="20" type="text" class="medium" /&gt;&lt;/div&gt;
  
  
                      &lt;!--                    
                      &lt;div class="field clearfix"&gt;                                
                          &lt;label for="lname"&gt;File Upload &lt;/label&gt;                                 
                          &lt;input style="opacity: 0;" class="file" type="file" /&gt;                              
                      &lt;/div&gt;
                      ----&gt;
  
  
  
              &lt;!----    
                      &lt;div class="controlset field"&gt;
                          &lt;span class="label"&gt;Preferred Location&lt;/span&gt;
  
  
                          &lt;div class="controlset-pad"&gt;
                          &lt;input name="radio1" id="radio1" value="1" type="radio" /&gt; &lt;label for="radio1"&gt;Option 1&lt;/label&gt;&lt;br /&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;input name="radio1" id="radio2" value="1" type="radio" /&gt; &lt;label for="radio2"&gt;Option 2&lt;/label&gt;&lt;br /&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;input name="radio1" id="radio3" value="1" type="radio" /&gt; &lt;label for="radio3"&gt;Option 3&lt;/label&gt;&lt;br /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;          
  
                      &lt;div class="controlset field"&gt;
  
                          &lt;span class="label"&gt;Something Else &lt;/span&gt;
                          &lt;div class="controlset-pad"&gt;
                              &lt;input name="approved" id="check1" value="1" type="checkbox" /&gt;  &lt;label for="check1"&gt;Some Option 1&lt;/label&gt;&lt;br /&gt;
                              &lt;div class="clear"&gt;&lt;/div&gt;
                              &lt;input name="pending" id="check2" value="1" type="checkbox" /&gt;  &lt;label for="check2"&gt;Some Option 2&lt;/label&gt;&lt;br /&gt;
                              &lt;div class="clear"&gt;&lt;/div&gt;
                              &lt;input name="actives" id="check3" value="1" type="checkbox" /&gt; &lt;label for="check3"&gt;Some Option 3&lt;/label&gt;&lt;br /&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;  
  
  
                      &lt;div class="field"&gt;&lt;label for="description"&gt;Description&lt;/label&gt; &lt;textarea rows="7" cols="50" id="description" name="description"&gt;&lt;/textarea&gt;&lt;/div&gt;
  
                      &lt;br /&gt;
          ----&gt;   
  
                      &lt;div class="buttonrow"&gt;
                          &lt;input type="button" class="btn" value="Back" onClick="history.go(-1);return true;"&gt;
                          &lt;input type="reset" class="btn btn-black" value="Reset"/&gt;
                          &lt;input type="submit" id="submit" class="btn btn-grey" value="Add User"/&gt;
                      &lt;/div&gt;
  
                  &lt;/form&gt;
  </code></pre>