我有一个类似向导的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步，只有当您单击“计算BMR”按钮时才显示第2步，该按钮通过jquery隐藏步骤1，如下所示：
$('#step1').hide();
$('#step2').show();
我遇到的挑战是，当我提交表单时，step2字段都没有发布。可能有助于知道表单是以模态加载的。
非常感谢任何帮助。
答案 0 :(得分：2)
我会尝试使用jQuery在您发布请求时查询字段并手动构建数据对象，然后使用
将其关闭通过以下方式查询输入字段和设置数据对象：
var data = {}
data.email = $('#inputEmail').val()
//query for other inputs and set them as keys of this data object
然后使用您查询的指定数据发送post请求：
$.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)
})
此外，如果您为输入命名，则在将数据提交到指定的后端时，应将它们全部放入对象中。