jquery - 重置表单组的输入

Question

我有一个模态窗口，其中包含一个表单组，我用它来创建事件概述的新事件。但是，如果用户在我的模式窗口中按“关闭”而不是“添加事件”，则该事件就会消失。这很棒。但我还想重置我得到的字段，这样它们就不会停留在用户上次使用时输入的内容上。

我发现您可以使用如下所示的方法来实现此目的:

function OnCreateNewActivityBtnClick() {
    $('#new-activity-modal').find('form-group').each(function(){
        $(this).find('input-group').reset();
    });
}

但这没有任何作用。我正在使用 bootstrap，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>

Answer 1

function OnCreateNewActivityBtnClick() {
    $('#new-activity-modal').find('.form-group').each(function(){
        $(this).find('.input-group').reset();
    });
}

您需要使用.来使用类作为选择器。