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
他们只是提供它的样本..你需要拥有一切是后端，在一个'表格'这是一个很好的做法.. :) –