Edit on
<div data-role="page" id="measurements">
  <div data-role="header"  style="background-color:yellowgreen">
    <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" min="0" max="120" value="" />
      </div>
      <div data-role="fieldcontain">
        <label for="circumference">Left Mid-Upper Arm Circumference (mm):</label>
        <input type="number" name="circumference" value="" />
      </div>
      <div data-role="fieldcontain">
        <label for="weight">Weight (kg):</label>
        <input type="number" name="weight" 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. https://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 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" STYLE="background-color: yellowgreen">
    <a href="#results" data-role="button" data-rel="page" onclick="return calculateResults('#measurements-form')">Calculate</a>
  </div>

</div>

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

  <div data-role="header" style="background-color:yellowgreen">
    <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"> Left Mid Upper-Arm Circumference (mm)</div>
      <div class="ui-block-b"><span id="circumference-result"></span></div>
      <div class="ui-block-a">Nutrition Rate</div>
      <div class="ui-block-b"><span id="malnutrition-result"></span></div>
      <div class="ui-block-a">Weight (kg) </div>
      <div class="ui-block-b"><span id="weight-result"></span></div>
      <div class="ui-block-a">Weight for Height</div>
      <div class="ui-block-b"><span id="wfh-result"></span></div>
    </div>

    <div data-role="footer" style="background-color:yellowgreen">
      <a href="#" data-role="button" data-rel="back">Back</a>
    </div>
  </div>
body {
  text-align: center;
}

label {
  color: yellowgreen;
  ;
  font-size: 220%;
}

.dob {
  color: yellowgreen;
}

.ui-header .ui-title {
  white-space: nowrap;
  color: dimgrey;
  length: 200px;
  width: 300px;
  margin: 0.6em 10% 0.8em !important;
}

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

.ui-datebox-inline,
.ui-datebox-inlineblind,
.ui-datebox-container {
  border: 0px !important;
  background-color: #FF7F50;
  padding: 10px;
  margin-left: 5px;
}

.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.6em 10% 0.8em !important;
    \\this is the boxes headings
  }
  .
}

.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 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;

  if (ht == "NaN") {
    MobenziGW.Toast("Please enter a height value");
    return false;
  }

  if (height > 120) {
    MobenziGW.Toast("Please enter a height below 120cm");
    return false;
  }

  if (age > 1850) {
    MobenziGW.Toast("Please enter an age below 6 years");
    return false;
  }

  var cir = parseFloat($("input[name=circumference]", form).val()).toFixed(1); // round to 1 decimal (string)
  var circumference = parseFloat(cir);

  if (circumference > 0 && 160 > circumference) {
    var malnutrition = "<strong>Severe malnutrition</strong>";
  } else if (circumference > 160 && 185 > circumference) {
    malnutrition = "<strong>Moderate Malnutrition</strong>";
  } else {
    malnutrition = "<strong>Properly Nourished</strong>";
  }

  var gender = $("input[name=gender]:checked", form).val();
  var ht = parseFloat($("input[name=height]", form).val()).toFixed(1); // round to 1 decimal (string)
  var height = parseFloat(ht);
  var wt = parseFloat($("input[name=weight]", form).val()).toFixed(1); // round to 1 decimal (string)
  var weight = parseFloat(wt);
  var wfh_z_score;

  if (wt == "NaN") {
    MobenziGW.Toast("Please enter a weight value");
    return false;
  }

  $("#height-result").html(height + " cm");
  $("#gender-result").html((gender == "M" ? "Male" : "Female"));
  $("#age-result").html(age + " days");
  $("#lhfa-result").html("");
  $("#circumference-result").html(circumference + " mm");
  $("#malnutrition-result").html(malnutrition);
  $("#weight-result").html(weight + "kg");
  $("#wfh-result").html("");

  // Length/height for age. Depending on the gender, the 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_scores = lhfadata[age];
  for (var i = -4; i <= 4; i++) {
    if (height < parseFloat(lhfa_z_scores[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>");
  }

  if (gender == "F") {
    var wfhdata = wfh_girls();
  } else {
    var wfhdata = wfh_boys();
  }

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

  if (wfh_z_score <= -2 && wfh_z_score > -3) {
    $("#wfh-result").html("<strong>Percentile: 50% - Your baby is average height.</strong>");
  } else if (wfh_z_score <= -3) {
    $("#wfh-result").html("<strong>Percentile: 36% - Your baby is shorter than average.</strong>");
  } else {
    $("#wfh-result").html("<strong>Percentile: 76% - Your baby is taller than average. </strong>");
  }
};
Rerun