3
我收到了一個模式窗口，其中包含一個窗體組，用於爲活動概述創建新活動。但是，如果用戶在我的模式窗口中按下「關閉」而不是「添加活動」，則活動消失。這很棒。但我也想重置我得到的字段，所以他們不會坐在用戶最後使用的字段上。重置表單組的輸入
我發現，你可以使用類似下面來實現這一點：
function OnCreateNewActivityBtnClick() {
$('#new-activity-modal').find('form-group').each(function(){
$(this).find('input-group').reset();
});
}
但是，什麼都不做。我使用的引導程序和HTML看起來像這樣：
<div id="new-activity-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1>Add New Activity</h1>
</div>
<div class="modal-body">
<div class="tab-navigation">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">
<a href="#new-activity-modal-activity-abstract-tab" aria-controls="new-activity-modal-activity-abstract-tab"
role="tab" data-toggle="tab">Activity Abstract</a>
</li>
<li role="presentation">
<a href="#new-activity-modal-activity-description-tab" aria-controls="new-activity-modal-activity-description-tab"
role="tab" data-toggle="tab">Activity Description</a>
</li>
<li role="presentation">
<a href="#help-tab" aria-controls="help-tab"
role="tab" data-toggle="tab">Finalize</a>
</li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="new-activity-modal-activity-abstract-tab">
<div class="row" style="padding-top: 10px;">
<div class="col-lg-12">
<div class="form-group">
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Status</span>
<!-- TODO: Make this automatically rather than hardcode -->
<select class="form-control" id="new-activity-modal-status-dropdown">
<option value="NA">N/A</option>
<option value="ON_TRACK">On Track</option>
<option value="DONE">Done</option>
<option value="ISSUE">Issue</option>
<option value="BEHIND">Behind</option>
<option value="ABANDONED">Abandoned</option>
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top" title="The Status of the Activity. Usually On Track but otherwise set to N/A if unsure.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Activity Name</span>
<input type="text" class="form-control" id="new-activity-modal-name-field"
aria-describedby="new-activity-modal-name-field" required>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The Name of the Activity. This name appears in the Activity Overview.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Responsible</span>
<input type="text" class="form-control" id="new-activity-modal-name-field"
aria-describedby="new-activity-modal-responsible-field">
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The responsible person for this activity. This it the go-to person for questions, progress and reports.">
<b>?</b>
</span>
</div>
<div class="input-group">
<span id="add-addon-styling" class="input-group-addon">Department</span>
<select class="form-control" id="new-activity-modal-department-dropdown">
<option value="culture">Culture</option>
<option value="commercial">Commercial</option>
<option value="economy">Economy</option>
<option value="technical-department">Technical Department</option>
<option value="it">IT</option>
<option value="flight-department">Flight Department</option>
<option value="legal">Legal</option>
<option value="ground-operation">Ground Operation</option>
<option value="bdo">BDO</option>
<option value="administration">Administration</option>
<option value="training">Training</option>
<option value="passenger-service">Passenger Service</option>
<option value="cabin">Cabin</option>
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The department this activity belongs to.">
<b>?</b>
</span>
</div>
</div>
<div class="input-group date" id="new-activity-modal-datetimepicker-start" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Start Time</span>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The start of the activity. Usually today's date.">
<b>?</b>
</span>
</div>
<div class="input-group date" id="new-activity-modal-datetimepicker-end">
<span id="add-addon-styling" class="input-group-addon">End Time</span>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The estimated end of the activity.">
<b>?</b>
</span>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade in active" id="new-activity-modal-activity-description-tab">
<div class="row">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-bg" data-dismiss="modal" onclick="OnModalCreateNewActivityBtnClick()">Add Activity</button>
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal" onclick="OnCloseNewActivityBtnClick()">Close</button>
</div>
</div>
</div>
</div>
</div>
你爲什麼不換你的元素'form'內並重置'form'本身。但是，要將數據保存在數據庫中，您需要一個「表單」。 A ** [教程]（http://www.formget.com/jquery-reset-form/）**和** [DEMO]（http://www.aorank.com/tutorial/reset_jquery/resetjquery。 HTML）**。 –
我使用bootstrap，所以我想我可以使用他們提供的。 – OmniOwl
他們只是提供它的樣本..你需要擁有一切是後端，在一個'表格'這是一個很好的做法.. :) –