[agr]

Добрый день!

Есть сайт с поиском дилеров. Пользователь выбирает параметры, жмет "поиск" и на страницу выгружается список дилеров, соответствующих заданным параметрам.

Выгрузка занимает немалое время, поэтому нужно повесить прелоадер.

Код формы поиска:

<form name="search" method="get" onsubmit="return (this.q.value == '') ? false : true;" action="/">
            <div class="corvax-col3">
                <label>Страна:</label>
                <select id="countrySelect">
                    <?
                    $arFilter = Array(
                        "IBLOCK_ID"=>1,
                        "ACTIVE"=>"Y",
                    );
                    $arSelect = Array(
                        "IBLOCK_ID",
                        "ID",
                        "NAME",
                    );
                    $request = CIBlockElement::GetList(
                        array("SORT"=>"ASC"),
                        $arFilter,
                        false,
                        false,
                        $arSelect

                    );

                    while($ob = $request->GetNext()):
                    ?>
                    <option value="<?=$ob['ID']?>"><?=$ob['NAME']?></option>
                    <?endwhile;?>
                </select>
            </div>

            <div class="corvax-col3">
                <label>Регион:</label>
                <select id="citySelect">
                <option value="0">Любой</option>

                </select>
            </div>

            <div class="corvax-col3">
                <label>Город:</label>
                <input id="pac-input" class="controls" type="text" placeholder="Введите название города">
            </div>

            <div class="corvax-col3">
                <label>Радиус:</label>
                <select id="rad_range">
                <option value="20">20км</option>
                <option value="50">50км</option>
                <option value="100">100км</option>
                <option value="150">150км</option>
                <option value="200">200км</option>
                <option value="250">250км</option>
                <option value="500">500км</option>   
                </select>
            </div>
            <div class="clearfix"></div>
            <div class="corvax-col3 pad-top-col">
                <label>Тип:</label>
                <select id="typeSelect">
                    <option value="0">Любой</option>
                    <?
                    $arFilter = Array(
                        "IBLOCK_ID"=>3,
                        "ACTIVE"=>"Y",
                    );
                    $arSelect = Array(
                        "IBLOCK_ID",
                        "ID",
                        "NAME",
                    );
                    $request = CIBlockSection::GetList(
                        array("SORT"=>"ASC"),
                        $arFilter,
                        false,
                        $arSelect,
                        false
                    );

                    while($ob = $request->GetNext()):
                        ?>
                        <option value="<?=$ob['ID']?>"><?=$ob['NAME']?></option>
                    <?endwhile;?>
                </select>

            </div>

            <div class="corvax-col8 pad-top-col">
				<label>Товар/услуги:</label>
                <div class="multiselect">
                    <div class="selectBox">
                        <select id="categorySelect" disabled>
                            <option value="0">Любой</option>
                        </select>
                        <div class="overSelect"></div>
                    </div>
                    <div id="checkboxes">
                    </div>
                </div>
            </div>
            <script>
                var expanded = false;

                $('.selectBox').click(function(){
                    if($('#categorySelect').prop('disabled')) {
                        expanded = true;
                    }
                    var checkboxes = document.getElementById("checkboxes");
                    if (!expanded) {
                        checkboxes.style.display = "block";
                        expanded = true;
                    } else {
                        checkboxes.style.display = "none";
                        expanded = false;
                    }
                });
                $('#checkboxes').click(function(){
                    var result = [];
                    $('#checkboxes input[type=checkbox]').each(function(indx, element){
                        if($(element).prop("checked")) {
                            result.push($(element).val());
                        }
                    });
                    if(result.length == 0)
                        $('#categorySelect option').html('Любая');
                    else
                        $('#categorySelect option').html('Выбранные');
                });
                $(document).mouseup(function (e) {
                    var elem = $('#checkboxes');
                    if ($(e.target).hasClass('overSelect')){ } else { expanded = false;}
                    if (e.target != elem[0] && !elem.has(e.target).length){
                        elem.hide();
                    } else { expanded = true;}

                });
                $('form[name=search]').click(function(e){
                    if(e.target.id == 'resetSearchForm') {
                       
                        $('#categorySelect').prop('disabled', 'disabled');
                        expanded = false;
                        $('#categorySelect option').html('Любая');
                    }
                });
            </script>
            <style>
                #categorySelect, .multiselect, .selectBox {
                    max-width: 100%;
                    width: 95%;
                }
                #pac-input {
                    width: 178px;
                }
                .pad-top-col {
                    padding-top: 10px;
                }
                .corvax-col8 {
                    width: 75%;
                    float: left;
                }
                .selectBox {
                    position: relative;
                }
                .overSelect {
                    position: absolute;
                    left: 0; right: 0; top: 0; bottom: 0;
                }
                #checkboxes {
                    display: none;
                    border: 1px #1e90ff solid;
                    background-color: white;
                    position: absolute;
                    z-index: 100;
                    height: 83px;
                    width: 619px;
                    overflow-y: scroll;
                }
                #checkboxes label {
                    display: block;
                    font-size: 11px;
                    padding-left: 7px;
                    padding-right: 10px;
                    margin-right: 0px;
                }
                #checkboxes label input {
                    margin-left: 0px;
                }
                #checkboxes label:hover {
                    background-color: #1e90ff;
                }
            </style>

            <div class="corvax-dealer-buttons">
                <button type="button" onclick="searchLocations(false)">Показать</button>
                <button type="reset" id="resetSearchForm">Сбросить</button>
            </div>
        </form>
    </div>

Можно ли повесить прелоадер на событие онклик: searchLocations ?