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();">
Related
It seems that this script is working and stopping the submit button from working until after the captcha v2 has been verified.
I tried following some guides from previous questions but nothing seems to work for me.
Could someone shed some light on me? Thanks.
<form id="myForm" class="contact-form" action="php/send-email.php" method="post" novalidate>
<div class="row">
<div class="column width-6">
<input type="text" name="fname" class="form-fname form-element large" placeholder="First Name*" tabindex="1" required>
</div>
<div class="column width-6">
<input type="text" name="lname" class="form-lname form-element large" placeholder="Last Name" tabindex="2">
</div>
<div class="column width-6">
<input type="email" name="email" class="form-email form-element large" placeholder="Email address*" tabindex="3" required>
</div>
<div class="column width-6">
<div class="field-wrapper">
<div class="form-select form-element">
<select name="budget" tabindex="4" class="form-aux" data-label="Project Type">
<option selected="selected" value="">Project Type</option>
<option value="">Website Project</option>
<option value="">Marketing</option>
<option value="">Branding</option>
<option value="">Other</option>
</select>
</div>
</div>
</div>
<div class="column width-6">
<input type="text" name="honeypot" class="form-honeypot form-element large">
</div>
</div>
<div class="row">
<div class="column width-12">
<div class="field-wrapper">
<textarea name="message" class="form-message form-element large" placeholder="Message(Include phone number if needed)*" tabindex="7" required></textarea>
</div>
</div>
<div class="column width-12">
<div class="g-recaptcha"
data-callback="onCompleted"
data-sitekey="6Legq1IUAAAAANF4DoxqEkVyS3jY0N4UQKDUPuBa">
</div>
<input type="submit" value="Send Email" class="form-submit button medium bkg-theme bkg-hover-theme color-white color-hover-white" onsubmit="check_if_capcha_is_filled">
</div>
</div>
</form>
<script>
$('#myForm').submit(function(event) {
console.log('form submitted.');
if (!grecaptcha.getResponse()) {
console.log('captcha not yet completed.');
event.preventDefault(); //prevent form submit
grecaptcha.execute();
} else {
console.log('form really submitted.');
}
});
onCompleted = function() {
console.log('captcha completed.');
$('#myForm').submit();
alert('wait to check for "captcha completed" in the console.');
}
Yes the stript is closed I don't know why the end tag isn't showing.
I have one html form in that there are three tabs within three div.
i want to submit form on one submit button without console error.
I used below script for tabbed html 5 validation its work but it gives console error on chrome browser, like
An invalid form control with name='campign' is not focusable.
please help if anybudy know about this.
<html>
<body>
<div class="col-md-12 col-sm-12 ad_dealer nav-tabs-menu">
<ul class="nav nav-tabs">
<li class="active" title="Personal Information">
<a data-toggle="tab" href="#per-info">
<span> Personal Information</span></a></li>
<li class="secnd" title="Communication Address">
<a data-toggle="tab" href="#comm-add">
<span> Communication Address</span></a></li>
<li class="secnd" title="Experience & Educational Details">
<a data-toggle="tab" href="#exp-edu">
<span>Exp & Educational Details </span></a></li>
</ul>
</div>
<div class="tab-content dealer-tabs">
<!-- <div class="col-md-12">
<h6 class="gg per_info det-area"><span class="line-center">Personal Information</span></h6>
</div> -->
<div id="per-info" class="tab-pane fade in active row col-sm-12">
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Blood Group<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="blood-grp" id="blood-grp" title="Please Select Blood Group" required oninvalid="this.setCustomValidity('Please Select Blood Group')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">A+ </option>
<option value="2">A-</option>
<option value="2">AB+</option>
<option value="2">AB-</option>
<option value="2">B+</option>
<option value="2">B-</option>
<option value="2">O+</option>
<option value="2">O-</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Date of Birth<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="enqdate" name="enqdate" value="" class="form-control datepicker" placeholder="dd-mmm-yyyy" title="Please Enter Date of Birth" required oninvalid="this.setCustomValidity('Please Enter Date of Birth')" onChange="setCustomValidity('')" onkeypress = "return false; event.charCode >= 48 && event.charCode <= 57">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Marital Status<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="blood-grp" id="blood-grp" title="Please Select Marital Status" required oninvalid="this.setCustomValidity('Please Select Marital Status')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">Married </option>
<option value="2">Unmarried</option>
<option value="3">Divorced </option>
<option value="4"> Widowed</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Wedding Date</label>
<div class="col-md-6">
<input type="text" id="enqdate" name="enqdate" value="" class="form-control datepicker" placeholder="dd-mmm-yyyy" title="Please Enter Wedding Date">
</div>
</div>
</div>
<div class="clearfix"> </div>
<!-- <div class="col-md-12">
<h6 class="gg cust_mar det-area"><span class="line-center">Alternate Information</span></h6>
</div> -->
<div class="clearfix"> </div>
<div div id="comm-add" class="tab-pane fade row col-sm-12">
<div class="comm-top">
<div class="form-group row col-sm-6 address-sec" id="campa">
<label class="col-md-4 form-control-label" for="">Permanent Address<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="campign" name="campign" class="form-control" placeholder="Permanent Address" title="Please Enter Permanent Address" required oninvalid="this.setCustomValidity('Please Enter Permanent Address')" onChange="setCustomValidity('')" style='margin-bottom:5px;' maxlength="250">
<input type="text" id="campign" name="campign" class="form-control" placeholder="" title="" style='margin-bottom:5px;'>
<input type="text" id="campign" name="campign" class="form-control" placeholder="" title="">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent Village<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="per-vill" id="per-vill" title="Please Select Permanent Village" required oninvalid="this.setCustomValidity('Please Select Permanent Village')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="Marwad ">Marwad </option>
<option value="Thergaon">Thergaon</option>
<option value="Sarangkheda">Sarangkheda</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent Tehsil<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="per-teh" id="per-teh" title="Please Select Permanent Tehsil" required oninvalid="this.setCustomValidity('Please Select Permanent Tehsil')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="Amalner ">Amalner </option>
<option value="Mulshi">Mulshi</option>
<option value="Mulshi">shada</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent District<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="per-dis" id="per-dis" title="Please Select Permanent District" required oninvalid="this.setCustomValidity('Please Select Permanent District')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="Jalgaon ">Jalgaon </option>
<option value="Pune">Pune</option>
<option value="Mulshi">Mulshi</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Permanent State<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="blood-grp" id="blood-grp" title="Please Select Permanent State" required oninvalid="this.setCustomValidity('Please Select Permanent State')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">Maharashtra </option>
<option value="2">Punjab</option>
</select>
</div>
</div>
<div class="form-group row col-sm-6 has-feedback">
<label class="col-md-4 form-control-label" for="">Permanent Pin Code<span class="requerido">*</span></label>
<div class="col-md-6">
<input name="myInput_DRS" class="form-control"
onkeypress="return isNumeric(event)"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "10"
min = "1"
max = "10" />
<!-- <input type="text" id="pincode" name="pincode" class="form-control" placeholder="Permanent Pin Code" title="Please Enter Permanent Pin Code" required="" pattern="[0-9]{6}" oninvalid="InvalidMsg(this,'Please Enter Valid Pin Code','Please Enter Pin Code');" oninput="InvalidMsg(this,'Please Enter Valid Pin Code','');" onpaste="return false" onChange="setCustomValidity('')" maxlength="6" onKeyPress="return isNumberKey(event)" onKeyUp="return isNumberKeyWithMark(event,'pincode','validateMark')" /> -->
<span class="glyphicon glyphicon-ok form-control-feedback" value="" id="validateMark" style="display:none;"></span>
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Permanent Contact No<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="percontactno" name="percontactno" value="" class="form-control" placeholder="Permanent Contact No" title="Please Enter Permanent Contact No" required="" pattern="[0-9]{1,20}" onpaste="return false" oninvalid="InvalidMsg(this,'Please Enter Valid Permanent Contact No','Please Enter Permanent Contact No');" oninput="InvalidMsg(this,'Please Enter Valid Permanent Contact','');" onkeyup="inavlidMsgKeyUp(this,event,'Please Enter Permanent Contact No');" onKeyPress="return isNumberKey(event)" onChange="setCustomValidity('');" maxlength="20"/>
</div>
</div>
</div><!--comm-top-->
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<div id="exp-edu" class="tab-pane fade row col-sm-12">
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Experience (In Years)<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="exp" name="exp" value="" class="form-control" placeholder="Experience" title="Please Enter Experience" required="" pattern="^[0-9]+(\.[0-9]{1,2})?$" oninvalid="InvalidMsg(this,'Please Enter valid Experience','Please Enter Experience');" oninput="InvalidMsg(this,'Please valid Enter Experience','');" onkeyup="inavlidMsgKeyUp(this,event,'Please Enter Experience');" onchange="setCustomValidity('')" maxlength="10" onKeyPress="return isNumberKey(event)">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label" for="">Salary Per Month<span class="requerido">*</span></label>
<div class="col-md-6">
<input type="text" id="salpermonth" name="salpermnth" value="" class="form-control" placeholder="Salary Per Month" title="Please Enter Salary Per Month" required="" pattern="^[0-9]+(\.[0-9]{1,2})?$" oninvalid="InvalidMsg(this,'Please Enter Valid Salary Per Month','Please Enter Salary Per Month');" oninput="InvalidMsg(this,'Please Enter Salary Per Month','');" onkeyup="inavlidMsgKeyUp(this,event,'Please Enter Salary Per Month');" onChange="setCustomValidity('')" maxlength="40" onKeyPress="return isNumberKey(event)">
</div>
</div>
<div class="form-group row col-sm-6 ">
<label class="col-md-4 form-control-label " for="">Education<span class="requerido">*</span></label>
<div class="col-md-6">
<select class="form-control opt " name="edu" id="edu" title="Please Select Education" required oninvalid="this.setCustomValidity('Please Select Education')" onChange="setCustomValidity('')">
<option class="service-small" value="">Select</option>
<option value="1">Diploma</option>
<option value="2">BE</option>
<option value="3">Graduation</option>
<option value="4">Post Graduation</option>
</select>
</div>
</div>
</div>
</div><!--tab-content-->
</div>
<div class="card-footer en_footer">
<button type="submit" title="Submit" id="sub" class="btn btn-sm no_radius btn btn-success">Submit</button>
<button type="button" id="MyReset" title="Reset" class="btn btn-sm no_radius btn-primary">Reset</button>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$('#sub').click(function(evt){ // submit button click event
var $myForm = $('#AddDealerEmployee');
if(!$myForm[0].checkValidity()) {
// If the form is invalid, submit it. The form won't actually submit;
// this will just cause the browser to`enter code here` display the native HTML5 error messages.
var flag1=1;
var flag2=1;
var flag3=1;
var inputs = $('#per-info').find("select, textarea, input");
inputs.each(function( index ) {
//console.log($(this));
if ($(this).is("input") && $(this).prop('required') && !$(this)[0].checkValidity()) {
flag1=0;
}
if ($(this).is("select") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag1=0;
}
});
//comm-add
var inputs = $('#comm-add').find("select, textarea, input");
inputs.each(function( index ) {
//console.log($(this));
if ($(this).is("input") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag2=0;
}
if ($(this).is("select") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag2=0;
}
});
//exp-edu
var inputs = $('#exp-edu').find("select, textarea, input");
inputs.each(function( index ) {
//console.log($(this));
if ($(this).is("input") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag3=0;
}
if ($(this).is("select") && $(this).prop('required') && !$(this)[0].checkValidity()) {
//alert("hi");
flag3=0;
}
});
if(flag1 == 0)
{
if(!$('#per-info').hasClass('active') && $('#comm-add').hasClass('active'))
{
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
}
else
if(!$('#per-info').hasClass('active') && $('#exp-edu').hasClass('active'))
{
$('.nav-tabs li:first').find('a').trigger('click');
}
else
{
}
}
else if(flag2 == 0)
{
if(!$('#comm-add').hasClass('active') && $('#per-info').hasClass('active'))
{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
else
if(!$('#comm-add').hasClass('active') && $('#exp-edu').hasClass('active'))
{
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
}
else
{
}
}
else if(flag3 == 0)
{
if(!$('#exp-edu').hasClass('active') && $('#comm-add').hasClass('active'))
{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
else
if(!$('#exp-edu').hasClass('active') && $('#per-info').hasClass('active'))
{
$('.nav-tabs li:last').find('a').trigger('click');
}
else
{
}
}
else { }
}
});
</script>
</body>
</html>
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>
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>
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?
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.