Create border around dropdown

Question

Problem: I would like to create a border surrounding a drop-down box if left blank when the user enters a zip code. Otherwise, leave it how it is.

Currently, how it works is if the user enters a zip code and selects the submit, an alert will pop up and results will not be displayed until user selects the miles. This only occurs if user selects to find a locations using a zip code. Otherwise, it will populate the results.

Here is the form along with the script:

 $(document).ready(function(){ var $zip = $('#zip'); var $city = $('#city'); var $hospital = $('#hospital'); var $miles = $('#miles'); $zip.on("change",function(){ $('#city option[value=""]').prop('selected',true).trigger('input'); $hospital.val('').trigger('input'); }); $city.on("change",function(){ $zip.val('').trigger('input'); $miles.val('').trigger('input'); }); $hospital.on("change",function(){ $zip.val('').trigger('input'); $miles.val('').trigger('input'); }); $zip.one("change", function(){ $miles.val('').trigger('input'); }); }); function checkTextField() { var distance = document.forms["UrgentCareSearch"]["distance"].value; var zip = document.forms["UrgentCareSearch"]["zip"].value; if(zip && !distance){ var alertMessage = "Please Select Distance When You Are Entering A Zip Code."; alert(alertMessage); return false; //Does not submit form } else return true; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <div class="panel panel-default"> <div class="panel-body"> <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form"> <div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div> <div class="form-group"> <select class="form-control" id="city" ng-model="searchParam.City"> <option disabled="disabled" selected="selected" value="">City</option> <option value=""></option> <cfoutput query="HospCityFind"> <option value=#officecity#>#officecity#</option> </cfoutput> </select></div> <hr /> <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" ng-options="mile.value for mile in miles"></select>---> <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance"> <option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option> </select> <div class="input-group-addon">miles</div> </div> </div> </div> <div class="col-xs-5 no-left-padding widthZip"> <div class="form-group"><input allow-pattern="[\\d\\W]" 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" onclick="return checkTextField();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> </form> </div> </div> 

Answer 1

Ok, this should work. Modified you checkTextField() function to highlight miles field if it is empty

document.getElementById("miles").style.border = " solid #000000"

Plus your miles dropbox has oninput tag as so

oninput = "unHighlight()" Which calls the un-Highlight function to remove the box in case the value of it anything other than "".

reference: http://www.w3schools.com/jsref/event_oninput.asp http://www.w3schools.com/js/js_htmldom_eventlistener.asp

 $(document).ready(function() { var $zip = $('#zip'); var $city = $('#city'); var $hospital = $('#hospital'); var $miles = $('#miles'); $zip.on("change", function() { $('#city option[value=""]').prop('selected', true).trigger('input'); $hospital.val('').trigger('input'); }); $city.on("change", function() { $zip.val('').trigger('input'); $miles.val('').trigger('input'); }); $hospital.on("change", function() { $zip.val('').trigger('input'); $miles.val('').trigger('input'); }); $zip.one("change", function() { $miles.val('').trigger('input'); }); }); function checkTextField() { var distance = document.forms["UrgentCareSearch"]["distance"].value; var zip = document.forms["UrgentCareSearch"]["zip"].value; if (zip && !distance) { var alertMessage = "Please Select Distance When You Are Entering A Zip Code."; document.getElementById("miles").style.border = " solid #000000" alert(alertMessage); return false; //Does not submit form } else return true; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <div class="panel panel-default"> <div class="panel-body"> <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form"> <div class="form-group"> <input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /> </div> <div class="form-group"> <select class="form-control" id="city" ng-model="searchParam.City"> <option disabled="disabled" selected="selected" value="">City</option> <option value=""></option> <cfoutput query="HospCityFind"> <option value=#officecity#>#officecity#</option> </cfoutput> </select> </div> <hr /> <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" ng-options="mile.value for mile in miles"></select>---> <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" oninput = "unHighlight()"> <option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option> </select> <div class="input-group-addon">miles</div> </div> </div> </div> <div class="col-xs-5 no-left-padding widthZip"> <div class="form-group"> <input allow-pattern="[\\d\\W]" 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" onclick="return checkTextField();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /> </div> <script> function unHighlight() { var miles = document.getElementById("miles").value; try{ if(miles != ""){ document.getElementById("miles").style.border = "none" } } catch(err) { document.getElementById("miles").style.border = "none" } } </script> </form> </div> </div>