Question

I have 2 pages with different id in the container page. first page have one button if you click on that then it will call one java script function. I want to implement the following one. In java script function, condition is true then only it will redirect to the next page using id. Otherwise don’t redirect.How to do this please can anybody help me. is it clear?

CODE

< !DOCTYPE html> 

< html> 

< head> 

    < meta charset="utf-8"> 
    < meta name="viewport" content="width=device-width, initial-scale=1"> 
    < title>Single page template</title>

      < link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
     < script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
     < script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

< /head> 

< body>

< !-- BMR Screen page -->

  < div data-role="page" id="BMR_screen">

  < div data-role="header" data-theme="e" id="hdrBMRScreen">

  < h1> BMR Screen< /h1>
  < /div>

  < div data-role="content" id="contentBMRScreen"> 

        < div data-role="fieldcontain">  

             < label for="BMR_age">Age(in years):</label> 

             < input type="text" id="BMR_age" /> 

        < /div> 

        < a href="#BMR_Result" onclick="BMR_Cal()"  data-role="button">submit</a> 

  < /div>

 < /div>

 < !-- End BMR Screen -->

   < div data-role="page" id="BMR_Result">

       < div data-role="header" data-theme="b" >

            < a data-role="button" data-rel="back" data-icon="back">back</a>

            <h1>BMR Result</h1> 

       < /div>

        < div data-role="content">      

          < p id="W_Range">Weight Range:</p>   

        < /div>
    < /div>

  < script type="text/javascript"> 

  var agevar;


  $(document).ready(function () {   
    // Initialize variables 
    ageVar = $('#BMR_age');     
  });

  function BMR_Cal()
  {    
    if(ageVar.val() > 0)
    {       
        // then only it will redirect to the next page i.e, BMR_Result          
    }

  }
  < /script>
  < /body> 
< /html>

Answer 1

Ok the problem is your assigning the variable when the page loads (before the user has inputted anything).

lets pop it all in the document ready .

 $(document).ready(function () {
// Initialize the variable by declaring it
var ageVar ;

function BMR_Cal() {
//then tie it to the input element AFTER the user has inputted .
ageVar = $('#BMR_age');
if(ageVar.val() > 0) {

document.location.href="yourpagename#BMR_Result";
}
});