Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    stop the transition!!!

    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>
                    &nbsp;</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>
                    &nbsp;</td>
                <td>
                    Total:&nbsp;&nbsp;&nbsp;<span id="spnTotal"></span><br />
                    Individual Share:&nbsp;&nbsp;&nbsp;<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. :/

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <a href="#pageTwo" id="butSubmit"
    You are using an 'a' tag for your submission, so unless you 'return false;' from your click event it will always follow the link.

    Of course, to do this properly you should place your inputs within a form and use a submit button. But perhaps you're not studying forms yet.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •