title: Posting fields under hidden div
body: <p>I have a wizard-like bootstrap 3 form that has two steps like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form id="sign-up" class="form-horizontal"&gt;
    &lt;div id="step1"&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="inputName" class="col-sm-4 control-label"&gt;Goal&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;select name="inputGoal" id="inputGoal" class="form-control"&gt;
              &lt;option value="1" data-val="Lose some weight"&gt;Lose Weight&lt;/option&gt;
              &lt;option value="2" data-val="Gain some weight"&gt;Gain Weight&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="inputDob" class="col-sm-4 control-label"&gt;Date of Birth&lt;/label&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;input class="form-control datepicker" type="text" name="inputDob" id="inputDob" placeholder="dd/mm/yyyy"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="inputGender" class="col-sm-4 control-label"&gt;Gender&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;label class="radio-inline"&gt;
              &lt;input type="radio" id="inputGender1" value="Female" name="inputGender"&gt;&lt;i class="fa fa-venus"&gt;&lt;/i&gt; Female
            &lt;/label&gt;
            &lt;label class="radio-inline"&gt;
              &lt;input type="radio" id="inputGender2" value="Male" name="inputGender"&gt;&lt;i class="fa fa-mars"&gt;&lt;/i&gt; Male
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="inputUnit" class="col-sm-4 control-label"&gt;Units&lt;/label&gt;
        &lt;div class="col-sm-8"&gt;
          &lt;label class="radio-inline"&gt;
            &lt;input type="radio" name="inputUnit" id="inputUnit1" value="metric" checked="checked"&gt; Metric (kg,cm)
          &lt;/label&gt;
          &lt;label class="radio-inline"&gt;
            &lt;input type="radio" name="inputUnit" id="inputUnit2" value="imperial"&gt; Imperial (lbs,ft,in)
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="metric"&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="inputHeight" class="col-sm-4 control-label"&gt;Height(cm)&lt;/label&gt;
            &lt;div class="col-sm-4"&gt;
              &lt;input type="number" class="form-control" id="inputHeight" placeholder="Height in cm" name="inputHeight"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="inputWeight" class="col-sm-4 control-label"&gt;Weight(Kg)&lt;/label&gt;
            &lt;div class="col-sm-4"&gt;
              &lt;input type="number" class="form-control" id="inputWeight" placeholder="Weight in Kg" name="inputWeight"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="imperial"&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="inputHeightFt" class="col-sm-4 control-label"&gt;Height(ft,in)&lt;/label&gt;
            &lt;div class="col-sm-3"&gt;
              &lt;input type="number" class="form-control" id="inputHeightFt" placeholder="ft" name="inputHeightFt"&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-3"&gt;
              &lt;input type="number" class="form-control" id="inputHeightIn" placeholder="in" name="inputHeightIn"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="inputWeightLbs" class="col-sm-4 control-label"&gt;Weight(lbs)&lt;/label&gt;
            &lt;div class="col-sm-4"&gt;
              &lt;input type="number" class="form-control" id="inputWeightLbs" placeholder="Weight in Lbs" name="inputWeightLbs"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;button id="calorie"&gt;Calculate BMR &lt;i class="fa fa-cog fa-spin"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="step2"&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="inputBMR" class="col-sm-4 control-label"&gt;BMR&lt;/label&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;input type="text" class="form-control" id="inputBMR" disabled="disabled"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="inputFullname" class="col-sm-4 control-label"&gt;Full Name&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;input type="text" class="form-control" id="inputFullname" placeholder="Full Name"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="inputName" class="col-sm-4 control-label"&gt;Programme&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;div class="radio"&gt;
              &lt;label&gt;
                &lt;input type="radio" name="inputProgramme" id="inputProgramme1" value="1" checked=""&gt;
                4 WEEK SILVER PLAN
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="radio"&gt;
              &lt;label&gt;
                &lt;input type="radio" name="inputProgramme" id="inputProgramme2" value="2"&gt;
                12 WEEK GOLD PLAN
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="radio"&gt;
              &lt;label&gt;
              &lt;input type="radio" name="inputProgramme" id="inputProgramme3" value="3"&gt;
                12 WEEK PLATINUM PLAN
              &lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="inputEmail" class="col-sm-4 control-label"&gt;Email&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;input type="email" class="form-control" id="inputEmail" placeholder="Email"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="inputMobile" class="col-sm-4 control-label"&gt;Mobile&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;input type="number" class="form-control" id="inputMobile" placeholder="Mobile"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;button id="modal-back" class="pull-left"&gt;Back&lt;/button&gt;
        &lt;button class="pull-right" id="btnRegister"&gt;Let's GO!&lt;/button&gt;                                
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Step 2 is hidden at when the page loads through css <code>display:none</code> and only displayed when you click on the "Calculate BMR" button which hides step 1 via jquery like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#step1').hide();
  $('#step2').show();
  </code></pre>
  
  <p>The challenge I am having is that when I submit the form, none of the <code>step2</code> fields are posted. It might help to know that the form is loaded in a modal.</p>
  
  <p>Any help will be greatly appreciated.</p>