I have a select that the shows the title property on load. I have some JS so that when certain options are selected different divs show. My issue is that the divs show on load and I don't want them to show until their correct option is selected.
function typePicker() {
var sel = document.getElementById("type");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var typeInputs = document.getElementById("typeInputs");
var aps = document.getElementById("aps");
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="cableType" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
// Yes I know this is improper that is why I am doing the switch over and came across this issue
if (sel.value == "aps") {
aps.style.display = 'block';
} else {
aps.style.display = 'none';
}
if (sel.value == "cables") {
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML = cables; // This line will be changed soon to the style above in process of doing this to all.
} else {
manufacturer.style.display = 'block';
model.style.display = 'block';
}
}
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
<option value="laptops">Laptop</option>
<option value="deskPhones">Desk Phone</option>
<option value="mobilePhones">Mobile Phone</option>
<option value="monitors">Monitor</option>
<option value="printers">Printer</option>
<option value="projectors">Projector</option>
<option value="routers">Router</option>
<option value="switches">Switch</option>
<option value="tablets">Tablet</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
<div id="aps">
<div class="form-group">
<input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address">
</div>
<!-- IP Address -->
<div class="form-group">
<input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address">
</div>
<!-- MAC Address -->
<div class="form-group">
<input type="text" class="form-control" name="range" id="range" placeholder="Range in M">
</div>
<!-- Range -->
<div class="form-group">
<input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands">
</div>
<!-- Bands -->
<div class="form-group">
<input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)">
</div>
<!-- Channels -->
<div class="form-group">
<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type\'text\')" id="date-bought" name="dateBought">
</div>
<!-- Date Bought -->
<div class="btn-group" data-toggle="buttons">
<label for="poe">PoE</label>
<br>
<label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label>
<label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label>
</div> <br><br>
<!-- PoE -->
<div class="form-group">
<input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')" id="warranty-date" name="warrantyDate">
</div>
<!-- Warranty Date -->
<div class="form-group">
<input class="form-control" id="location" placeholder="Location">
</div>
<!-- Location -->
</div>
</div>
<div class="form-gorup" id="warningType">
</div>
I can not get the snippet to work at all when you select another option. The only one there is code for in the snippet is for the aps and cables ones. Code works file on my server and is good enough for this snippet I believe. The main issue of the aps div showing upon load is the problem. How can I make it not show on load?
If additional code or info is needed please ask away.
I implemented what your question is asking for in CSS.
#aps {
display: none;
}
This will hide you div with the ID of 'aps' by default, on load. You can then modify the style to display it when you need it.
function typePicker(){
var sel = document.getElementById("type");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var typeInputs = document.getElementById("typeInputs");
var aps = document.getElementById("aps");
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="cableType" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
// Yes I know this is improper that is why I am doing the switch over and came across this issue
if(sel.value=="aps"){
aps.style.display = 'block';
}else{
aps.style.display = 'none';
}
if(sel.value=="cables"){
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML=cables; // This line will be changed soon to the style above in process of doing this to all.
}else{
manufacturer.style.display = 'block';
model.style.display = 'block';
}
}
#aps {
display: none;
}
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
<option value="laptops">Laptop</option>
<option value="deskPhones">Desk Phone</option>
<option value="mobilePhones">Mobile Phone</option>
<option value="monitors">Monitor</option>
<option value="printers">Printer</option>
<option value="projectors">Projector</option>
<option value="routers">Router</option>
<option value="switches">Switch</option>
<option value="tablets">Tablet</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
<div id="aps">
<div class="form-group">
<input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address">
</div> <!-- IP Address -->
<div class="form-group">
<input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address">
</div> <!-- MAC Address -->
<div class="form-group">
<input type="text" class="form-control" name="range" id="range" placeholder="Range in M">
</div> <!-- Range -->
<div class="form-group">
<input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" >
</div> <!-- Bands -->
<div class="form-group">
<input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)">
</div> <!-- Channels -->
<div class="form-group">
<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type\'text\')" id="date-bought" name="dateBought">
</div> <!-- Date Bought -->
<div class="btn-group" data-toggle="buttons">
<label for="poe">PoE</label>
<br>
<label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label>
<label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label>
</div> <br><br><!-- PoE -->
<div class="form-group">
<input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')" id="warranty-date" name="warrantyDate">
</div><!-- Warranty Date -->
<div class="form-group">
<input class="form-control" id="location" placeholder="Location">
</div><!-- Location -->
</div>
</div>
<div class="form-gorup" id="warningType">
</div>
Related
I am using Angular 2 and I have created a form and mark all the fields as required but in only one field required is not working but when I inspect through browser then I can check on that field it is giving error like ng-untouched, ng-invalid sill my form got submitted.
My code is below:
<form (ngSubmit)="AddUpdateExperience(selectedExperience);experienceForm.reset();selectedExperience.restaurantType='';selectedExperience.workProfile='';selectedExperience.restaurantName=''" #experienceForm="ngForm">
<div class="form-group">
<div class="col-sm-6">
<!--<input type="text" class="form-control" placeholder="City" name="scity" [(ngModel)]="selectedExperience.city" #scity="ngModel" required />-->
<input type="text" class="form-control input-responsive" [(ngModel)]="selectedExperience.city" [ngModelOptions]="{standalone: true}" options="{types: ['address'], componentRestrictions: { country: 'US' }}" (setAddress)="getAddressForExperience($event)" (city)='city=$event' (postal_code)='postal_code=$event' id="autocomplete" placeholder="City you work in*" required ng2-google-place-autocomplete />
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive" placeholder="Zip(Optional)" name="szip" [(ngModel)]="selectedExperience.zip" maxlength="5" pattern="[0-9]{5}" #szip="ngModel" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<!--<input type="text" class="form-control" [(ngModel)]="selectedExperience.restaurantName" #restaurantName="ngModel" placeholder="Restaurant Name" name="restaurantName" required>-->
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName" #myserver [formControl]="restaurant" [source]="restaurants" [list-formatter]="autocompleListFormatter" value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*" (blur)="update(myserver.value)" loading-text="Loading" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select class="form-control input-responsive" name="restaurantType" [(ngModel)]="selectedExperience.restaurantType" #restaurantType="ngModel" required>
<option value="" disabled selected>Select Restaurant Type</option>
<option value="Ethnic">Ethnic</option>
<option value="Fast Food">Fast Food</option>
<option value="Fast Casual">Fast Casual</option>
<option value="Casual Dinning">Casual Dinning</option>
<option value="Family Style">Family Style</option>
<option value="Fine Dinning">Fine Dinning</option>
<option value="Cafe">Cafe</option>
<option value="Bar">Bar</option>
</select>
</div>
<div class="col-sm-6">
<select class="form-control input-responsive" name="designation" [(ngModel)]="selectedExperience.workProfile" #workProfile="ngModel" required>
<option value="" disabled selected>Select Work Profile</option>
<option value="Bartender">Bartender</option>
<option value="Server">Server</option>
<option value="Busser">Busser</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerFrom" readonly="true" placeholder="From* : MM/yyyy" maxlength="7" name="fromDate" [(ngModel)]="selectedExperience.fromDate" required #fromDate="ngModel" />
<div *ngIf="fromDate.errors && (fromDate.dirty || fromDate.touched)">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">
From Date is required
</small>
</div>
<!--<div *ngIf="fromDate.errors">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">Invalid From Date</small>
</div>-->
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerTo" readonly="true" [disabled]="selectedExperience.isCurrentJob" placeholder="To*: MM/yyyy" maxlength="7" name="toDate" [(ngModel)]="selectedExperience.toDate" #toDate="ngModel" />
<div *ngIf="toDate.errors">
<small [hidden]="!toDate.errors.pattern" class="text-danger">Invalid To Date</small>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<ui-switch (change)="onChange($event)" [(checked)]="selectedExperience.isCurrentJob"></ui-switch>
<p>This is my current job</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" [disabled]="!experienceForm.form.valid " value="{{experienceButtonText}}" class="btn btn-success" />
</div>
</div>
</form>
my form is not working for this field:
[(ngModel)]="selectedExperience.restaurantName"
You have used template driven forms for this. Please remove [formControl]="restaurant" and add name="restaurantName" #restaurantName="ngModel". Following is the working code. It works for me.
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName"
#myserver [source]="restaurants" [list-formatter]="autocompleListFormatter"
value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*"
(blur)="update(myserver.value)" loading-text="Loading" required name="restaurantName" #restaurantName="ngModel">
I am trying to insert some HTML based off a select value, I plan to have 12 values then have different html inserted based off what each value is. I have done this before and even using the code from before with slight changes to it specific to the code I am working with today.
My HTML code is:
{% extends '../../layouts/appDashboard.html' %}
{% block title %}{{title}}{% endblock %}
{% block content %}
<div class="container-fluid container-max">
<div><br><br></div>
<div class="box box-warning box-solid">
<div class="box-header with-border">
<h3 class="box-title">Create Model</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<div class="row">
<div class="col-md-3 col-sm-8">
<!-- Content here -->
<div class="container">
<div class="col-md-6 col-md-offset-2">
<form role="form-inline"action="/dashboard/it/model/new" method="POST">
<div class="box-body">
<div class="form-group">
<label for="templateName" class="control-label">Template Name</label>
<input type="text" class="form-control" id="name" placeholder="Asset Template Name">
</div>
<div class="form-group">
<label for="manufacturer" class="control-label">Manufacturer</label>
<select class="form-control selectpicker" title="Manufacturer" name="manufacturer" data-live-search="true">
<option value="cisco">Cisco</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="model" class="control-label">Model Name</label>
<input type="text" class="form-control" id="model" placeholder="Model Name">
</div>
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="Cable">Cable</option>
<option value="Desktop">Desktop</option>
<option value="Laptop">Laptop</option>
<option value="Desk Phone">Desk Phone</option>
<option value="Mobile Phone">Mobile Phone</option>
<option value="Monitor">Monitor</option>
<option value="Printer">Printer</option>
<option value="Projector">Projector</option>
<option value="Router">Router</option>
<option value="Switch">Switch</option>
<option value="Tablet">Tablet</option>
</select>
</div>
<div class="form-group" id="typeInputs">
</div>
<div class="form-group">
<label for="asset number">Asset Number</label>
<input type="number" class="form-control" id="assetNumber" placeholder="Asset Number">
</div> <!-- Asset Number -->
<div class="form-group">
<label for="notes">Notes</label>
<textarea class="form-control" rows="3" id="notes" placeholder="Notes.."></textarea>
</div> <!-- Notes -->
<div class="btn-group" data-toggle="buttons">
<label for="">User Assignable</label><br>
<label class="btn btn-primary">
<input type="radio" name="signout" id="option1"> Yes
</label>
<label class="btn btn-primary">
<input type="radio" name="signout" id="option2"> No
</label>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.box-body -->
</div>
<!--/.box-body -->
</div>
{% include "../../partials/flash.html" %}
</div>
</div>
{% endblock %}
Then my JS code is:
function typePicker(){
var sel=document.getElementById("type");
var typeInputs=document.getElementById("typeInputs");
var aps = '<div class="form-group"><input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address"></div> <!-- IP Address --><div class="form-group"><input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address"></div><!-- MAC Address --><div class="form-group"><input type="text" class="form-control" name="range" id="range" placeholder="Range in M"></div><!-- Range --><div class="form-group"><input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" ></div><!-- Bands --><div class="form-group"><input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)"></div><!-- Channels --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div> <br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control" id="location" placeholder="Location"></div><!-- Location --></div>';
if(sel.value=="aps"){
typeInputs.innerHTML=aps;
}
if(sel.value!="other"){
var child = document.getElementById("typeInputs");
child.parentNode.removeChild(child);
}
}
I know I messed up the HTML in the JS code but I can't even get any to work. Reason I included the full html I need inserted is I am hoping someone knows a better way of coding this so that I don't have un-needed divs and such.
If I am missing any code or details just ask, I will be watching this question closely until I get it to work.
I would also like to have the html disappear change when the user selects another value that way only the html for that value actually shows.
The good practice will be to use events.
Pure JS:
var foo = document.getElementById("type");
foo.addEventListener("change",function(){
...
Do whatever
...
});
Using jQuery:
$('#type').change(function(){
....
Do whatever
....
})
I have a set of html5 fields inside a registration form tags in the code below.The inbuilt jquery plugin called validation.js is working fine with all the html fields which doesnt have any other jquery function defined on the html element tag's "id" attribute. In validate.js , the jquery validation rules: and messages: are customised with respect to html element's "name" attribute.My problem is jquery validations are not working on those html element tags whose id is used for defining other functions
For eg :
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option id="S" value="user1">user1</option>
<option id="T" value="user2">user2</option>
</select>
In the above code snippet you can see the usertype . when the usertype is selected there is a jquery which works onChange event with respect to the id="usertype".But my requirement is to do the validation that,the user must mandatorily select the usertype with the jquery validation plugin as well with the other jquery function .How to solve this? How can i write the validation rule for the select dropdown (required).
<div class="form-group">
<input type="email" class="form-control input-lg" name="uname" placeholder="email address" id="uname" onBlur="checkAvailability()">
<span id="user-availability-status"></span>
<p><img src="loading-small.gif" id="loaderIcon" style="display:none" /></p>
<div id ="errors">
</div>
</div>
<div class="form-group">
<input class="form-control input-lg" name="password" id="password" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control input-lg" name="password2" placeholder="Re-enter password" type="password">
</div>
<!--<div class="form-group">
<input type="password" class="form-control input-lg" name="cfmPassword" placeholder="Retype above password" id="cfmPassword">
<span id="confirm-password-status"></span>
</div>-->
<p>Are you a user1 or user2 </p>
<div class="form-group">
<label class="control-label" for="usertype"></label>
<select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
<option value="none" selected>Select user type</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
</select>
<div id ="errors">
</div>
</div>
<p> </p>
<!--Student Section Form BEGIN-->
<div id="user1">
<div class="form-group" >
<input type="text" align="center" class="form-control input-lg" name="user1_first_name" placeholder="First Name" id="firstname">
</div>
<div class="form-group">
<input type="text" align="center" class="form-control input-lg" name="user1_last_name" placeholder="Last Name" id="lastname">
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="male" /> Male
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="female"/> Female
</label>
<label class="btn btn-default">
<input type="radio" class="form-control input-lg" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
So I am trying to figure out a way to blank a field if a particular field is entered and vice versa.
The form locates urgent care locations base on the entries that the users enters. So we have the urgent care facility name, city, zip code and miles field.
So what I would like to do is if the user enters the zip code in the zip code field and if the user previously had selected a city based on the selection given, it blanks out the city and vice versa. If the user selects a city from the city drop down list, the zip code field blanks out.
The following is the code I have:
$('#zip').on('input', function() { $('#city').val("") })
$('#city').on('input', function() { $('#zip').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
</div>
<!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
<div class="form-group">
<!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
<option disabled="disabled" selected="selected" value="">City</option> </select>--->
<SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<cfoutput query="UCarecityFind">
<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" 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">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>
</div>
You have an invisible character with code 0x5396c after input in your .on() calls. When I remove that, the code works.
$('#zip').on('input', function() {
$('#city').val("")
})
$('#city').on('input', function() {
$('#zip').val("")
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
</div>
<!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
<div class="form-group">
<!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
<option disabled="disabled" selected="selected" value="">City</option> </select>--->
<SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<cfoutput query="UCarecityFind">
<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" 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">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>
</div>
I wanted to disable the div when i click the the checkbox. if the current address and permanent address are the same, the user just click the check box to disabled the field of the permanent address. Thanks!
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
Add the following JS to your code.
$(document).ready(function(){
$('input[type="checkbox"]').change(function(){
$('.permanentAdd').attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group ">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control permanentAdd" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
You can try something like this
<input type="checkbox" id="check_box" onchange="set_status();">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <div id="txt_field" name="txt_field"> </div>
<script type="text/javascript">
function set_status() {
var appendData = '';
var checkbox = document.getElementById("check_box");
if (checkbox.checked == true) {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" readonly="readonly" data-validate="required" placeholder="Zip Code" />';
}
else {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" data-validate="required" placeholder="Zip Code" />';
}
window.jQuery('#txt_field').html(appendData);
}
</script>
</div>
</div>
</div>
</div>
Here is the example how you do this thing easy. make sure you have only one checkbox in this window. else this not working, then you need to change something.
jQuery
$( "input[type=checkbox]" ).on( "click", function(){
var n = $("input[type=checkbox]:checked").length;
if(n){
$(".permanent-address").attr("disabled", 'disabled');
}else{
$(".permanent-address").removeAttr("disabled");
}
});
HTML
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
<input class="form-control permanent-address" rv-value="address:address" name="model.cid" data-validate="required" />
Pure javascript anwser
function checkAddress(checkbox) {
var inputs = document.querySelectorAll('input:not([type=checkbox])');
var selects = document.querySelectorAll('select');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = checkbox.checked;
}
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = checkbox.checked;
}
}
HTML code
<input type="checkbox" onclick="checkAddress(this)">
https://jsfiddle.net/0ba4f7jd/
Simply create a function that gets called when the checkbox is checked, which disables the div and all child elements:
$('#checkbox').change(function(){
var div = $('#everything');
if (div.attr('class')!="disabled") {
div.addClass("disabled");
$("#everything *").attr("disabled", true);
}
else {
div.removeClass("disabled");
$('#everything *').attr('disabled',false);
}
});
DEMO