как очистить предыдущие поля формы при переключении на вкладку начальной загрузки

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, мы просто найдем селектор с идентификатором.

, если вы считаете, что это возможно для вас, вы можете использовать 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); 
                    }

                });

Этот код еще не проверен, но он должен работать, дайте мне знать, если у вас есть какие-либо проблемы.

Вам следует рассмотреть возможность использования нескольких форм для различных целей, как в вашем случае ... на самом деле, если выиспользуйте несколько форм, вам не нужно беспокоиться об очистке других форм ввода.также вы используете один и тот же идентификатор для ввода на разных вкладках, но внутри одной формы.