Code:
<!DOCTYPE html>
<html>
<head>
<title>Jquery mobile ex 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
//Ready the function on page load
$(document).ready(function () {
console.log("Check-Ready");
//setup event handler
$("#butSubmit").on("click", function () {
tipCalculator();
});
});
function tipCalculator() {
console.log("Inside calculateResult function");
var dataIsValid = false;
//Check for invalid data
dataIsValid = inputIsValid();
//If data is invalid, stop, don't go any further.
if (dataIsValid === false) {
return;
}
console.log("Inside 'tipCalculator()' Function");
var billAmount, numberOfPeople;
var tip, extraForGoodService;
var extraChecked;
var total;
var individual;
var totalTip;
//Get values for local variables
//billAmount = document.getElementById("txtBillAmount").value;
billAmount = $("#txtBillAmount").val();
numberOfPeople = $("#txtNumberOfPeople").val();
tip = .15;
extraForGoodService = parseFloat(extraForGoodService);
extraChecked = $("#chkExtraTip:checked").val();
if (chkExtraTip.checked === true) {
extraForGoodService = .05;
}
else {
extraForGoodService = 0;
}
billAmount = parseFloat(billAmount);
numberOfPeople = parseFloat(numberOfPeople);
tip = parseFloat(tip);
totalTip = calculateTotalTip(billAmount, extraForGoodService);
total = totalTip + billAmount;
individual = total / numberOfPeople;
//Debug the variables
console.log("billAmount = " + billAmount);
console.log("numberOfPeople = " + numberOfPeople);
console.log("total = " + total);
console.log("individual = " + individual);
//Display result
//document.getElementById("spnTotal").innerHTML = total;
$("#spnTotal").html(total);
//document.getElementById("spnIndividual").innerHTML = individual;
$("#spnIndividual").html(individual);
}
//--------------------------------------
//Function: calculateTotalTip(parBillAmount, parExtraForGoodService)
//
//--------------------------------------
function calculateTotalTip(parBillAmount, parExtraForGoodService) {
var totalTip;
var tip;
tip = parseFloat(tip);
tip = .15;
totalTip = parseFloat(totalTip);
totalTip = parBillAmount * (parExtraForGoodService + tip)
return totalTip;
}
//--------------------------------------
//Function: inputIsValid()
//description - check for proper input into the form
//of the tip calculator
//---------------------------------------
function inputIsValid() {
console.log("Inside inputIsValid function");
if ($("#txtBillAmount").val() === "") {
//Check for missing bill amount
alert("Please include your Bill Amount.");
//document.getElementById("txtBillAmount").focus();
$("#txtBillAmount").focus();
return false;
}
if (isNaN($("#txtBillAmount").val())) {
alert("The Bill Amount must be a number.");
$("#txtBillAmount").focus();
return false;
}
else if ($("#txtNumberOfPeople").val() === "") {
//Check for missing number of People
alert("Please include Number of People.");
$("#txtNumberOfPeople").focus();
return false;
}
else if (isNaN($("#txtNumberOfPeople").val())) {
//Check for non-numeric number of People
alert("The Number of People must be a number.");
$("#txtNumberOfPeople").focus();
return false;
}
else {
return true;
}
//If it made it here, everything looks ok
}
</script>
<style type="text/css">
#divResultContainer
{
text-align:center;
width: 100%;
}
.imageThumbNail {
float:left;
margin: 2px 7px 0px 2px;
width: 120px;
height:120px;
}
#divListContent ul {
list-style: npageOne;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#divListContent ul li {
background-color: #FFFFFF;
display: block;
margin-bottom: 1px;
padding: 1px 0px 2px 3px;
}
</style>
</head>
<body>
<!-- ============================== -->
<!-- Start Page (#pageOne) -->
<!-- ============================== -->
<div data-role="page" id="pageOne" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Part 2</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<center><table >
<tr>
<td>
Bill Amount </td>
<td>
<input id="txtBillAmount" type="text" /></td>
</tr>
<tr>
<td>
Number Of People</td>
<td>
<input id="txtNumberOfPeople" type="text" /></td>
</tr>
<tr>
<td>
</td>
<td>
<input id="chkExtraTip" type="checkbox" value="true"/>Extra 5% for good service</td>
</tr>
<tr>
<td>
</td>
<td>
<a href="#pageTwo" id="butSubmit" data-rel="dialog" data-role="button" data-transition="pop"
data-inline="true">Submit</a> </td>
</tr>
</table></center>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Footer</h4>
</div><!-- /footer -->
</div><!-- /page pageOne -->
<!-- ============================================== -->
<!-- Image Display Page (#pageImageDisplay) -->
<!-- ============================================== -->
<div data-role="page" id="pageTwo" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Calculated Results!</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<div id="divResultContainer">
<center><table><tr>
<td>
</td>
<td>
Total: <span id="spnTotal"></span><br />
Individual Share: <span id="spnIndividual"></span><br />
</td>
</tr>
</table></center>
</div>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4></h4>
</div><!-- /footer -->
</div>
</body>
</html>
This is an assignment I am currently working on. Everything looks great to me, and my professor has even said that it looks good as well. The only problem I am having is that the input validation is not working as well as I had hoped. In theory, if there is a problem with the input that is going into the textboxes, the page should not jump to the next page, and instead 'pageOne' needs to stay put, along with the focus changing to whatever textbox has the issue.
Instead, Whenever I click "submit" to test my input validation, it does not stop the program, and instead continues to move onto the next page.
Help please? This has been pestering me for a few days. :/
Before you post, read our: 
