選擇“搜索”按鈕時，出現進度條

Question

我有這張表格，可以根據用戶在表格上選擇的內容搜索醫生。

因此，當用戶選擇城市下拉框並單擊搜索時，將在城市中顯示醫生。

但是，沒有指示讓用戶知道表單正在獲取結果。

我希望當用戶單擊表單右側顯示結果的搜索按鈕時，將出現一個進度條，並將內容保留在進度條的背景后面

我的以下表格工作得很好，有一些小問題。 問題與用戶輸入郵政編碼並決定按城市進行搜索有關，但確實會刪除該字段，但是當我單擊搜索時，結果不會更新。

 <script> $(document).ready(function(){ $('#zip').on("input",function(){ $('#city option[value=""]').prop('selected',true); }) $('#city').on("change",function(){ $('#zip').val(""); }) }) </script> 

 <div class="panel panel-default"> <div class="panel-body"> <!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar---> <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form"> <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div> <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div> <div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option> <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div> <div class="form-group"> <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> <option disabled="disabled" selected="selected" value="">City</option> <option value=""></option> <cfoutput query="cityFind"> <option value=#city#>#city#</option> </cfoutput> </select> <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>----> </div> <div class="row"> <div class="col-xs-6 no-right-padding paddingLanguage"> <div class="form-group widthLanguage"> <select name="language" class="form-control" ng-model="searchParam.Language"> <option disabled="disabled" selected="selected" value="">Language</option> <option value=""></option> <cfoutput query="Languages"> <option value=#Language#>#Language#</option> </cfoutput> </select> <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language"> <option disabled="disabled" selected="selected" value="">Language</option> <option ng-repeat="l in Languages">{{l.Lang}}</option> </select>---> </div> </div> <div class="col-xs-6 no-left-padding"> <div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender"> <option disabled="disabled" selected="selected" value="">Gender</option> <option value=""></option> <option>Male</option><option>Female</option> </select></div> </div> </div> <hr class="hrDoctor" /> <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> <div class="row"> <div class="col-xs-7 no-right-padding"> <div class="form-group"> <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select> <div class="input-group-addon">mi</div> </div> </div> </div> <div class="col-xs-5 no-left-padding widthZip"> <div class="form-group"><input allow-pattern="[\\d\\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div> </div> </div> <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> <!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>---> </form> <!---</div><!---Progress bar--->---> </div> </div> 

我想做以下事情，但使用引導程序：

 <div id="container" style="width:100%; height:5px; border:1px solid black;"> <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div> </div> <script> var width = 0; window.onload = function(e){ setInterval(function () { width = width >= 100 ? 0 : width+5; document.getElementById('progress-bar').style.width = width + '%'; }, 200); } </script> 

任何幫助，將不勝感激。

Answer 1

檢查以下解決方案是否適合您，

 $(document).ready(function(){ $('#zip').on("input",function(){ $('#city option[value=""]').prop('selected',true); }); $('#city').on("change",function(){ $('#zip').val(""); }); $("#providerSearch").submit(function(e) { e.preventDefault(); var $progressbar = $('#progress-bar'); $progressbar.parent().removeClass("hidden"); var width = 0; setInterval(function () { width = width >= 100 ? 0 : width+5; $progressbar.css('width', width + '%'); }, 200); }); }); 

 .hidden { display : none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="panel panel-default"> <div class="panel-body"> <!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar---> <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form" id="providerSearch"> <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div> <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div> <div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option> <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div> <div class="form-group"> <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> <option disabled="disabled" selected="selected" value="">City</option> <option value=""></option> <cfoutput query="cityFind"> <option value=#city#>#city#</option> </cfoutput> </select> <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>----> </div> <div class="row"> <div class="col-xs-6 no-right-padding paddingLanguage"> <div class="form-group widthLanguage"> <select name="language" class="form-control" ng-model="searchParam.Language"> <option disabled="disabled" selected="selected" value="">Language</option> <option value=""></option> <cfoutput query="Languages"> <option value=#Language#>#Language#</option> </cfoutput> </select> <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language"> <option disabled="disabled" selected="selected" value="">Language</option> <option ng-repeat="l in Languages">{{l.Lang}}</option> </select>---> </div> </div> <div class="col-xs-6 no-left-padding"> <div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender"> <option disabled="disabled" selected="selected" value="">Gender</option> <option value=""></option> <option>Male</option><option>Female</option> </select></div> </div> </div> <hr class="hrDoctor" /> <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> <div class="row"> <div class="col-xs-7 no-right-padding"> <div class="form-group"> <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select> <div class="input-group-addon">mi</div> </div> </div> </div> <div class="col-xs-5 no-left-padding widthZip"> <div class="form-group"><input allow-pattern="[\\d\\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div> </div> </div> <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> </form> </div> </div> <div id="container" style="width:100%; height:5px; border:1px solid black;" class="hidden"> <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div> </div>