Develop Reference

How to insert select tag drop down values as text snippet at a particular cursor position inside the text area tag?

I have a list of predefined text snippet that I want to insert into the text area at the current cursor position, whenever user selects one snippet from the drop down list.
I have tried to do implement it like the following but it didn't work.
I am getting this error:
add_home:228 Uncaught TypeError: field.setSelectionRange is not a function
Please help me solve this. Thank you.
function insertAtCursor(text, areaId) {
var field = document.getElementById(areaId);
if (document.selection) {
var range = document.selection.createRange();
if (!range || range.parentElement() != field) {
field.focus();
range = field.createTextRange();
range.collapse(false);
}
range.text = text;
range.collapse(false);
range.select();
} else {
field.focus();
var val = field.value;
var selStart = field.selectionStart;
var caretPos = selStart + text.length;
field.value = val.slice(0, selStart) + text + val.slice(field.selectionEnd);
field.setSelectionRange(caretPos, caretPos);
}
}
textarea {
resize: vertical;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="row">
<div class="col-lg-8 col-xs-8 col-lg-offset-2 col-xs-offset-2">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Home</h3>
</div>
<div class="box-body">
<form method="post" id="addHomeForm" enctype="multipart/form-data">
<fieldset class="form-group">
<div class="pull-right" style="margin-bottom: 0.5em;">
<select name="snippetForseoTitle" id="snippetForseoTitle" class="form-control" unselectable="on" onchange="insertAtCursor(this.value, 'snippetForseoTitle'); return false">
<option value="" selected disabled>Insert Snippet</option>
<option value="%%site_title%%">Site Title</option>
<option value="%%seperator%%">Seperator</option>
<option value="%%primary_category%%">Primary Category</option>
<option value="%%primary_store%%">Primary Store</option>
</select>
</div>
<label for="seoTitle">SEO Title</label>
<textarea class="form-control" name="seoTitle" id="seoTitle" placeholder="SEO Title"></textarea>
<span class="text-danger"></span>
</fieldset>
<fieldset class="form-group">
<div class="pull-right" style="margin-bottom: 0.5em;">
<select name="snippetForseoMetaDesc" id="snippetForseoMetaDesc" class="form-control">
<option value="" selected disabled>Insert Snippet</option>
<option value="%%site_title%%">Site Title</option>
<option value="%%seperator%%">Seperator</option>
<option value="%%primary_category%%">Primary Category</option>
<option value="%%primary_store%%">Primary Store</option>
</select>
</div>
<label for="seoMetaDesc">SEO Description</label>
<textarea class="form-control" name="seoMetaDesc" id="seoMetaDesc" placeholder="SEO Meta Description"></textarea>
<span class="text-danger"></span>
</fieldset>
<fieldset>
<label for="seoKeyPhrase">SEO Keyphrase</label>
<input type="text" class="form-control" name="seoKeyPhrase" id="seoKeyPhrase" placeholder="SEO Keyphrase">
<span class="text-danger"></span>
</fieldset>
<div class="box-footer text-center">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>

I was passing wrong ids that is why it was not working! I have implemented it properly now and it is working smoothly.
function insertAtCursor(text, areaId) {
var field = document.getElementById(areaId);
if (document.selection) {
var range = document.selection.createRange();
if (!range || range.parentElement() != field) {
field.focus();
range = field.createTextRange();
range.collapse(false);
}
range.text = text;
range.collapse(false);
range.select();
} else {
field.focus();
var val = field.value;
var selStart = field.selectionStart;
var caretPos = selStart + text.length;
field.value = val.slice(0, selStart) + text + val.slice(field.selectionEnd);
field.setSelectionRange(caretPos, caretPos);
}
}
textarea {
resize: vertical;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="row">
<div class="col-lg-8 col-xs-8 col-lg-offset-2 col-xs-offset-2">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Home</h3>
</div>
<div class="box-body">
<form method="post" id="addHomeForm" enctype="multipart/form-data">
<fieldset class="form-group">
<div class="pull-right" style="margin-bottom: 0.5em;">
<select name="snippetForseoTitle" id="snippetForseoTitle" class="form-control" unselectable="on" onchange="insertAtCursor(this.value, 'seoTitle'); return false">
<option value="" selected disabled>Insert Snippet</option>
<option value="%%site_title%%">Site Title</option>
<option value="%%seperator%%">Seperator</option>
<option value="%%primary_category%%">Primary Category</option>
<option value="%%primary_store%%">Primary Store</option>
</select>
</div>
<label for="seoTitle">SEO Title</label>
<textarea class="form-control" name="seoTitle" id="seoTitle" placeholder="SEO Title"></textarea>
<span class="text-danger"></span>
</fieldset>
<fieldset class="form-group">
<div class="pull-right" style="margin-bottom: 0.5em;">
<select name="snippetForseoMetaDesc" id="snippetForseoMetaDesc" class="form-control" unselectable="on" onchange="insertAtCursor(this.value, 'seoMetaDesc'); return false">
<option value="" selected disabled>Insert Snippet</option>
<option value="%%site_title%%">Site Title</option>
<option value="%%seperator%%">Seperator</option>
<option value="%%primary_category%%">Primary Category</option>
<option value="%%primary_store%%">Primary Store</option>
</select>
</div>
<label for="seoMetaDesc">SEO Description</label>
<textarea class="form-control" name="seoMetaDesc" id="seoMetaDesc" placeholder="SEO Meta Description"></textarea>
<span class="text-danger"></span>
</fieldset>
<fieldset>
<label for="seoKeyPhrase">SEO Keyphrase</label>
<input type="text" class="form-control" name="seoKeyPhrase" id="seoKeyPhrase" placeholder="SEO Keyphrase">
<span class="text-danger"></span>
</fieldset>
<div class="box-footer text-center">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>

Have a function fire once only at the beginning of the form?

Problem: I have the following form below:
var highlight = document.getElementById("miles").addEventListener("click", unHighlightMiles);
$(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');
});
$miles.on("change", function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
$hospital.val('').trigger('input');
});
});
function checkTextField() {
var distance = document.forms["UrgentCareSearch"]["distance"].value;
var zip = document.forms["UrgentCareSearch"]["zip"].value;
if(zip && !distance){
document.getElementById("miles").style.border = "1px solid red";
var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
alert(alertMessage);
return false; //Does not submit form
}
else{
if(zip && distance)
return true;
}
}
function unHighlightMiles(){
document.getElementById("miles").style.border = "1px solid #cccccc";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.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>
</div>
</div>
I am having trouble with having the alert to appear when the user enters a zip code. By default, miles have a default of 5 which is fine. But when the form first appears, the mile section is blank. So when I enter the zip code, rather then showing the alert, it shows the results.
I was using the following:
$zip.one("change", function(){
$miles.val('').trigger('input');
})
which works fine because it only triggers once, however if the user selects mileage and then enters a zip code, the mileage will disappear do the function above.
How would I figure the function above only once if the user first decides to enter a zip code at the beginning of the page?

How to set the current value to 0

Problem: I have the following script that checks if the field has been selected. If the dropdown field has not been selected, no results will be displayed():
$(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');
});
});
function checkTextField() {
var distance = document.forms["UrgentCareSearch"]["distance"].value;
var zip = document.forms["UrgentCareSearch"]["zip"].value;
/*if(zip && distance || !zip && !distance){
return true;
}else{
var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
alert(alertMessage);
return false;
}*/
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;
}
here is the form:
<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" required convert-to-number>
<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>
So when the form is first generated, I enter a zip code and select the submit button. When I do that, in the beginning, instead of showing the alert notifying the user to select a mileage, it will display the result based on the default set to 5.
I would like to set the value to 0/empty if the user has selected the option to look up urgent care by zip code, only in the beginning (meaning when the form is first generated), otherwise, set it to default 5 miles when user looks up by entering a name of a urgent care and city.

Alert User field that is blank is required

Problem: I would like to be able to alert the user if a particular field is empty. Here is how the form looks:
When the user enters a zip code and selects search, I would like a pop up to display to alert the user to select a distance and not display the results. If the user enters hospital name and city drop down, I do not want the alert to appear. Only when the zip code is entered and when the search button is selected.
Here is the form:
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()">
<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"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
<option></option><option >5</option><option>10</option><option>15</option><option>20</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" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>
and here is the script that alerts when the miles is blank:
function validateForm() {
var x = document.forms["UrgentCareSearch"]["distance"].value;
if (x == "" || x=="null") {
alert("Please select distance");
return false;
}
UPDATE
I have done the following and it still does not work the way I want to (which is to show the alert when the search button is entered and when the user has entered a zip code. Meaning once the user has entered a zip code and click on the search button to populate the results, the alert will appear notifying to select the miles and the results will not show until user has entered how many miles and click search again):
function validateForm() {
var x = document.forms["UrgentCareSearch"]["miles"].value;
var $zip = $('#zip');
if ((x == "" && $zip != "") ||(x=="null" && $zip != "")) {
alert("Please select distance");
return false;
}
and this is what I when I used required:
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return checkTextField()">
<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"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" required>
<option value=""></option><option >5</option><option>10</option><option>15</option><option>20</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" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>

adding required to each of the input or select elements would prevent the form from being submitted if they are left blank
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" required /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City" required>
<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"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" required>
<option></option><option >5</option><option>10</option><option>15</option><option>20</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" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
Or there can jquery touch look at this
first give your form an id lets say myform
$(document).ready(function()
{
$('#myform').submit(function()
{
var name = $("#hospital").val();
var name = $("#city").val();
if(name == "" || name == " ")
{
alert("Please enter name");
return false;
}
if(city == "" || city== " ")
{
alert("Please enter city");
return false;
}
//Just like this and at the end when you are satisfied
$(this).submit();
});
});

From what I understand by your problem statement, you can do the following in your validation function.
function validateForm() {
var miles = document.forms["UrgentCareSearch"]["distance"].value;
var zip = document.forms["UrgentCareSearch"]["zip"].value;
if (zip && !miles) {
event.preventDefault(); // This will prevent the form submit
alert("Please enter the Miles.");
return false; // Does't submit the form (for IE)
}
}
Also, when calling the function, just call the function directly.
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="validateForm();">

Clear particular field in a form when a particular field is selected?

I was able to clear particular fields in the form:
$(document).ready(function(){
$('#zip').on("input",function(){
$('#city option[value=""]').prop('selected',true);
})
$('#city').on("change",function(){
$('#zip').val("");
})
})
and the following is the form:
<div class="panel panel-default">
<div class="panel-body">
<form name="providerSearch" id="PS" 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" data-default=""/></div>
</div>
</div>
<div class="form-group"><input id="submit" 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>
The problem I am having is when I choose a city after a zip code was entered with the info displayed, the new results for the city selected is not displaying. It appears in the debugging tool, it is still grabbing from the zip field and not sure why.
Update
$(document).ready(function(){
$('#zip').on("input",function(){
$('#city option[value=""]').prop('selected',true);
})
$('#city').on("change",function(){
$('#zip').val("");
})
})
<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.16/angular.min.js"></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" id="PS" 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="">Sylmar</option>
<option value="">Santa Clarita</option>
<option value="">Los Angeles</option>
<option value="">Ventura</option>
<option value=""></option>
</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" value=""></option>
<option>5</option>
<option>10</option>
<option>15</option>
<option >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" data-default=""/></div>
</div>
</div>
<div class="form-group"><input id="submit" 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>
</div>
UPDATE 2
So using the Chrome developer tool, it appears that the last entry does not get removed using the ready function that I have. It shows the following:
As you can see on the last line, the new city is recognized but the old zip is replace but the value is still being used rather then being removed
Is it possible to force the search button to remove the old value from zip?
Here is the code for a placeholder. It is used mainly to fix the issue for IE 9 and below.
It works fine but I am not sure if this is causing the issue where the zip field is not being recognize that it is blank.
(function($) {
// #todo Document this.
$.extend($,{ placeholder: {
browser_supported: function() {
return this._supported !== undefined ?
this._supported :
( this._supported = !!('placeholder' in $('<input type="text">')[0]) );
},
shim: function(opts) {
var config = {
color: '#888',
cls: 'placeholder',
selector: 'input[placeholder], textarea[placeholder]'
};
$.extend(config,opts);
return !this.browser_supported() && $(config.selector)._placeholder_shim(config);
}
}});
$.extend($.fn,{
_placeholder_shim: function(config) {
function calcPositionCss(target)
{
var op = $(target).offsetParent().offset();
var ot = $(target).offset();
return {
top: ot.top - op.top,
left: ot.left - op.left,
width: $(target).width()
};
}
function adjustToResizing(label) {
var $target = label.data('target');
if(typeof $target !== "undefined") {
label.css(calcPositionCss($target));
$(window).one("resize", function () { adjustToResizing(label); });
}
}
return this.each(function() {
var $this = $(this);
if( $this.is(':visible') ) {
if( $this.data('placeholder') ) {
var $ol = $this.data('placeholder');
$ol.css(calcPositionCss($this));
return true;
}
var possible_line_height = {};
if( !$this.is('textarea') && $this.css('height') != 'auto') {
possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' };
}
var isBorderBox = ($this.css('box-sizing') === 'border-box');
var isTextarea = $this.is('textarea');
var ol = $('<label />')
.text($this.attr('placeholder'))
.addClass(config.cls)
.css($.extend({
position:'absolute',
display: 'inline',
'float':'none',
overflow:'hidden',
textAlign: 'left',
color: config.color,
cursor: 'text',
paddingTop: !isTextarea && isBorderBox ? '0' : $this.css('padding-top'),
paddingRight: $this.css('padding-right'),
paddingBottom: !isTextarea && isBorderBox ? '0' : $this.css('padding-bottom'),
paddingLeft: $this.css('padding-left'),
fontSize: $this.css('font-size'),
fontFamily: $this.css('font-family'),
fontStyle: $this.css('font-style'),
fontWeight: $this.css('font-weight'),
textTransform: $this.css('text-transform'),
backgroundColor: 'transparent',
zIndex: 99,
}, possible_line_height))
.css(calcPositionCss(this))
.attr('for', this.id)
.data('target',$this)
.click(function(){
if (!$(this).data('target').is(':disabled')) {
$(this).data('target').focus();
}
})
.insertBefore(this);
$this
.data('placeholder', ol)
.on('keydown', function () {
ol.hide();
})
.on('blur change', function () {
ol[$this.val().length ? 'hide' : 'show']();
})
.triggerHandler('blur');
$(window).one("resize", function () { adjustToResizing(ol); });
}
});
}
});
})(jQuery);
jQuery(document).add(window).bind('ready load', function() {
if (jQuery.placeholder) {
jQuery.placeholder.shim();
}
});
I appreciate for all the help I have been receiving, I appreciate it