在隐藏的div下发布字段

Question

我有一个类似于向导的bootstrap 3表单，该表单具有两个步骤，如下所示：

<form id="sign-up" class="form-horizontal">
  <div id="step1">
    <br><br>
    <div class="form-group">
      <div class="form-group">
        <label for="inputName" class="col-sm-4 control-label">Goal</label>
        <div class="col-sm-8">
          <select name="inputGoal" id="inputGoal" class="form-control">
            <option value="1" data-val="Lose some weight">Lose Weight</option>
            <option value="2" data-val="Gain some weight">Gain Weight</option>
          </select>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-group">
        <label for="inputDob" class="col-sm-4 control-label">Date of Birth</label>
        <div class="col-sm-4">
          <input class="form-control datepicker" type="text" name="inputDob" id="inputDob" placeholder="dd/mm/yyyy">
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-group">
        <label for="inputGender" class="col-sm-4 control-label">Gender</label>
        <div class="col-sm-8">
          <label class="radio-inline">
            <input type="radio" id="inputGender1" value="Female" name="inputGender"><i class="fa fa-venus"></i> Female
          </label>
          <label class="radio-inline">
            <input type="radio" id="inputGender2" value="Male" name="inputGender"><i class="fa fa-mars"></i> Male
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="inputUnit" class="col-sm-4 control-label">Units</label>
      <div class="col-sm-8">
        <label class="radio-inline">
          <input type="radio" name="inputUnit" id="inputUnit1" value="metric" checked="checked"> Metric (kg,cm)
        </label>
        <label class="radio-inline">
          <input type="radio" name="inputUnit" id="inputUnit2" value="imperial"> Imperial (lbs,ft,in)
        </label>
      </div>
    </div>
    <div id="metric">
      <div class="form-group">
        <div class="form-group">
          <label for="inputHeight" class="col-sm-4 control-label">Height(cm)</label>
          <div class="col-sm-4">
            <input type="number" class="form-control" id="inputHeight" placeholder="Height in cm" name="inputHeight">
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group">
          <label for="inputWeight" class="col-sm-4 control-label">Weight(Kg)</label>
          <div class="col-sm-4">
            <input type="number" class="form-control" id="inputWeight" placeholder="Weight in Kg" name="inputWeight">
          </div>
        </div>
      </div>
    </div>
    <div id="imperial">
      <div class="form-group">
        <div class="form-group">
          <label for="inputHeightFt" class="col-sm-4 control-label">Height(ft,in)</label>
          <div class="col-sm-3">
            <input type="number" class="form-control" id="inputHeightFt" placeholder="ft" name="inputHeightFt">
          </div>
          <div class="col-sm-3">
            <input type="number" class="form-control" id="inputHeightIn" placeholder="in" name="inputHeightIn">
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group">
          <label for="inputWeightLbs" class="col-sm-4 control-label">Weight(lbs)</label>
          <div class="col-sm-4">
            <input type="number" class="form-control" id="inputWeightLbs" placeholder="Weight in Lbs" name="inputWeightLbs">
          </div>
        </div>
      </div>
    </div>
    <br>
    <button id="calorie">Calculate BMR <i class="fa fa-cog fa-spin"></i></button>
  </div>
  <div id="step2">
    <div class="form-group">
      <div class="form-group">
        <label for="inputBMR" class="col-sm-4 control-label">BMR</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" id="inputBMR" disabled="disabled">
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-group">
        <label for="inputFullname" class="col-sm-4 control-label">Full Name</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" id="inputFullname" placeholder="Full Name">
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-group">
        <label for="inputName" class="col-sm-4 control-label">Programme</label>
        <div class="col-sm-8">
          <div class="radio">
            <label>
              <input type="radio" name="inputProgramme" id="inputProgramme1" value="1" checked="">
              4 WEEK SILVER PLAN
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="inputProgramme" id="inputProgramme2" value="2">
              12 WEEK GOLD PLAN
            </label>
          </div>
          <div class="radio">
            <label>
            <input type="radio" name="inputProgramme" id="inputProgramme3" value="3">
              12 WEEK PLATINUM PLAN
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-group">
        <label for="inputEmail" class="col-sm-4 control-label">Email</label>
        <div class="col-sm-8">
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-group">
        <label for="inputMobile" class="col-sm-4 control-label">Mobile</label>
        <div class="col-sm-8">
          <input type="number" class="form-control" id="inputMobile" placeholder="Mobile">
        </div>
      </div>
    </div>
    <div class="form-group">
      <button id="modal-back" class="pull-left">Back</button>
      <button class="pull-right" id="btnRegister">Let's GO!</button>                                
    </div>
  </div>
</form>

当页面通过css display:none加载时，第2步是隐藏的，仅当您单击“ Calculate BMR”按钮时才显示，该按钮通过jquery隐藏第1步，如下所示：

$('#step1').hide();
$('#step2').show();

我面临的挑战是，当我提交表单时，没有发布step2字段。 知道表单以模式加载是有帮助的。

任何帮助将不胜感激。

Answer 1

当您发出发布请求并手动构建数据对象，然后使用jQuery将其触发时，我会尝试使用jQuery查询字段。

查询输入字段并通过以下方式设置数据对象：

var data = {}
data.email = $('#inputEmail').val()
//query for other inputs and set them as keys of this data object

然后发送带有您查询的指定数据的邮寄请求：

$.post('url/where/data/goes', data).then(function(response){
  console.log('successful post request',response)
  // Do something with response
}, function(err){
  console.log("submit unsuccessful", err)
})

同样，如果您为输入命名，则在将数据提交到指定的后端时，应将它们全部放入一个对象中。