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>
Related
Here I have written a code for validating form input fields in Vue. And it is working fine when input fields are empty the form is not navigating to the next step. My issue is that while the field is empty, and the user tries to navigate to the next step, the input field border color should change in red. If one field is empty and the user is trying to navigate another step, the navigation should prevent, and the empty fields' border should be displayed in red.
<div id="vk_app">
<form>
<div v-if="step === 1">
<h1>Step One</h1>
<p>
<legend for="name">Your Name:</legend>
<input id="name" name="name" v-model="name">
<input id="name" name="name" v-model="age">
</p>
<button #click.prevent="next()">Next</button>
</div>
<div v-if="step === 2">
<template>
<input id="name" name="name" v-model="address">
<input id="name" name="name" v-model="h_no">
<input id="name" name="name" v-model="mobile">
<button #click.prevent="prev()">Previous</button>
<button #click.prevent="next()">Next</button>
</template>
</div>
<div v-if="step === 3">
<template>
<input id="name" name="name" v-model="subject">
<input id="name" name="name" v-model="occupation">
<button #click.prevent="prev()">Previous</button>
<button #click.prevent="next()">Next</button>
</template>
<button #click.prevent="prev()">Previous</button>
<button #click.prevent="submit()">Save</button>
</div>
</form>
</div>
vue.js
const app = new Vue({
el:'#vk_app',
data() {
return {
step:1,
name:null,
age:null,
city:null,
state:null,
}
},
methods:{
prev() {
if(this.checkForm()) {
this.step--;
}
},
next() {
if(this.checkForm()) {
this.step++;
}
},
checkForm: function (e) {
if (this.name && this.age) {
return true;
}
this.errors = [];
if (!this.name) {
this.errors.push('Name required.');
}
if (!this.age) {
this.errors.push('Age required.');
}
e.preventDefault();
}
}
});
Here is my answer for your code example, it will work when you click on next button.
Updated HTML and Inputs:
<div id="vk_app">
<form>
<div v-if="step === 1">
<h1>Step One</h1>
<legend for="name">Your Name:</legend>
<input id="name" :class="errorField.name ? 'error-input' : ''" name="name" v-model="name" />
<input id="name" :class="errorField.age ? 'error-input' : ''" name="name" v-model="age" />
<button #click.prevent="next()">Next</button>
</div>
<div v-if="step === 2">
<template>
<input id="name" name="name" :class="errorField.address ? 'error-input' : ''" v-model="address" />
<input id="name" name="name" :class="errorField.h_no ? 'error-input' : ''" v-model="h_no" />
<input id="name" name="name" :class="errorField.mobile ? 'error-input' : ''" v-model="mobile" />
<button #click.prevent="prev()">Previous</button>
<button #click.prevent="next()">Next</button>
</template>
</div>
<div v-if="step === 3">
<template>
<input id="name" name="name" v-model="subject">
<input id="name" name="name" v-model="occupation">
<button #click.prevent="prev()">Previous</button>
<button #click.prevent="next()">Next</button>
</template>
<button #click.prevent="prev()">Previous</button>
<button #click.prevent="submit()">Save</button>
</div>
</form>
</div>
Vue Functions and Data Update:
data() {
return {
errorField: { name: false, age: false, city: false, state: false },
step:1,
name:null,
age:null,
city:null,
state:null,
}
},
methods:{
prev() {
if(this.checkForm()) {
this.step--;
}
},
next() {
if(this.checkForm()) {
this.step++;
}
},
checkForm: function (e) {
if (this.name && this.age) {
return true;
}
this.errors = [];
if (!this.name) {
this.errorField.name = true
this.errors.push('Name required.');
}
if (!this.age) {
this.errorField.age = true
this.errors.push('Age required.');
}
}
}
Since this feature(red border on invalid input) is required more often, we can use dynamic classes :
in style section define a class
.input--error{
border-color:red;
}
and in template section add
:class="{'input--error':!name}"
to input tag making it look like :
<input id="name" name="name" v-model="name" :class="{'input--error':!name}"/>
The whole code would look something like this:
<template>
<div>
<!-- Using dynamic classes -->
<input id="name" name="name" v-model="name" :class="{'input--error':!name}"/>
<input id="name" name="name" v-model="age" :class="{'input--error':!age}"/>
</div>
</template>
<script>
export default {
data(){
return{
name:null,
age:null
}
}
}
</script>
<style scoped>
.input--error{
border-color:red;
}
</style>
We could also add this directly in style attribute in input tag:
<input id="name" name="name" v-model="mobile" :style="!mobile ? 'border-color:red':''">
This would overcrowd the code unnecessarily.
We have a blur event.
When blur event fired, if the input box was empty (or whatever you want), add a class such as "red" to the input box.
<input id="name" name="name" v-model="name" #blur="validation($event.target)">
const validation = el => {
if (!el.value) {
// this is a very simple examples. I don't recommend using jQuery.
$(el).addClass('red');
}
};
Add.
You can use the method on Next() method.
<input id="name" name="name" v-model="name" ref="name">
const next = () => {
const inputName = this.$refs.name; // this if for just Vue2.
if (!inputName.value) {
$(inputName).addClass('red');
}
};
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 resorted to using Bootstrap popover because HTML validation exhibits the same behavior I am now experiencing. Perhaps the solution for one will work for both.
JS
var validate = validate || {};
validate.issueError = function ($elem, msg, placement) {
placement = placement == undefined ? 'bottom' : placement;
$elem.attr('data-toggle', 'popover');
$elem.attr("data-offset", "0 25%");
var exclamationPoint = "<span style='font-weight: bold; font-size:medium; color: white; background-color: orange; height: 12px; padding: 1px 6px; margin-right: 8px;'>!</span>";
var content = "<span style='font-size: smaller;'>" + msg + "</span>";
$elem.popover("destroy").popover({
html: true,
placement: placement,
content: exclamationPoint + content
})
$elem.focus();
$elem.popover('show');
setTimeout(function () { $elem.popover('hide') }, 5000);
$elem.on("keydown click", function () {
$(this).popover('hide');
$(this).off("keydown click")
})
}
validate.edits = {
required: function ($form) {
var $reqFlds = $form.contents().find('[required], [data-required]');
$reqFlds.each(function () {
var $this = $(this);
var result = ($this.filter("input, select, textarea").length) ? $this.val() : $this.text();
if (!$.trim(result)) {
validate.issueError($this, "Please fill out this field.");
return false;
}
});
return true;
}
HTML (note I have substituted "required' with "data-required" to force the Bootstrap routines).
<!DOCTYPE html>
<html>
<head>
<title>Writer's Tryst - Writers Form</title>
<link type="text/css" href="css/writers.css" rel="stylesheet" />
<style>
body {padding: 0 20px;}
.limited-offer {
background-color: white;
padding: 3px;
margin-bottom: 12px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container-fluid">
<img id="img-writers" src="#" alt="images" />
<form id="form-writers" method="post" class="form-horizontal well">
<h1>Writers</h1>
<div class="form-group">
<label for="title" class="col-lg-3 control-label">Title</label>
<div class="col-lg-9">
<input type="text" class="form-control" data-required id="title" name="title" autofocus="true" placeholder="Title" />
</div>
</div>
<div class="form-group">
<label for="form-type" class="col-lg-3 control-label">Type of work</label>
<div class="col-lg-9">
<select class="form-control" data-required id="form-type" name="form-type"></select>
</div>
</div>
<div class="form-group">
<label for="genre" class="control-label col-lg-3">Genre</label>
<div class="col-lg-9">
<select id="genre" name="genre" class="form-control" data-required></select>
</div>
</div>
<div class="form-group">
<label for="nbr-pages" class="control-label col-lg-3">Number Pages</label>
<div class="col-lg-9">
<input type="number" id="nbr-pages" name="nbr-pages" class="form-control" data-required placeholder="Pages" />
</div>
</div>
<div id="tips">The objective of a synopsis or query letter is to entice enablers into requesting your manuscript.
It must be concise and to the point and of course very well written. One page is preferred and no more than 3 pages will be accepted.
Sample Query Letter
</div>
<p id="file-warning" class="thumbnail">Your synopsis/query letter must be a PDF file.
<a target="_blank" href="https://www.freepdfconvert.com/" target="_blank">Free file conversion to PDF.</a>
</p>
<div>
<a id="file-upload" class="btn btn-custom-primary btn-file btn-block text-xs-center" role="button">Choose PDF to Upload
<br/><div id="filename" class="btn-block" style="color: #fff">No file chosen</div>
</a>
<input type="file" id="file2upload" style="display: none">
</div><br/>
<div class="form-group">
<!-- <button type="submit" id="writers-submit" class="btn btn-custom-success btn-block m-t-8">Submit</button>-->
</div>
<div class="limited-offer">For a limited time, writer submissions will cost <span style="color: #f00; font-weight:bold">$15.00</span> to offset screening and editing costs and to promote quality synopsises and query letters. We reserve the right to change this policy without notice.</div>
<!-- <form id="form-paypal" name="form-paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" onsubmit="return ajaxSubmit()">-->
<form id="form-paypal" name="form-paypal" method="post" target="_top">
<input type="submit" class="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="U2LE82Z45PJ54">
<input style="display: block; margin: 0 auto;" id="but-pp" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="PayPal" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<input id="userid" name="userid" type="hidden" />
<input id="filesize-limit" name="filesize-limit" type="hidden" value="150000" />
</form>
</div>
<script>
angular.element(document).ready(function () {
showImages($("#form-writers"), $("#img-writers"), "authors", ["blake.jpg", "Melville.jpg", "lewis-carroll.jpg", "stephen-king.jpg", "twain.jpg", "camus.jpg", "nietzsche.jpg", "hesse.jpg"]);
});
$(function () {
populateWritersDropdowns();
$(document).on('change', ':file', function () {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$('#file-upload').on('click', function (e) {
e.preventDefault();
$('#file2upload')[0].click();
});
$("#file2upload").on("change", function () {
var filepath = $('#file2upload')[0].value;
var filename = filepath.substr(filepath.lastIndexOf("\\") + 1);
$("#filename").text(filename)
});
$("#but-pp").on("mousedown", function (e) {
//if (!$("#form-writers").get(0).checkValidity()) return false;
var $ret = validate.edits.required($("#form-writers"));
alert($ret.length);
if ($ret != true) {
$ret.focus();
return false;
}
if (!validate.edits.requireFile($("#filename"))) return false;
if (!fileEdits()) return false;
ajaxSubmit();
function fileEdits() {
var fileSizeLimit = $("#filesize-limit").val();
var file = document.getElementById('file2upload').files[0];
var fileName = file.name;
var fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
var fileSize = file.size;
if (fileSize > fileSizeLimit) {
showMessage(0, "Your file-size (" + (Math.round(parseInt(fileSize) / 1000)).toLocaleString() + "kb) exceeds the limit of " + (fileSizeLimit.toLocaleString() / 1000) + "kb");
return false;
} else {
if (fileExt.toLowerCase() != "pdf") {
showMessage(0, "Your synopsis / query letter MUST be a PDF file.");
return false;
};
return true;
}
};
function ajaxSubmit() {
var file_data = $('#file2upload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('action', "upload");
form_data.append('title', $("#title").val());
form_data.append('form-type', $("#form-type").val());
form_data.append('genre', $("#genre").val());
form_data.append('nbr-pages', $("#nbr-pages").val());
form_data.append('account-id', localStorage.getItem("account-id"));
ajax('post', 'php/writers.php', form_data, success, 'Error uploading file:', 'text', false, false, false);
function success(result) {
if (result.indexOf("PDF") == -1) {
showMessage(1, "Your submission will go live and you will be notified after our reviews are complete.");
var data = {};
data['writer-id'] = result;
ajax('post', 'php/paypal-ipn.php', data, listenerStarted);
function listenerStarted(result) {
alert("pp=" + result);
}
} else {
showMessage(0, result);
}
setTimeout(function () {
document.getElementById('form-writers').reset();
$("#filename").text("No file chosen");
}, 5000);
};
};
});
});
</script>
</body>
</html>
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.