in an html page that I use to display text snippets, I use jQuery to filter those that contain just text, text including some url links or both :
JS code :
$(document).ready(function() {
$('input[type=radio]').attr('checked', false);
$(".selection").on("change", ":radio", function() {
var checkedVal = parseInt($(this).filter(":checked").val(), 10);
$(".container").hide().filter(function() {
if (checkedVal === 2) {
return $(this).find('a[href]').length && $(this)
} else if (checkedVal === 1) {
return $(this).find('a[href]').length <= 0 && $(this)
} else {
return $(this)
}
}).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selection">
</button> Display : <input type="radio" name="check" value="1" /> Texts only | <input type="radio" name="check" value="2" /> Texts w/ links | <input type="radio" name="check" value="-1" checked="checked" /> Texts + Texts w/ links</div>
I would like the "Texts + Texts w/ links" button to be checked by default and this choice to be kept when the page is refreshed.
I don't know how to do this. Any help would be greatly appreciated, thank you.
Instead of unchecking all the buttons, check the one you want to be the default.
$(document).ready(function() {
$('.selection :radio[value=-1]').attr('checked', true);
$(".selection").on("change", ":radio", function() {
var checkedVal = parseInt($(".selection :radio:checked").val(), 10);
$(".container").hide().filter(function() {
if (checkedVal === 2) {
return $(this).find('a[href]').length && $(this)
} else if (checkedVal === 1) {
return $(this).find('a[href]').length <= 0 && $(this)
} else {
return $(this)
}
}).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selection">
</button> Display : <input type="radio" name="check" value="1" /> Texts only | <input type="radio" name="check" value="2" /> Texts w/ links | <input type="radio" name="check" value="-1" checked="checked" /> Texts + Texts w/ links</div>
I want the input background color to be updated when client insert illegal email input.
the current code doesn't work. what am i missing?
<input id="signup" type="submit" value="SIGN UP">
<div id="email">
<input type="email" id="inputMail" placeholder="Email">
<img src="C:\Users\okazi\Desktop\email.png" id="imageMail">
</div>
<script type="text/javascript">
var errorMassage = "";
function isEmail(inputMail)
{
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(inputMail);
}
$("#signup").click(function ()
{
if (isEmail($(inputMail).val()) == false)
{
$("inputMail").css("background-color", "red");
}
alert(errorMassage);
})
</script>
Here you are:
var errorMassage = "";
function isEmail(inputMail) {
var regex =
/^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(inputMail);
}
$("#signup").click(function() {
if (isEmail($(inputMail).val()) == false) {
$("#inputMail").css("background-color", "red");
}
alert(errorMassage);
});
<input id="signup" type="submit" value="SIGN UP" />
<div id="email">
<input type="email" id="inputMail" placeholder="Email" />
<img src="C:\Users\okazi\Desktop\TheKazim\photos\email.png" id="imageMail" />
</div>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
Also, to change border color instead of background color replace $("#inputMail").css("background-color", "red");
with $("#inputMail").css("border-color", "red"); as below:
var errorMassage = "";
function isEmail(inputMail) {
var regex =
/^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(inputMail);
}
$("#signup").click(function() {
if (isEmail($(inputMail).val()) == false) {
$("#inputMail").css("border-color", "red");
}
alert(errorMassage);
});
<input id="signup" type="submit" value="SIGN UP" />
<div id="email">
<input type="email" id="inputMail" placeholder="Email" />
<img src="C:\Users\okazi\Desktop\TheKazim\photos\email.png" id="imageMail" />
</div>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
I am trying to implement the following behavior.
I have a form and I want to require filling at least one of the check boxes or text field.
I am trying to do this with the following code, but I don't know what am I doing wrong. Thanks in advance.
https://jsfiddle.net/AlexLavriv/mc8fj4f9/
// Code goes here
var app = angular.module('App', []).controller("Ctrl", Ctrl);
function Ctrl($scope) {
$scope.formData = {};
$scope.formData.selectedFruits = {};
$scope.fruits = [{'name':'Apple', 'id':1}, {'name':'Orange', 'id':2}, {'name':'Banana', 'id':3}, {'name':'Mango', 'id':4},];
$scope.someSelected = function (object) {
console.log(object);
for (var i in object)
{
if (object[i]){
return true;
}
}
return false;
}
$scope.submitForm = function() {
console.log($scope.formData.selectedFruits);
}
}
<div ng-controller="Ctrl" >
<form class="Scroller-Container" name="multipleCheckbox" novalidate >
<div ng-app>
<div ng-controller="Ctrl">
<div>
What would you like?
<div ng-repeat="(key, val) in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[val.name]">
{{val.name}}
</div>
<p class="error" ng-show="submitted && multipleCheckbox.$error.required">Select check box or input text</p>
</div>
<pre>{{formData.selectedFruits}}</pre>
<input type="text" ng-required="!someSelected(formData.selectedFruits)" />
<input type="submit" id="submit" value="Submit" ng-click="submitted=true" />
</div>
</div>
</form>
</div>
You can't use ng-required with a function
You can find another solution here: https://jsfiddle.net/mc8fj4f9/2/
var app = angular.module('App', []).controller("Ctrl", Ctrl);
function Ctrl($scope) {
$scope.formData = {};
$scope.formData.selectedFruits = {};
$scope.fruits = [{'name':'Apple', 'id':1}, {'name':'Orange', 'id':2}, {'name':'Banana', 'id':3}, {'name':'Mango', 'id':4},];
$scope.submited=false;
$scope.someSelected = function (object) {
console.log(object);
for (var i in object)
{
if (object[i]){
$scope.checkboxSelected =true;
return true;
}
}
$scope.checkboxSelected =false;
return false;
}
$scope.submitForm = function() {
console.log("submit "+ $scope.formData.selectedFruits);
$scope.submitted=true;
$scope.someSelected($scope.formData.selectedFruits);
}
}
<div ng-controller="Ctrl" >
<form class="Scroller-Container" name="multipleCheckbox" novalidate>
<div ng-app>
<div ng-controller="Ctrl">
<div>
What would you like?
<div ng-repeat="(key, val) in fruits">
<input type="checkbox" ng-model="formData.selectedFruits[val.name]" ng-required = "!inputVal">
{{val.name}}
</div>
<p class="error" ng-show="submitted && !checkboxSelected && !inputVal">Select check box or input text</p>
</div>
<pre>{{formData.selectedFruits}}</pre>
<input type="text" ng-required="!checkboxSelected" ng-model="inputVal"/>
<input type="submit" id="submit" value="Submit" ng-click="submitForm()" />
</div>
</div>
</form>
</div>
I have the following code, but it doesn't work, can anyone help me out
<form id="myform" action="#">
<h3>Registration Form</h3>
<div id="inputs">
<!-- username -->
<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/>
<br />
<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" title="Make it hard to guess." />
<br />
<!-- email -->
<label for="email">Email</label>
<input id="email" title="We won't send you any marketing material." />
<br />
<!-- message -->
<label for="body">Message</label>
<textarea id="body" title="What's on your mind?"></textarea>
<br />
<!-- message -->
<label for="where">Select one</label>
<select id="where" title="Select one of these options">
<option>-- first option --</option>
<option>-- second option --</option>
<option>-- third option --</option>
</select>
<br />
</div>
<!-- email -->
<label>
I accept the terms and conditions
<input type="checkbox" id="check" title="Required to proceed" />
</label>
<p>
<button type="button" title="This button won't do anything">
Proceed
</button>
</p>
</form>
title attribute does the work.
Your code works in chrome, FF and IE 9 and 10
Why not use placeholder instead of title.
Supported overview
In other browsers you can use this javascript:
<script>
var doc = document;
var inputs = doc.getElementsByTagName('input'),
var supportPlaceholder = 'placeholder' in doc.createElement('input');
var placeholder = function(input) {
var text = input.getAttribute('placeholder');
var defaultValue = input.defaultValue;
input.value = text;
input.onfocus = function() {
if (input.value === defaultValue || input.value === text) {
this.value = '';
}
}
input.onblur = function() {
if (input.value === '') {
this.value = text;
}
}
};
if (!supportPlaceholder) {
for (var i = 0, len = inputs.length; i < len; i++) {
var input = inputs[i], text = input.getAttribute('placeholder');
if (input.type === 'text' && text) {
placeholder(input);
}
}
}
</script>
insert title="" attribute, it will work for you.
Try qTip - http://craigsworks.com/projects/qtip/ and see the demo - http://jsfiddle.net/ramsunvtech/zzZBM/
I am working on the Android hybrid application using phonegap and JQuery Mobile. My application involves user registration, sign in and payment. The problem I am facing is that when I try to navigate from one page to another I get message error loading page.
I am creating data-role pages and using changepage method to navigate to different page.
Here are the data-role pages and js file where I am getting this error.
First js File bookingSearchResult.js:
var jsonData=new Array();
$(document).ready(function(e) {
$(".radioCheck").live("change",(function(event, ui){
var value=$(this).val();
value=value.split("_");
var str=value[0]+ "(INR"+value[1]+"/-)";
var tempid=this.id;
tempid=tempid.split("_");
$("#spRoomType_"+tempid[2]).html(str);
}));
$("#bookingform").live("pagebeforeshow",function(e){
loadpagedata();
});
$("#btnFormSubmit").live("click",function(){
$.blockUI({ message: '<div class="loading-text">Please wait...</div>' });
var roomsData=$('#selectmenu2').val();
var aduldetails=$('#selectmenu3').val();
for(var i=1;i<=roomsData;i++){
for(var j=1;j<=aduldetails;j++){
var fname=$('#Fname_'+i+'_'+j+'').val();
var lname=$('#Lname_'+i+'_'+j+'').val();
var email=$('#Email_'+i+'_'+j+'').val();
var mobile=$('#Monumber_'+i+'_'+j+'').val();
if(fname=="")
{
$.unblockUI();
jAlert('Please enter First Name','Alert',function(){
$(".valFname").focus();
});
return false;
}
else if(!fname.match(/^[A-Za-z]+$/))
{
$.unblockUI();
jAlert('First Name can have alphabets only','Alert',function(){
$(".valFname").focus();
});
return false;
}
else if(fname.length>15)
{
$.unblockUI();
jAlert('First Name cannot be greater than 15 alphabets','Alert',function(){
$(".valFname").focus();
});
return false;
}
if(lname=="")
{
$.unblockUI();
jAlert('Please enter Last Name','Alert',function(){
$(".valLname").focus();
});
return false;
}
else if(!lname.match(/^[A-Za-z]+$/))
{
$.unblockUI();
jAlert('Last Name can have alphabets only','Alert',function(){
$(".valLname").focus();
});
return false;
}
else if(lname.length>15)
{
$.unblockUI();
jAlert('Last Name cannot be greater than 15 alphabets','Alert',function(){
$(".valLname").focus();
});
return false;
}
if(email=="")
{
$.unblockUI();
jAlert('Please enter Email Address','Alert',function(){
$(".valEmail").focus();
});
return false;
}
else if(!email.match(/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/))
{
$.unblockUI();
jAlert('Enter valid Email Address','Alert',function(){
$(".valEmail").focus();
});
return false;
}
if(mobile=="")
{
$.unblockUI();
jAlert('Please enter Mobile Number','Alert',function(){
$('.valMobile').focus();
});
return false;
}
else if(!mobile.match(/([0-9]{10})$/))
{
$.unblockUI();
jAlert('Enter valid 10-digit Mobile Number','Alert',function(){
$('.Monumber').focus();
});
return false;
}
}
}
$.unblockUI();
$.mobile.changePage("#bookingConf");
});
});
$('#bookingSearchResult').live('pagebeforeshow',function(event){
$('#hotelListDiv').empty();
$('#hotelList').empty();
$('#detailsDiv').empty();
$('#hDisplay').text("Hotels Available in "+$('#Cityname option:selected').text());
var dayWise='';
var priceBreakup='';
var dataRetrieved=new Array();
var dynHotels="";
dataRetrieved=JSON.parse(localStorage['search']);
$.each(dataRetrieved, function (index, status) {
var cinDate=JSON.parse(localStorage['search'])[index].checkInDate;
var checkinDate=displayDate2(cinDate);
$('#topDate').text(checkinDate[0]);
var nights=$('#nights').val();
var rooms=new Array();
var pax=new Array();
var roomDetails='';
var numAdults=new Array();
numAdults[0]=$('#selectmenu3').val();
if($('#selectmenu2').val()>1){
for(var i=1;i<$('#selectmenu2').val();i++){
numAdults[i]=$("#"+"selectmenu3"+i).val();
}
}
for(var i=0;i<$('#selectmenu2').val();i++)
{
roomDetails="<br>"+roomDetails+"Room "+(i+1)+": "+numAdults[i]+" Adult</br>";
}
$.each(this.availabilityList, function (index, status) {
var dynRates='';
var hotel=this.hotelName;
var hotelId=this.hotelId;
var priceString="";
$.each(this.rate, function (index, status) {
var offerPrice=this.price;
var rateId=this.rateId;
var rateDesc=this.rateIdTypeDesc;
var roomVisited=0;
var daySplit='';
var dayWisePrice='';
$.each(this.roomGrid.room, function (index, status) {
if(roomVisited !=this.roomNumber ){
var roomNo=this.roomNumber;
var roomType=this.roomType;
var numOfPax=this.numOfPax;
$.each(this.daywiseRates, function (index, status) {
var dateVisited=0;
$.each(this.forday, function (index, status) {
if(dateVisited !=this.date ){
var day=this.date;
var dayWiseTotal=this.price;
dayWisePrice=dayWisePrice+roomNo+"%"+numOfPax+"_"+day+":"+dayWiseTotal+"#";
dateVisited=this.date;
}
});
});
}
roomVisited=this.roomNumber;
});
var buttonId="btnBooknow_"+hotelId+"_"+rateId;
var priceBreakupId="priceBreakupText$"+hotelId+"$"+rateId+"$"+dayWisePrice;
dynRates=dynRates+'<li class="pricebreakup"><div class="pricebreakup-strip">'+rateDesc+' ₹ '+offerPrice+'/-<br><span>(Lux. Tax Excl.)</span></div> <span class="priceBreak" id='+priceBreakupId+'>Price Breakup</span> <div class="submit-btn-wrap"><input name="Booknow" type="button" class="button-bg" id='+buttonId+' value="BOOK NOW"/></div></li>';
});//end of rate
dynHotels=dynHotels+'<div class="booking_search_result_hotel_item_wrap"><a id="info_popup" href="#info_popup" data-rel="dialog" class="info_btn"><img src="images/i_ico.png" width="18" height="18" alt="Info"></a><div data-role="collapsible" id="hotelList" data-collapsed="true"><h3 id="hName">'+hotel+'</h3><ul class="form-list-item booking_search_result"><li class="booking_terms">Service tax # 7.42% will be charged (As per new notification).</li><li class="check-in-details"><a id="policy_popup" href="#policy_popup" data-rel="dialog" class="info_btn"><img src="images/p_ico.png" width="27" height="26" alt="i_ico" class="i_ico"></a> Check in: '+checkinDate[1]+', '+nights+' Nights</span><br>'+roomDetails+'</li>'+dynRates+'</ul></div></div> ';
});//end of availabilityList
});
$(dynHotels).appendTo('#hotelListDiv');
$('div[data-role=collapsible]').collapsible({refresh:true});
$('input[type=button]').button({refresh:true});
$('input[name="Booknow"]').click(function(){
var btnId=this.id.split('_');
hotelIdSelected=btnId[1];
rateIdSelected=btnId[2];
$.mobile.changePage('#bookingform');
});
$('.priceBreak').click(function(){
var id=this.id;
if(typeof(Storage)!=="undefined")
{
localStorage.priceBreakId=id;
}
$.mobile.changePage('#priceBreakup');
});
});
Second js File : bookingGuestDetails.js
$(document).ready(function(){
$("#bookingConf").live("pagebeforeshow",function(e){
loadBookingConfData();
});
$(".edit-btn1").live("click",function(){
var imgId=this.id;
imgId=imgId.split('_');
var str=imgId[1];
$("#ulBookingConf li").empty();
loadBookingConfDataForEdit();
});
$("#btnSubmitConf").live("click",function(){
$.blockUI({ message: '<div class="loading-text">Please wait...</div>' });
var conFname=$(".clsConName").val();
var conEmail=$(".clsConEmail").val();
var conMobile=$(".clsConMobile").val();
if(conFname=="")
{
$.unblockUI();
jAlert('Please enter First Name','Alert',function(){
$(".clsConName").focus();
});
return false;
}
else if(!conFname.match(/^[a-zA-Z ]*$/))
{
$.unblockUI();
jAlert('First Name can have alphabets only','Alert',function(){
$(".clsConName").focus();
});
return false;
}
else if(conFname.length>15)
{
$.unblockUI();
jAlert('First Name cannot be greater than 15 alphabets','Alert',function(){
$(".clsConName").focus();
});
return false;
}
if(conEmail=="")
{
$.unblockUI();
jAlert('Please enter Email Address','Alert',function(){
$(".clsConEmail").focus();
});
return false;
}
else if(!conEmail.match(/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/))
{
$.unblockUI();
jAlert('Enter valid Email Address','Alert',function(){
$(".clsConEmail").focus();
});
return false;
}
if(conMobile=="")
{
$.unblockUI();
jAlert('Please enter Mobile Number','Alert',function(){
$('.clsConMobile').focus();
});
return false;
}
else if(!conMobile.match(/([0-9]{10})$/))
{
$.unblockUI();
jAlert('Enter valid 10-digit Mobile Number','Alert',function(){
$('.clsConMobile').focus();
});
return false;
}
$.unblockUI();
createProvisional();
});
});
function loadBookingConfData(){
var noOfRoom=$('#selectmenu2').val();
var nights=$('#nights').val();
var noOfAdults=0;
var cinDate=JSON.parse(localStorage['search'])[0].checkInDate;
var displayDate=displayDate2(cinDate)[1];
var roomDetails='<li class="booking_full_guest_head"><ul id="booking_full_guest_head_ul"><li>Hotel <span id="hotelConf">'+localStorage.hotelNameGuestDetails+'</span></li><li>Check-in <span id="CheckinConf">'+displayDate+'</span></li><li>Nights <span id="NightsConf">'+nights+'</span></li></ul></li>';
for(var i=1;i<=noOfRoom;i++)
{
roomDetails+='<li><div class="booking_full_guest_head_edit">Room-'+i+'<br>'+$("#spRoomType_"+i).html()+'<img class="edit-btn1" id="imgEdit_'+i+'" src="images/edit-ico.jpg" width="19" height="18" alt="Edit"></div></li> ';
if(i!=1){
noOfAdults=$('#selectmenu3'+(i-1)).val();
}
else
{
noOfAdults=$('#selectmenu3').val();
}
for(var j=1;j<=noOfAdults;j++){
if(document.getElementById('Gender_'+i+'_'+j+'_0').checked)
{
roomDetails+='<li class="bookinsg_full_guest_adult_seprator"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain"> <label for="textinput">Name </label> <input class="enFields_'+ i +'" disabled="disabled" name="textinput" type="text" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input class="enFields_'+ i +'" disabled="disabled" name="Gender1_'+i+'_'+j+'" type="radio" id="Gender1_'+i+'_'+j+'_0" value="" checked /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input class="enFields_'+ i +'" disabled="disabled" type="radio" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" /> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input class="enFields_'+ i +'" name="textinput" disabled="disabled" type="email" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" /></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input class="enFields_'+ i +'" name="textinput" type="number" id="Monumber1_'+i+'_'+j+'" disabled="disabled" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>';
}
else if(document.getElementById('Gender_'+i+'_'+j+'_1').checked)
{
roomDetails+='<li class="bookinsg_full_guest_adult_seprator"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain"> <label for="textinput">Name </label> <input class="enFields_'+ i +'" disabled="disabled" name="textinput" type="text" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input class="enFields_'+ i +'" disabled="disabled" name="Gender1_'+i+'_'+j+'" type="radio" id="Gender1_'+i+'_'+j+'_0" value="" /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input class="enFields_'+ i +'" disabled="disabled" type="radio" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" checked/> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input class="enFields_'+ i +'" name="textinput" type="email" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" disabled="disabled"/></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input class="enFields_'+ i +'" name="textinput" type="number" id="Monumber1_'+i+'_'+j+'" disabled="disabled" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>';
}
}
}
var netCost="";
netCost=calcTotalResevationCost();
roomDetails+='<li class="booking_full_guest_adult_seprator booking_full_guest_adult_total">Total Cost INR '+ netCost +' /-</li><li class="submit-btn-wrap"><input name="Submit" type="submit" class="button-bg" id="btnCreateProv" value="Save"/><br><input name="Reset" type="reset" value="Cancel" class="button-bg"/></li>';
$("#ulBookingConf").empty();
$(roomDetails).appendTo("#ulBookingConf").trigger("create");
}
function loadBookingConfDataForEdit(){
var cinDate=JSON.parse(localStorage['search'])[0].checkInDate;
var displayDate=displayDate2(cinDate)[1];
var nights=$('#nights').val();
var noOfRoom=$('#selectmenu2').val();
var noOfAdults=0;
var roomDetails='<li class="booking_full_guest_head"><ul id="booking_full_guest_head_ul"><li>Hotel <span id="hotelConf">'+localStorage.hotelNameGuestDetails+'</span></li><li>Check-in <span id="CheckinConf">'+displayDate+'</span></li><li>Nights <span id="NightsConf">'+nights+'</span></li></ul></li>';
for(var i=1;i<=noOfRoom;i++)
{
roomDetails+='<li id="liConfPage"><div class="booking_full_guest_head_edit">Room-'+i+'<br>'+$("#spRoomType_"+i).html()+'<img class="edit-btn1" id="imgEdit_'+i+'" src="images/edit-ico.jpg" width="19" height="18" alt="Edit"></div></li> ';
if(i!=1){
noOfAdults=$('#selectmenu3'+(i-1)).val();
}
else
{
noOfAdults=$('#selectmenu3').val();
}
for(var j=1;j<=noOfAdults;j++){
if(document.getElementById('Gender_'+i+'_'+j+'_0').checked)
{
roomDetails+='<li id="liConfPageGender" class="bookinsg_full_guest_adult_seprator"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain" id="guestDetails"> <label for="textinput">Name </label> <input class="clsConName" name="textinput" type="text" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input type="radio" class="clsConRadio" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_0" value="" checked /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input type="radio" class="enFields_'+ i +'" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" /> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input class="clsConEmail" name="textinput" type="text" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" /></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input type="text" class="clsConMobile" name="textinput" id="Monumber1_'+i+'_'+j+'" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>';
}
else if(document.getElementById('Gender_'+i+'_'+j+'_1').checked)
{
roomDetails+='<li class="bookinsg_full_guest_adult_seprator" id="liConfpagefulldetails"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain"> <label for="textinput">Name </label> <input type="text" class="clsConName" name="textinput" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input type="radio" class="enFields_'+ i +'" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_0" value="" /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input type="radio" class="enFields_'+ i +'" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" checked/> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input type="text" class="clsConEmail" name="textinput" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" /></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input type="text" class="clsConMobile" name="textinput" id="Monumber1_'+i+'_'+j+'" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>';
}
}
}
var netCost="";
netCost=calcTotalResevationCost();
roomDetails+='<li class="booking_full_guest_adult_seprator booking_full_guest_adult_total">Total Cost INR '+ netCost +' /- </li><li class="submit-btn-wrap"><input name="Submit" type="submit" class="button-bg" id="btnSubmitConf" value="Save"/><br><input name="Reset" type="reset" value="Cancel" class="button-bg"/></li>';
$("#ulBookingConf").empty();
$(roomDetails).appendTo("#ulBookingConf").trigger("create");
}
Follows is our data-role pages for booking, one is bookingform and other is bookingConfirmationPage
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Ginger</title>
<link href="css/dark-theme.min.css" rel="stylesheet" type="text/css"/>
<!--<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/> -->
<link href="css/mystyle.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile.structure-1.2.0.css" rel="stylesheet" type="text/css" />
<link href="css/jalerts.css" rel="stylesheet" type="text/css"/>
<!-- Includes Mobiscroll -->
<link href="css/mobiscroll-2.3.1.custom.min.css" rel="stylesheet" type="text/css" />
</head>
<body class="booking-bg" id="gingerAppBody">
<div data-role="page" id="booking" data-theme="a" class="form-content-wrap home-bg">
<div data-role="header" data-id="ginger_header" data-position="fixed">
<h1>BOOKING</h1>
<!------------- booking form page --------------------->
<div data-role="page" id="bookingform" data-theme="a" class="form-content-wrap">
<div data-role="header" data-id="ginger_header" data-position="fixed">
<h1>BOOKING</h1>
Back
Call
Menu
</div>
<form method="get">
<div data-role="content" class="form-content-wrap" >
<div data-role="collapsible-set" class="booking_form_wrap" id="roomListDiv"></div>
<ul class="form-list-item">
<li class="booked-by-head">
Booked By...
</li>
<li>
<div data-role="fieldcontain">
<select name="flipswitch3" id="flipswitch3" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="flipswitch3">Booker is same as guest 1</label>
</div>
</li>
<li>
<div data-role="fieldcontain">
<input type="text" name="Fname" id="BookerFname" value="" placeholder="First Name" />
</div>
<span class="mandatory-sign">*</span>
</li>
<li>
<div data-role="fieldcontain">
<input type="text" name="Lname" id="BookerLname" value="" placeholder="Last Name" />
</div>
<span class="mandatory-sign">*</span>
</li>
<li class="radio-input-li">
<div data-role="fieldcontain" class="radio-input-wrap">
<fieldset data-role="controlgroup" data-type="horizontal">
<label class="gender-label">Gender
<span class="mandatory-gender-sign">*</span></label>
<input name="BookerGender" type="radio" id="BookerGender_0" value=""/>
<label for="BookerGender_0">Male</label>
<input type="radio" name="BookerGender" id="BookerGender_1" value="" />
<label for="BookerGender_1">Female</label>
</fieldset>
</div>
</li>
<li>
<div data-role="fieldcontain">
<input type="email" name="Email" id="BookerEmail" value="" placeholder="Email" />
</div>
<span class="mandatory-sign">*</span>
</li>
<li>
<div data-role="fieldcontain">
<input type="tel" name="Monumber" id="BookerMonumber" value="" placeholder="Mobile Number" />
</div>
<span class="mandatory-sign">*</span>
</li>
<li>
<div data-role="fieldcontain">
<select name="flipswitch2" id="flipswitch2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="flipswitch2">Subscribe to the 'Ginger' newsletter</label>
</div>
</li>
<li class="submit-btn-wrap">
<input name="Submit" type="submit" value="Submit" id="btnFormSubmit" class="button-bg"/>
<br>
<input name="Reset" type="reset" value="Reset" class="button-bg"/>
</li>
</ul>
</div>
</form>
</div>
<!------------- booking confirmation page --------------------->
<div data-role="page" id="bookingConf" data-theme="a" class="form-content-wrap">
<div data-role="header" data-id="ginger_header">
<h1>BOOKING</h1>
Back
Call
Menu
</div>
<form method="get">
<div data-role="content" class="form-content-wrap" >
<ul id="ulBookingConf" class="form-list-item booking_payment">
</ul>
</div>
</form>
</div>
</div>
<script src="js/head.min.js"></script>
<script>
head.js("js/jquery-1.8.2.min.js", "cordova-2.1.0.js", "js/jquery-ui.min.js", "js/jquery.blockUI-min.js","js/jquery.alerts.min.js","jquery.mobile/jquery.mobile-1.2.0.min.js","js/mobiscroll-2.3.1.custom.js","js/registration.js","js/booking.js","js/bookingSearch.js","js/bookingSearchResult.js","js/bookingGuestDetails.js","js/paymentSuccess.js","js/priceBreakup.js","js/common.js",function(){
//head.js("js/jquery-1.8.2.min.js", "cordova-2.1.0.js", "js/jquery-ui.min.js", "js/jquery.blockUI-min.js","js/jquery.alerts.min.js","jquery.mobile/jquery.mobile-1.2.0.min.js","js/mobiscroll-2.3.1.custom.js","js/default.js","js/registration1.js","js/booking1.js","js/paymentSuccess.js",function(){
localStorage.clear();
$.mobile.selectmenu.prototype.options.nativeMenu = false;
$.mobile.phonegapNavigationEnabled = true ;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#booking')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory();
}
}, false);
}
});
</script>
</body>
</html>
With jquery mobile this
$(document).ready(function(){
is not needed (actually is wrong to use it like this. See here.)
When you navigate to a page, a series of events is being fired.
pagebeforecreate, pagecreate, pagebeforeshow, pageshow etc are some of
them. You bind to those events not document ready. Since you use
phonegap you should see the deviceready event and mobileinit.