Edit on
<div class="ph" data-role="page" id="welcomePg">
  <h1>GROWTH CALCULATOR FOR BABIES & TODDLERS<h1>
    <div data-role="main">
    <img src= "https://s3-us-west-2.amazonaws.com/s.cdpn.io/426789/babymeasure.jpg"/>
    </div>
    <div data-role="footer">
    <a href="#measurements" data-role="button" data-rel="page">CONTINUE</a>
  </div>
    </div>
    <div class="pg" data-role="page" id="measurements">
  <div data-role="header">
    <h1>Growth Calculator Data</h1>
  </div>
  <div role="main" class="ui-content">
    <form id='measurements-form'>
      <!--This is an example of a radio buttion, where one option is selected between the two. Which ever input is selected the 'gender' variable will be populated with the value 'M' or 'F', depending on the input.-->
      <div class="ui-field-contain">
        <label for="gender">Please select the gender:</label>
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="gender" value="M" data-theme="a" id='Male' checked="checked" />
          <label for="Male">Male</label>
          <input type="radio" name="gender" value="F" data-theme="a" id='Female' />
          <label for="Female">Female</label>
        </fieldset>
      </div>

      <div data-role="fieldcontain">
        <label for="height">Height (cm):</label>
        <input type="number" name="height" value="" />
      </div>
      
     <div data-role="fieldcontain">
        <label for="circumference">Arm Circumference (mm):</label>
        <input type="number" name="circumference" value="" />
      </div>

      <!--The dob is used here to determine the age. Notice that the code is identical to that of the EDD calendar, except 
					the data-options 'mode' is set to a flipbox, changing the layout of the datebox. Fiddle around with other formats to 
					find the databox mode that you like best.

					The data only has values for children who are up to 1856 days old, so ensure that you input a dob that is young enough.
					Challenge: You can also limit the dates so that the user cannot go past 1856 days, so the input will always be valid.
					Give it a go. http://dev.jtsage.com/DateBox/doc/4-2-limit/ will point you in the right direction. The 'beforeToday' 
					option is an example of data limiting, where it only allows dates that are before today to be entered.-->

      <div data-role="fieldcontain">
        <label for="dob">DOB:</label>
        <div>
          <input  class="datebx" name="dob" type="text" data-role="datebox" data-options='{"mode":"flipbox", "overrideDateFormat":"%Y-%m-%d", "useHeader":false, "hideInput": true, "showInitialValue": true, "useInline": true, "beforeToday":true, "useSetButton":false, "useImmediate":true}'
          />
        </div>
      </div>

    </form>
  </div>

  <!--The footer a 'data-rel' property which tells us what the button does. In this case, the 'Calculate' button first calculates the relevant data, then redirects to another page of id 'results'.-->
  <div data-role="footer">
    <a href="#results" data-role="button" data-rel="page" onclick="return calculateResults('#measurements-form')">Calculate</a>
  </div>

</div>

<div class="pag" data-role="page" id="results">

  <div data-role="header">
    <h1>Results</h1>
  </div>

  <div role="main" class="ui-content">

    <!--Each of these spans are changed in the calculateResults function as they can only be populated once the 
				data has been input-->
    <div class="ui-grid-a" style='text-align:center'>
      <div class="ui-block-a">Gender</div>
      <div class="ui-block-b"><span id="gender-result"></span></div>
      <div class="ui-block-a">Age (days)</div>
      <div class="ui-block-b"><span id="age-result"></span></div>
      <div class="ui-block-a">Height/length (cm)</div>
      <div class="ui-block-b"><span id="height-result"></span></div>
      <div class="ui-block-a">Height for age</div>
      <div class="ui-block-b"><span id="lhfa-result"></span></div>
      <div class="ui-block-a">Circumference (mm)</div>
      <div class="ui-block-b"><span id="circumference-result"></span></div>
      <div class="ui-block-a">Circumference for age</div>
      <div class="ui-block-b"><span id="cfa-result"></span></div>
    </div>

  </div>

  <div data-role="footer">
    <a href="#" data-role="button" data-rel="back">Back</a>
  </div>
</div>
.ph{
  background-color: #CCFFCC;
 font-family: italic;
 
 
}
.pg{
  background-color: #CCFFCC;
}
.pag{
  background-color: #CCFFCC;
}
.datebx{
   background-color: clear !important; 
}



body {
	text-align:center;
 
}			
.ui-header .ui-title {
	white-space: normal;
	margin: 0.6em 10% 0.8em !important;
  background-color: #FAEBD7;
}		


.ui-footer .ui-btn
{
	overflow: visible !important;
	white-space: normal !important;
	padding:12px;
	font-size:14px;
  background-color: #FAEBD7;
}	

.ui-datebox-inline, .ui-datebox-inlineblind, .ui-datebox-container { border:0px !important;}
.ui-datebox-header {margin-bottom:10px;}

.ui-datebox-flipcenter {
	width:90% !important;          		
}

.ui-datebox-flipcontent div {
	width:27%;
}		

.ui-datebox-inline, .ui-datebox-inlineblind, .ui-datebox-container { 
	border:0px !important;
}

 @media (min-width: 28em){
  .ui-field-contain>label, .ui-field-contain .ui-controlgroup-label, .ui-field-contain>.ui-rangeslider>label {
     float: none !important; 
     width: inherit !important; 
     margin: 0 0 .4em !important; 
  }
 
  
  .ui-field-contain>label~[class*=ui-], .ui-field-contain .ui-controlgroup-controls {
     float: none !important; 
     width: inherit !important; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .ui-field-contain .ui-textinput-autogrow {
   	width:100% !important; 
  }
function calculateResults(form) {

  // Parses each input from the form into variables of the appropriate type (eg. int, float). For the age, the difference between
  // todays date and the dob is used.
  var gender = $("input[name=gender]:checked", form).val();
  var ht = parseFloat($("input[name=height]", form).val()).toFixed(1); // round to 1 decimal (string)
  var circ = parseFloat($("input[name=circumference]", form).val()).toFixed(1); // round to 1 decimal (string)
  var circumference = parseFloat(circ);
  var height = parseFloat(ht);
  var dob = $("input[name=dob]", form).val();
  var age_fn = moment().diff(dob, "days");
  var age = parseInt(age_fn);
  var lhfa_z_score;
  var cfa_z_score;

  if (ht == "NaN") {
    MobenziGW.Toast("Please enter a height value");
    return false;
  }
    if(circ == "NaN") {
      MobenziGW.Toast("Please enter a circumference value");
    return false;
    }
  $("#circumference-result").html(circumference + " mm");
  $("#height-result").html(height + " cm");
  $("#gender-result").html((gender == "M" ? "Male": "Female"));
  $("#age-result").html(age + " days");
  $("#lhfa-result").html(" ");
  $("#cfa-result").html(" ");

  // Length/height for age. Depending on the gender, the lfhadata variable will be populated with different values. 
  // The data only has values for children who are up to 1856 days old, so ensure that your dob meets this criteria.
  if (gender == "F") {
    var lhfadata = lhfa_girls();
  } else {
    var lhfadata = lhfa_boys();
  }
  
  
  

  // Calculates the score from the lfhadata data which will be used to categorise the type of growth.  
  var lhfa_z_score = lhfadata[age];
  for (var i = -4; i <= 4; i++) {
    if (height < parseFloat(lhfa_z_score[i])) {
      lhfa_z_score = i;
      break;
    }
  }

  // Depending on the score that was calculated, the growth type will be determined and the id, lhfa-result, will be displayed.
  if (lhfa_z_score <= -2 && lhfa_z_score > -3) {
    $("#lhfa-result").html("<strong>Moderately stunted</strong>");
  } else if (lhfa_z_score <= -3) {
    $("#lhfa-result").html("<strong>Severely stunted</strong>");
  } else {
    $("#lhfa-result").html("<strong>No stunting</strong>");
  }
  console.log("this is my score");
  $("#cfa-result").html("<strong>Moderate malnutrition</strong>");


if (circumference <= 184 && circumference > 160) {
    $("#cfa-result").html("<strong>Moderate malnutrition</strong>");
  } else if (circumference <= 160) {
    $("#cfa-result").html("<strong>Severe malnutrition</strong>");
  } else {
    $("#cfa-result").html("<strong>No malnutrition</strong>");
  }
};
  
Rerun