How to keep the selected option for company_turnover after reload the page?

29 Views Asked by At
  • i tried to store it in localStorage.
  • it is working for company_sector.
  • but it is not working for company_turnover.

I want to keep the data because the page will be reload after user upload a document.

<select name="sector" id="company_sector" class="form-control form-select" @if(!$financingApplication->isEditable()) disabled @endif>
                    <option value="">Select Sector</option> 
                    @foreach($companySectors as $sector)
                        <option value="{{ $sector->id }}">{{ $sector->name }}</option>
                    @endforeach
                    </select>
    
<select name="turnover" id="company_turnover" class="form-control form-select" @if(!$financingApplication->isEditable()) disabled @endif>
                    <option value="">Select Turnover</option>
                    </select>
    
    <script>
    $(document).ready(function() {
        $('#company_sector').change(function() {
            var sectorId = $(this).val(); 
            
            $.ajax({
                url: '/dropee-credit-application/get-turnovers-and-employees/' + sectorId,
                method: 'GET',
                success: function(response) {
                    console.log('turnovers/revenues and employees data:', response);
                    $('#company_turnover').empty(); // Clear existing options
                    $.each(response.turnovers, function(key, value) {
                        $('#company_turnover').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                    $('#company_employee').empty(); // Clear existing options
                    $.each(response.employees, function(key, value) {
                        $('#company_employee').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(error) {
                    console.error('Error fetching turnovers and employees:', error);
                }
            });
        });
    });

Below is how i store it in localStorage. It works fine for storing and displaying company_sector after reload page. But it is not working for company_turnover.

var sectorValue = $('#company_sector').val();
                        // var turnoverValue = $('#company_turnover').val();
    var storedSector = sessionStorage.getItem('company_sector_value');
                        // var storedTurnover = sessionStorage.getItem('turnover_value');
    if (sectorValue) {
                            sessionStorage.setItem('company_sector_value', sectorValue);
                        } else if (storedSector) {
                            sectorValue = storedSector;
                        }
                         if (turnoverValue) {
                             sessionStorage.setItem('turnover_value', turnoverValue);
                         } else if (storedTurnover) {
                             turnoverValue = storedTurnover;
                         }
    window.location.reload();
if (storedSector) {
            $('#company_sector').val(storedSector);
            sessionStorage.removeItem('companny_sector_value');
        }
         if (storedTurnover) {
             $('#company_turnover').val(storedTurnover);
             sessionStorage.removeItem('turnover_value');
         }
0

There are 0 best solutions below