切换引导选项卡时如何清除以前的表单字段

Question

我有三个引导选项卡，每个选项卡都有表单字段，如果我转到其他选项卡，那么我想清除最后一个选项卡上的字段（如果它们已填写）。 例如： 如果我在共享空间选项卡上并填写了表单字段，那么当我切换到其他私人空间或会议室选项卡时，共享空间字段应该清除。

这是我的 view.blade.php 文件

<div class="form-group">
                Space Type: 
                    <select class="select-tabs" onchange="doChange()" id='spaceType' name="spaceType" data-toggle="dropdown">
                            <option  disabled>Select</option>
                            <option data-target="#sharedSpace" {{$list->spaceType == "shared space" ?  "selected" : false}} value = "shared space">Shared Space</option>
                            <option data-target="#privateSpace" {{$list->spaceType == "private space" ? "selected" : false}} value = "private space">Private Space</option>
                            <option data-target="#meetingRoom" {{$list->spaceType == "meeting room" ?  "selected" : false}} value = "meeting room">Meeting Room</option>
                    </select>
            </div>
<div class="tab-content">
                <div id="sharedSpace" class="tab-pane">
                    <div>
                        {{Form::label('totalSeats', 'Total Seats: ')}}
                        {{Form::text('totalSeats', $list->totalSeats, ['class' => 'form-control', 'placeholder' => 'e.g: Rs. 10000', 'type' => 'number'])}}
                        <br>
                        <div id="textArea-fields" class="form-group">
                                <label id="labelTwo" for="description">Description</label>
                                <textarea class="form-control" id="description" name="description" placeholder="write here...">{{(isset($list->description)) ? $list->description : ""}}</textarea>
                        </div>
                        <h1>Features</h1>                 
                    </div>
                </div>
                <div id="privateSpace" class="tab-pane">
                    <div>
                        {{Form::label('totalOffices', 'Total Offices: ')}}
                        {{Form::text('totalOffices', $list->totalOffices, ['class' => 'form-control', 'placeholder' => 'e.g: Rs. 10000', 'type' => 'number'])}}
                        <br>
                        {{Form::label('availableOffices', 'Available Offices: ')}}
                        {{Form::text('availableOffices', $list->availableOffices, ['class' => 'form-control', 'placeholder' => 'e.g: Rs. 10000', 'type' => 'number'])}}
                        <br>
                        <div id="textArea-fields" class="form-group">
                                <label id="labelTwo" for="description">Description</label>
                                <textarea class="form-control" id="description" name="description" placeholder="write here...">{{(isset($list->description)) ? $list->description : ""}}</textarea>
                        </div>
                    </div>
                    <div>    
                        <h1>Features</h1>                    
                        {{Form::checkbox('feature[5]', 'whiteBoard', (array_key_exists(5, $list->feature)) ? true : false)}}
                        {{Form::label('whiteBoard', 'White board')}}
                        <br>
                        {{Form::checkbox('feature[6]', 'cabinets/lockers', (array_key_exists(6, $list->feature))? true : false)}}
                        {{Form::label('cabinets/lockers', 'Cabinets/Lockers')}}
                    </div>
                </div>
                <div id="meetingRoom" class="tab-pane">
                    <div>
                        {{Form::label('totalRooms', 'Total Rooms: ')}}
                        {{Form::text('totalRooms', $list->totalRooms, ['class' => 'form-control', 'placeholder' => 'e.g: Rs. 10000', 'type' => 'number'])}}
                        <br>
                        <div id="textArea-fields" class="form-group">
                                <label id="labelTwo" for="description">Description</label>
                                <textarea class="form-control" id="description" name="description" placeholder="write here...">{{(isset($list->description)) ? $list->description : ""}}</textarea>
                        </div>
                    </div>
                    <div>
                            <h1>Features</h1>                            
                        {{Form::checkbox('feature[0]', 'videoConference', (array_key_exists(0, $list->feature)) ? true : false)}}
                        {{Form::label('videoConference', 'Video conference')}}
                        <br>
                        {{Form::checkbox('feature[1]', 'projector', (array_key_exists(1, $list->feature))? true : false)}}
                        {{Form::label('projector', 'Projector')}}
                        <br>
                        {{Form::checkbox('feature[2]', 'whiteBoard', (array_key_exists(2, $list->feature)) ? true : false)}}
                        {{Form::label('whiteBoard', 'White board')}}
                        <br>
                        {{Form::checkbox('feature[3]', 'micFacility', (array_key_exists(3, $list->feature)) ? true : false)}}
                        {{Form::label('micFacility', 'Mic facility')}}
                        <br>
                        {{Form::checkbox('feature[4]', 'conferenceTable', (array_key_exists(4, $list->feature)) ? true : false)}}
                        {{Form::label('conferenceTable', 'Conference table')}}
                    </div>
                </div>

</div>

这里是用于更改标签的edit.js文件：

$(document).ready(function () {
    var something = document.getElementById("spaceType");
    var val = something.options[something.selectedIndex].value;
    if (val == 'private space') {
       $(':selected', this).tab('show');
    }
    if (val == 'meeting room') {
       $(':selected', this).tab('show');
    }
    if (val == 'private space') {
       $(':selected', this).tab('show');
    }
   $(".select-tabs").on('change', function () {
       $(':selected', this).tab('show');
    });
 });

对不起我的英语不好......

Answer 1

您可以使用 jQuery UI 来做到这一点，我们只需找到带有 ID 的选择器。

如果您认为这对您来说是可能的，那么您可以按如下方式使用 jQuery：

$('#spaceType').on('change', function(e){
                    console.log(e);
                    var space_type = e.target.value; //we get the value of the select so we can compare it later

                   //You can add as many switch cases as you want to make it work
                    switch(space_type) { //depending on selection then you'll call a function to clear the div.
                        case "private space":
                            clearForm($("#sharedSpace"));
                            clearForm($("#meetingRoom"));

                            break;
                        case "meeting room":
                            clearForm($("#privateSpace"));
                            clearForm($("#sharedSpace"));
                            break;
                        default:
                            clearForm($("#privateSpace"));
                            clearForm($("#meetingRoom"));
                    }

                    function clearForm($form) { 
                      $form.find(':input').val(''); 
                      $form.find(':checkbox, :radio').prop('checked', false); 
                    }

                });

此代码尚未测试，但应该可以工作，如果您有任何问题，请告诉我。

您应该考虑为不同用途设置多个表单，因为您的情况是……事实上，如果您使用多个表单，则无需担心清除其他表单输入。您也在不同的选项卡中使用相同的 ID 进行输入，但在相同的表单中。