Automatically calculating, and displaying, somone's BMI in a form field using data the user has submitted in seperate height and weight form fields
However, it's made more complicated because I am giving the user the option to choose:
1) Height as either CM or Feet & Inches
2) Weight as either Kg or Stones & Lbs
It's also made complicated by the fact that there is WebAssist Validation running on the form AND that this is an UPDATE form. Here's where I've got to so far, on this specific section:
<div class="form-group row">
<label for="Height" class="col-sm-4 col-form-label">Height</label>
<div class="col-sm-8">
<div class="row">
<div id="FeetInches" class="col HeightOptions">
<div class="input-group mb-2">
<input type="number" class="input Height form-control" name="HeightFt" id="HeightFt" placeholder="Feet" value="<?php echo(isset($_GET['v2'])?ValidatedField("healthscreeningform_476","HeightFt"):$rsEDITFORM->getColumnVal("HeightFt")) ?>">
<div class="input-group-append">
<div class="input-group-text">ft</div>
</div>
<input type="number" class="input Height form-control" name="HeightIn" id="HeightIn" placeholder="Inches" value="<?php echo(isset($_GET['v2'])?ValidatedField("healthscreeningform_476","HeightIn"):$rsEDITFORM->getColumnVal("HeightIn")) ?>">
<div class="input-group-append">
<div class="input-group-text">in</div>
</div>
</div>
</div>
<div id="Centimetres" class="col HeightOptions">
<div class="input-group mb-2">
<input type="number" class="input Height form-control" name="HeightCm" id="HeightCm" placeholder="Centimetres" value="<?php echo(isset($_GET['v2'])?ValidatedField("healthscreeningform_476","HeightCm"):$rsEDITFORM->getColumnVal("HeightCm")) ?>">
<div class="input-group-append">
<div class="input-group-text">cm</div>
</div>
</div>
</div>
<div class="col">
<div class="button dropdownHeight">
<select name="HeightSelector" id="HeightSelector" class="form-control">
<option value="" <?php if (!(strcmp("", (isset($_GET['v2'])?ValidatedField("healthscreeningform_476","HeightSelector"):$rsEDITFORM->getColumnVal("HeightSelector"))))) {echo "selected=\"selected\"";} ?>>Please Select</option>
<option value="FeetInches" <?php if (!(strcmp("FeetInches", (isset($_GET['v2'])?ValidatedField("healthscreeningform_476","HeightSelector"):$rsEDITFORM->getColumnVal("HeightSelector"))))) {echo "selected=\"selected\"";} ?>>Feet & Inches</option>
<option value="Centimetres" <?php if (!(strcmp("Centimetres", (isset($_GET['v2'])?ValidatedField("healthscreeningform_476","HeightSelector"):$rsEDITFORM->getColumnVal("HeightSelector"))))) {echo "selected=\"selected\"";} ?>>Centimetres</option>
</select>
</div>
</div>
</div><!-- /row -->
</div>
</div>
<div class="form-group row">
<label for="Weight" class="col-sm-4 col-form-label">Weight</label>
<div class="col-sm-8">
<div class="row">
<div id="Kg" class="col WeightOptions">
<div class="input-group mb-2">
<input type="number" class="input Weight form-control" name="WeightKg" id="WeightKg" placeholder="Kilograms" value="<?php echo(isset($_GET['v2'])?ValidatedField("healthscreeningform_476","WeightKg"):$rsEDITFORM->getColumnVal("WeightKg")) ?>">
<div class="input-group-append">
<div class="input-group-text">kg</div>
</div>
</div>
</div>
<div id="Lbs" class="col WeightOptions">
<div class="input-group mb-2">
<input type="number" class="input Weight form-control" name="WeightLbs" id="WeightLbs" placeholder="Pounds" value="<?php echo(isset($_GET['v2'])?ValidatedField("healthscreeningform_476","WeightLbs"):$rsEDITFORM->getColumnVal("WeightLbs")) ?>">
<div class="input-group-append">
<div class="input-group-text">lbs</div>
</div>
</div>
</div>
<div class="col">
<div class="button dropdownWeight">
<select name="WeightSelector" id="WeightSelector" class="form-control">
<option value="" <?php if (!(strcmp("", (isset($_GET['v2'])?ValidatedField("healthscreeningform_476","WeightSelector"):$rsEDITFORM->getColumnVal("WeightSelector"))))) {echo "selected=\"selected\"";} ?>>Please Select</option>
<option value="Kg" <?php if (!(strcmp("Kg", (isset($_GET['v2'])?ValidatedField("healthscreeningform_476","WeightSelector"):$rsEDITFORM->getColumnVal("WeightSelector"))))) {echo "selected=\"selected\"";} ?>>Kilograms</option>
<option value="Lbs" <?php if (!(strcmp("Lbs", (isset($_GET['v2'])?ValidatedField("healthscreeningform_476","WeightSelector"):$rsEDITFORM->getColumnVal("WeightSelector"))))) {echo "selected=\"selected\"";} ?>>Pounds</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="MCbmi" class="col-sm-4 col-form-label">BMI</label>
<div class="col-sm-8">
<input type="number" class="form-control" name="MCbmi" id="MCbmi" placeholder="BMI" value="<?php echo(isset($_GET['v2'])?ValidatedField("healthscreeningform_476","MCbmi"):$rsEDITFORM->getColumnVal("MCbmi")) ?>" required>
</div>
</div>
I had also started working on some JS, but because the customer has two options for both height and weight, I became completely confused by it.
<script>
$(function() {
$('#HeightSelector').change(function(){
$('.HeightOptions').hide();
$('#' + $(this).val()).show();
});
});
</script>
<script>
$(function() {
$('#WeightSelector').change(function(){
$('.WeightOptions').hide();
$('#' + $(this).val()).show();
});
});
</script>
<script>
$(document).ready(function(){
$(".input").keyup(function(){
var val1 = +$(".HeightFt").val();
var val2 = +$(".HeightIn").val();
var val3 = +$(".Weight").val();
$("#BMI").val(((val1 + "." + val2)*(val1 + "." + val2))/val3);
});
});
</script>
I also attach the page in question. The above code starts at line 995.
Could you help me with this Ray? Happy to arrange a Premium Support session with you.
Thank you.
NJ
