I got the problem that i got 2 ng-clicks but only one works. when I reload the page always only one button works the other not. for this i use angularjs, HTML and Css.
the first click:
<img class="cClickable" ng-click="addPassword()" src="plus.svg">
AngularJS:
$scope.addPassword = function() {
var newPassword = {
Id: null,
Name: '',
Passwort: '',
Beschreibung: '',
Category: []
}
$scope.editPassword(newPassword);
$scope.titlePopup = "Neues Passwort hinzufügen";
}
$scope.editPassword = function(password) {
$scope.currentPassword = angular.copy(password);
$scope.isShownEdit = true;
$scope.titlePopup = "Passwort bearbeiten";
}
the second button:
<img class="cClickable cTableImgedit" ng-click="editPassword(item)" src="pencil.svg">
when i click the button a popup is in the front.
the images are existing.
this is the popup.
<div class="backgroundOverlay cShow" ng-show="isShownEdit">
<div class="dropDown positionPopUp inpuBlock" id="add">
<div class="inputBlock">
<h1 class="popupTitle">{{titlePopup}}</h1>
<div>
<div class="cClearFloat cInputSpace">
<input placeholder="Name" ng-model="currentPassword.Name">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Passwort" ng-model="currentPassword.Passwort">
</div>
<div class="cClearFloat cInputSpace">
<input placeholder="Beschreibung" ng-model="currentPassword.Beschreibung">
</div>
<div class="cClearFloat cInputSpace">
<div class="divSmall">
<label class="inputDropdownPlaceholder">Kategorien</label>
<div class="divOptions" ng-repeat="item in categories">
<label class="labelDropDown"><input type="checkbox" class="inputDropDown" ng-model="item.isChecked" ng-checked="checkedCategory(item)" ng-init="item.isChecked = checkedCategory(item)" ng-change="changedCategory(item)">{{item.Label}}</label><br>
</div>
</div>
<div class="cClearFloat cButtons">
<button class="cButtonSpeichern" ng-click="showAlertPassword()">Speichern</button>
<button class="cButtonAbbrechen" ng-click="isShownEdit= false">Abbrechen</button>
</div>
</div>
</div>
</div>
</div>
</div>
when i click on the images the popup comes into the front.
Related
I want to show an section when the checkbox is checked on another section, and show it with an animation from the top. I have the following code for the input that is in another section .
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
Also showing the section I need to show; this section has a default display:none.
Its a classic JS task. Use an onclick event to check if the checkbox is checked and then to change the section from display: none to display: block . Also Add an onclick event so that JS is triggered.
function showSection() {
var showSection = document.getElementById("reveal-email"),
planSection = document.getElementById("plan-section");
if (showSection.checked == true) {
planSection.style.display = "block";
} else {
planSection.style.display = "none";
}
}
#plan-section {
display: none;
}
<div className="continue" id="first">
<button className="btn-continue">Contratar Plano
<input type="checkbox" id="reveal-email" onclick="showSection()">
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
One recommendation regarding your code:
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"></input>
</button>
It's not a good practice to group checkbox and some text into button, in HTML you can use label for that.
If JS solution is acceptable, you need to follow these steps:
Find your checkbox button and section in the DOM
Add event listener which will trigger callback function after each change of the checkbox state
In the callback function you need to trigger style for your section.
The full code is below:
var checkbox = document.getElementById('reveal-email');
var section = document.getElementById('plan-section');
checkbox.addEventListener('change', onChange)
function onChange() {
if (this.checked) {
section.style.display = "block";
} else {
section.style.display = "none";
}
}
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section" style="display:none">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
Using JQuery I would like to check the value of an input, if it equals Complete I would like to add the Bootstrap class is-valid to that input, and all the other inputs on the same row.
Something like this (pseudo code);
if wb_status_reg = Complete {
// add is-valid to all row inputs / select boxes
}
I should note that sometimes the row will contain a select box, not just text inputs. Also, I'm unable to edit the html as it's being generated by a form builder component (in a CMS).
My code is currently working but I know it's too long and could be improved. In my code i'm showing one form-row but I actually have many more, so I need to duplicate this a few more times.
How can I achieve this in a more efficient way?
jQuery(document).ready(function($) {
var wb_stage_reg = $('#wb_stage_reg');
var wb_status_reg = $('#wb_status_reg');
var wb_date_reg = $('#wb_date_reg');
setIsValid($);
});
function setIsValid($) {
wb_stage_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_stage_reg).addClass("is-valid") : "";
wb_status_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_status_reg).addClass("is-valid") : "";
wb_date_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_date_reg).addClass("is-valid") : "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>
Something like this:
You need to change ID to class on all fields
Since you cannot, I use the name instead:
$(function() {
$("[name='form[wb_status_reg]']").each(function() {
const $parent = $(this).closest(".form-row");
const complete = this.value === "Complete";
$parent.find("[name='form[wb_date_reg]'], [name='form[wb_stage_reg]']").toggleClass("is-valid",complete)
})
});
.is-valid { color:green}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>
Here is the error Message:
WARNING in Invalid background value at 160:282. Ignoring.
WARNING in Invalid background value at 184:60084. Ignoring.
ERROR in src/app/form/form.component.html(14,48): : Property 'name' does not exist on type 'FormComponent'.
src/app/form/form.component.html(27,69): : Property 'homePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(32,67): : Property 'cellPhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(37,71): : Property 'officePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(168,21): : Property 'homePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(169,21): : Property 'cellPhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(170,21): : Property 'officePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(189,11): : Property 'NaN' does not exist on type 'FormComponent'.
src/app/form/form.component.html(14,48): : Property 'name' does not exist on type 'FormComponent'.
src/app/form/form.component.html(27,69): : Property 'homePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(32,67): : Property 'cellPhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(37,71): : Property 'officePhone' does not exist on type 'FormComponent'.
Here is my form.component.html
<div [hidden]="submitted" >
<form #calculatingForm="ngForm" (ngSubmit)="onSubmit(calculatingForm)" class="ui big form">
<h2 class="ui dividing header">ProShine Quote Calculator</h2>
<div class="spacer30"></div>
<div class="ui grid">
<div class="row">
<div class="eight wide column">
<div class="required field">
<label for="name">Client Name</label>
<input type="text" name="name" [(ngModel)]="name" #client="ngModel" required autofocus>
<div [hidden]="client.valid || client.pristine" class="ui negative message">
<div class="header">
No Client Name Entered
</div>
<p>Please Enter A Name
</p>
</div>
</div>
<div class="field">
<label for="homePhone">Home Phone</label>
<input type="tel" name="homePhone" id="homePhone" [(ngModel)]="homePhone" placeholder="(123) 456-7890"
[textMask]="{mask: mask}">
</div>
<div class="field">
<label for="cellPhone">Cell Phone</label>
<input type="tel" name="cellPhone" id="cellPhone" [(ngModel)]="cellPhone" placeholder="(123) 456-7890"
[textMask]="{mask: mask}">
</div>
<div class="field">
<label for="officePhone">Office Phone</label>
<input type="tel" name="officePhone" id="officePhone" [(ngModel)]="officePhone" placeholder="(123) 456-7890"
[textMask]="{mask: mask}">
</div>
</div>
<div class="eight wide column">
<div class="required field">
<label for="totalPanes">Total Number of Panes</label>
<input type="number" name="totalPanes" id="totalPanes" [(ngModel)]="totalPanes" #panes="ngModel" required>
<div [hidden]="panes.valid || panes.pristine" class="ui negative message">
<div class="header">
You Didn't Enter A Number
</div>
<p>Please Enter the Number of Panes
</p>
</div>
</div>
<div class="field">
<label for="floorPanes">Number of Floor Panes</label>
<input type="number" name="floorPanes" id="floorPanes" [(ngModel)]="floorPanes">
</div>
<div class="field">
<label for="outsideLadderPanes">Number of Outside Ladder Panes</label>
<input type="number" name="outsideLadderPanes" id="outsideLadderPanes" [(ngModel)]="outsideLadderPanes">
</div>
<div class="field">
<label for="ladderPanesInAndOut">Number of Indoor AND Outdoor Ladder Panes</label>
<input type="number" name="ladderPanesInAndOut" id="ladderPanesInAndOut" [(ngModel)]="ladderPanesInAndOut">
</div>
</div>
</div> <!--End of row-->
<div class="spacer30"></div>
<div class="three column row">
<div class="four wide column"></div>
<div class="eight wide column">
<div class="required field">
<label for="currentUser">Created By</label>
<select name="currentUser" id="currentUser" class="ui fluid dropdown " [(ngModel)]="currentUser" required>
<option value="">-- Select --</option>
<option value="Jason Walle">Jason Walle</option>
<option value="Aubree Walle">Aubree Walle</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="column">
<h2 class="ui dividing header">Additional Options</h2>
<!-- <div class="spacer30"></div> -->
</div>
</div>
<div class="row">
<div class="eight wide column">
<div class="field">
<label for="referral">Referral By</label>
<input type="text" name="referral" id="referral" [(ngModel)]="referral" >
</div>
</div>
<div class="three wide column">
<div class="field">
<label for="clientDiscount">Discount</label>
<input type="text" name="clientDiscount" id="clientDiscount" [(ngModel)]="clientDiscount" >
</div>
</div>
</div>
<div class="row">
<div class="eight wide column"></div>
<div class="three wide column">
<div class="field">
<label for="discountType">Discount Type</label>
<select name="discountType" id="discountType" class="ui fluid dropdown " [(ngModel)]="discountType" required>
<option value="">-- Select --</option>
<option value="Percentage">Percentage(%)</option>
<option value="Dollars">Dollars($)</option>
</select>
</div>
</div>
</div>
</div>
<div class="spacer50"></div>
<button type="submit" class="ui blue button">Calculate</button>
<button type="button" class="ui olive button" (click)="calculatingForm.reset()">New Client</button>
<div class="spacer75"></div>
</form>
</div>
<div [hidden]="!submitted" class="results-div">
<button (click)="goBack()" class="ui blue button"> <i class="arrow alternate circle left outline icon"></i> Go Back</button>
<!-- ============ PDF Generating Section ============= -->
<div id="content">
<div class="ui grid">
<div class="three column row">
<div class="column"></div>
<div class="column">
<img src="./../../assets/proshine-card.jpg" alt="" class="proshine-logo">
</div>
<div class="column"></div>
</div>
</div>
<div class="spacer50"></div>
<div class="ui grid">
<div class="row">
<div class="twelve wide column">
<br>
<h2 class="">Client Name: <span style="margin-left: 50px;font-size: larger">{{ clientName }}</span></h2>
<div class="spacer30"></div>
</div>
<div class="eight wide column">
<h3>Home Phone #: {{homePhone}} </h3>
<h3>Cell Phone #: {{cellPhone}} </h3>
<h3>Office Phone #: {{officePhone}} </h3>
</div>
</div>
</div>
<hr>
<div class="spacer30"></div>
<div class="ui grid">
<div class="row">
<div class="eight wide column">
<h3># of Floor Panes: <h2>{{floorPanes}}</h2> </h3>
<h3># of OUTSIDE Ladder Panes: <h2>{{outsideLadderPanes}}</h2> </h3>
<h3># of Inside AND Outside Ladder Panes: <h2>{{ladderPanesInAndOut}}</h2> </h3>
</div>
</div>
</div>
<hr>
<!-- <h3>Original Quote: ${{clientDiscount - }} </h3> -->
<h3 *ngIf="clientDiscount!= NaN">Client Discount: <span style="color:firebrick">- ${{discountPrice}} </span> </h3>
<h1>Total Quote: <span class="quotePrice" >${{estimatedQuote}}</span> </h1>
<div class="spacer50"></div>
<h3>Created By {{currentUser}} on {{currentDate | date:'fullDate'}} </h3>
</div>
<div class="spacer50"></div>
<button class="ui orange button" (click)="downloadPDF()">Export As PDF</button>
<div class="spacer75"></div>
</div>
Here is my form.component.ts file
import { NavigationComponent } from './../navigation/navigation.component';
import { Estimate } from './../estimate';
import { NgForm, FormsModule } from "#angular/forms";
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
constructor(
) { }
// =========== Text Mask ==============
mask: any[] = ['+','1',' ', '(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
// =========== Variables ===========
submitted = false;
// isOn = false;
costPerPane = 0.00;
costForLadder = 0.00;
costForFloorPanes = 0.00;
estimatedQuote = 0.00;
// quoteDemo = new Estimate("Phil",12,12,0,0,0);
clientName:string = "";
clientHomePhone:string;
clientCellPhone:string;
clientOfficePhone:string;
currentUser:string;
currentDate:string;
referral:string;
totalPanes:number;
floorPanes:number;
outsideLadderPanes:number;
ladderPanesInAndOut:number;
clientDiscount:number;
discountType:string;
discountPrice:any;
onSubmit(calculatingForm :NgForm){
this.submitted = true;
//Getting Form Input Values
this.clientName = calculatingForm.form.get('name').value;
this.clientHomePhone = calculatingForm.form.get('homePhone').value;
this.clientCellPhone = calculatingForm.form.get('cellPhone').value;
this.clientOfficePhone = calculatingForm.form.get('officePhone').value;
this.totalPanes = calculatingForm.form.get('totalPanes').value;
this.floorPanes = calculatingForm.form.get('floorPanes').value;
this.outsideLadderPanes = calculatingForm.form.get('outsideLadderPanes').value;
this.ladderPanesInAndOut = calculatingForm.form.get('ladderPanesInAndOut').value;
this.clientDiscount = calculatingForm.form.get('clientDiscount').value;
this.discountType = calculatingForm.form.get('discountType').value;
this.currentUser = calculatingForm.form.get('currentUser').value;
this.currentDate = Date.now().toString();
// ============ TOTAL QUOTE ==========
this.estimatedQuote = (this.costForFloorPanes + this.costForLadder);
//------ Discount Amount ----------
if (this.discountType == "Percentage") {
this.clientDiscount /= 100;
this.discountPrice = (this.estimatedQuote * this.clientDiscount);
this.estimatedQuote -= (Math.round(this.discountPrice));
this.discountPrice = (Math.round(this.discountPrice)).toString();
// this.estimatedQuote = (Math.ceil(this.estimatedQuote));
}else if(this.discountType == "Dollars"){
this.discountPrice = this.clientDiscount.toString();
this.estimatedQuote -= this.clientDiscount;
}else{
this.estimatedQuote = this.estimatedQuote;
}
}//End of onSubmit
public goBack(){
this.estimatedQuote = 0.00;
this.submitted = false;
}
public downloadPDF(){
return xepOnline.Formatter.Format('content', {render: 'download'});
}
ngOnInit() {
}
}
The error seems to be in the HTML:
[(ngModel)]="stufffffffs"
You have taken the wrong ngModel binding, the variables you have taken in component are not taken in form
In component you have taken,
clientName:string = "";clientHomePhone:string;clientCellPhone:string;
but in form you took,
Name:string = "";HomePhone:string;CellPhone:string;
You forgot to prepend client
Eg;
<input type="text" name="name" [(ngModel)]="name" #client="ngModel" required autofocus>
Should be,
<input type="text" name="name" [(ngModel)]="clientName" #client="ngModel" required autofocus>
so, replace all the occurrences with the same.
Use the same variables with ngModel that are defined in the component. It basically means there is a property in the component, that it is referring to. But as there is no such variable as "homePhone" in component, hence it is giving an error.
[(ngModel)]="clientHomePhone" instead of [(ngModel)]="homePhone"
<input type="tel" name="homePhone" id="homePhone" [(ngModel)]="clientHomePhone" placeholder="(123) 456-7890" [textMask]="{mask: mask}">
Similarly, for all other inputs for which the error is coming.
Read this for how ngModel works.
I am new to Backbone JS and Question could be duplicate but I am not able to figure out the Problem. I need to handle form submit event in my application to use the default HTML5 validation. but unfortunately it's not working for me. below In securityTokenTmpl and securityQATmpl, i have form with submit button which is not firing submit event but click working fine.
view---------
var securityInfoView = Backbone.View.extend({
tagName : 'div',
className : 'security-info-wrap',
initialize : function() {
var self = this;
$('.application-content-wrap').append(self.$el);
this.$el.append(securityInfoTmpl(self.options.result.bankInfo.siteModel));
if (typeName === "TOKEN_ID" || typeName === "MULTI_LEVEL") {
self.$el.find('.security-info-wrap .content-wrap').html(securityTokenTmpl({
results : data
}));
}
if (typeName === "SECURITY_QUESTION") {
self.$el.find('.security-info-wrap .content-wrap').html(securityQATmpl({
results : data
}));
}
},
events : {
'submit' : 'submit'
},
submit : function(e) {
console.log("form submit");
e.preventDefault();
// there after HTML5 validation i want to make Rest call
}
});
securityQATmpl Template
{{#results}}
<div>
<form id="securityQA" method="POST">
<div class="row">
{{#fieldInfo}}
{{#questionAndAnswerValues}}
<div class="small-12 columns"><label class="addAccountLabel">{{question}}</label>
<input required type='{{responseFieldType}}' name='{{metaData}}'/>
</div>
{{/questionAndAnswerValues}}
{{/fieldInfo}}
</div>
</div>
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next"/>
</div>
</div>
</form>
<div class="clear"></div>
{{/results}}
securityTokenTmpl Template
{{#results}}
<div>
<form id="securityToken" method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
<input required type='{{responseFieldType}}' size='{{maximumLength}}' name="securityToken"/>
</div>
{{/fieldInfo}}
</div>
</div>
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next" /></div>
</form>
{{/results}}
There was an error in Templates i had a div in template which i was opening before form opening tag and closing before form closing tag it should be closed after form closing tag.
{{#results}}
<div>
<form id="securityToken" method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
<input required type='{{responseFieldType}}' size='{{maximumLength}}' name="securityToken"/>
</div>
</div>
{{/fieldInfo}}
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next" /></div>
</div>
</form>
</div>
{{results}}
Please help me i implemented this js but I have problem when I call an event body click the tab content will also hide...
I used this code but problem is when i click on tab button its already hide..
$('body').click(function(e){
$('.resp-tabs-container').hide();
});
My HTML FILE
<div id="verticalTab">
<ul class="resp-tabs-list">
<li class="first flights"><em class="sprite"> </em>Book a Flight</li>
<li class="rooms"><em class="sprite"> </em>Book Hotel Rooms</li>
<li class="tickets"><em class="sprite"> </em>Book Movie Tickets</li>
<li class="vouchers"><em class="sprite"> </em>Book Vouchers</li>
<li class="new"><em class="sprite"> </em>What's New</li>
</ul>
<div class="resp-tabs-container">
<!--Book A Flight-->
<div>
<div class="tabForm">
<form action="">
<fieldset>
<div class="rowG select-opt flatui">
<p>
<input type="radio" name="tripOpt" checked="checked" />
<label>One Way</label>
<input type="radio" name="tripOpt" />
<label>Round Trip</label>
<input type="radio" name="tripOpt" />
<label>Multiple Destinations</label>
</p>
</div>
<div class="rowG clearfix">
<div class="col">
<label>Leaving From</label>
<input type="text" class="field" value="Location">
</div>
<div class="col">
<label>Departure Date</label>
<input type="text" class="field date-field" value="DD/MM/YY">
</div>
<div class="col selectdd">
<label>Time</label>
<select>
<option>Any</option>
</select>
</div>
</div>
<div class="rowG clearfix">
<div class="col">
<label>Going To</label>
<input type="text" class="field" value="Location">
</div>
</div>
<div class="rowG clearfix">
<div class="col selectdd">
<label>Adult (18-64)</label>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col selectdd">
<label>Seniors (65+)</label>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col selectdd">
<label>Children</label>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="rowG clearfix"> <a data-toggle="collapse" data-target="#showAdditionalData" id="showAdditional" class="i-arrowup" href="#">Show Additional Options<span id="toggler" class="icon-chevron-left" ></span></a>
<div class="contents addpaddingT10">
<div id="showAdditionalData" class="collapse">
<div class="col">
<label>Preferred Airline</label>
<select>
<option>No Preference</option>
</select>
<p class="addpaddingT10">
<div class="flatui">
<input type="checkbox"/><label>Nonstop Flights Only</label>
</div>
</p>
</div>
<div class="col">
<label>Class</label>
<select>
<option>First Class</option>
</select>
<p class="addpaddingT10">
<div class="flatui">
<input type="checkbox"/><label>Refundable Flights Only</label>
</div>
</p>
</div>
</div>
</div>
</div>
<div class="rowG last clearfix">
<p class="floatL">
<div class="flatui">
<input type="checkbox"/><label>Redeem PR Points for this booking</label>
</div>
<input type="button" class="btn btn-primary search-icon floatR" value="Search">
</div>
</fieldset>
</form>
</div>
</div>
<!--End Flight book-->
<!--Hotel booking-->
<div>
<div class="tabFormHotel">
<form action="">
<fieldset>
<div class="rowG">
<label>Destination, hotel, landmark or address</label>
<input type="text" class="large" value="A city, airport or attraction">
</div>
<div class="rowG clearfix">
<div class="col">
<label>Check In</label>
<input type="text" class="field date-field" value="DD/MM/YYYY">
</div>
<div class="col">
<label>Check Out</label>
<input type="text" class="field date-field" value="DD/MM/YYYY">
</div>
<div class="col">
<label>Rooms</label>
<select class="selectpicker">
<option>Any</option>
</select>
</div>
</div>
<div class="rowG clearfix selectdd">
<legend>Room 1</legend>
<div class="c1">
<label>Adult <span>(12+ years)</span></label>
<select>
<option>1</option>
</select>
</div>
<div class="c1 selectdd">
<label>Child <span>(2-11 years)</label>
<select>
<option>3</option>
</select>
</div>
<div class="c2 selectdd">
<label>Child 1 Age</label>
<select>
<option>2</option>
</select>
</div>
<div class="c2 selectdd">
<label>Child 2 Age</label>
<select>
<option>6</option>
</select>
</div>
<div class="c2 selectdd">
<label>Child 3 Age</label>
<select>
<option>8</option>
</select>
</div>
</div>
<div class="rowG last clearfix">
<p class="floatL">
<input type="checkbox" />
<label>Redeem PR Points for this booking</label>
<br/>
<input type="button" class="btn btn-primary search-icon floatR" value="Search">
</p>
</div>
</fieldset>
</form>
</div>
</div>
<!--End Hotel-->
<div>
<p>Book Movie Tickets</p>
</div>
<div>
<p>Book Vouchers</p>
</div>
<div>
<p>What's New</p>
</div>
</div>
</div>
Here is the JS which i used
(function ($) {
$.fn.extend({
easyResponsiveTabs: function (options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
type: 'default', //default, vertical, accordion;
width: 'auto',
fit: true
}
//Variables
var options = $.extend(defaults, options);
var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
//Main function
this.each(function () {
var $respTabs = $(this);
$respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
$respTabs.css({
'display': 'block',
'width': jwidth
});
$respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
jtab_options();
//Properties Function
function jtab_options() {
if (jtype == vtabs) {
$respTabs.addClass('resp-vtabs');
}
if (jfit == true) {
$respTabs.css({ width: '100%', margin: '0px' });
}
if (jtype == accord) {
$respTabs.addClass('resp-easy-accordion');
$respTabs.find('.resp-tabs-list').css('display', 'none');
}
}
//Assigning the h2 markup to accordion title
var $tabItemh2;
$respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");
var itemCount = 0;
$respTabs.find('.resp-accordion').each(function () {
$tabItemh2 = $(this);
var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').html();
$respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext);
$tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
itemCount++;
});
//Assigning the 'aria-controls' to Tab items
var count = 0,
$tabContent;
$respTabs.find('.resp-tab-item').each(function () {
$tabItem = $(this);
$tabItem.attr('aria-controls', 'tab_item-' + (count));
$tabItem.attr('role', 'tab');
//First active tab
// $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
//$respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
//$respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
//Assigning the 'aria-labelledby' attr to tab-content
var tabcount = 0;
$respTabs.find('.resp-tab-content').each(function () {
$tabContent = $(this);
$tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
tabcount++;
});
count++;
});
//Tab Click action function
$respTabs.find("[role=tab]").each(function () {
var $currentTab = $(this);
$currentTab.click(function () {
var $tabAria = $currentTab.attr('aria-controls');
if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
$respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); });
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
return false;
}
if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
$respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
} else {
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
$respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
}
});
//Window resize function
$(window).resize(function () {
$respTabs.find('.resp-accordion-closed').removeAttr('style');
});
});
});
}
});
just use the follwing javascript to prevent the clicks
<script type="text/javascript">
$(document).ready(function() {
$("body").click(function(e){
if (!$(e.target).is('.ui-datepicker,.ui-datepicker *,.ui-icon,.ui-autocomplete,.ui-autocomplete *,.resp-tab-active, .resp-tab-active *, #verticalTab, #verticalTab *')) {
//$(".resp-tabs-container").hide();
$(".resp-vtabs li").removeClass('resp-tab-active');
$(".resp-vtabs .resp-tabs-container .resp-tab-content-active").removeClass('resp-tab-content-active').hide();
}});
});
</script>