0
我在用戶提交之前使用Bootstrap模式創建表單確認窗口。在模態窗口引導程序/ jQuery上顯示錶單條目
這裏是HTML的一部分：
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-3 control-label">Email:</label>
<div class="col-sm-9">
<input type="text" name="Email" id="Email" size="50" maxlength="100" class="form-control" placeholder="Email">
</div>
</div>
<input type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="entryname col-xs-3 ">Company:</div>
<div class="entrydata col-xs-9" id="mCompany"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Department:</div>
<div class="entrydata col-xs-9" id="mDepartment"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Name:</div>
<div class="entrydata col-xs-9" id="mUsername"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Email:</div>
<div class="entrydata col-xs-9" id="mEmail"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
這裏是jQuery的部分：
$('#submitBtn').click(function() {
$('#mCompany').text($('#Company').val());
$('#mDepartment').text($('#Department').val());
$('#mUsername').text($('#Username').val());
$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());
$('#mEmail').text($('#Email').val());
});
您可以看到與此 link to JSFiddle.
需要不是所有的領域嘗試，而我想要做的只是顯示帶有數據的條目。
例如在下圖中，我不想讓紅色邊框部分顯示出來。
上的jsfiddle樣品只有6場，但我的形式有超過30場。我想知道是否有一種方法只顯示數據字段。
等待，你想不顯示ADRESS和電話領域？你可以從你的submitBtn中刪除這些字段，或者我在這裏丟失了什麼？ 編輯：沒關係，我現在明白了。 –