2 Answers

  1. Cary- Reply

    2019-11-13

    You would need to use JavaScript to accomplish this.

    Here's one way to do it:

    • Listen for the form's submit event
    • Prevent the default (so that the form doesn't get sent to the server)
    • Grab the value from each field. Fields use the name attribute from the HTML
    • Use parseInt on each field because they'll be strings
    • Add them up
    • Display the result (in this example, in the console)

    const form = document.querySelector('form')
    
    form.addEventListener('submit', event => {
      event.preventDefault()
      const total =
        parseInt(form.age.value) +
        parseInt(form.bmi.value) +
        parseInt(form.famhistory.value) +
        parseInt(form.diet.value)
      console.log(total)
    })
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Zedland Health Authority's Diabetes health assessment tool</title>
      <link rel="stylesheet" type="text/css" href="fma.css">
      <script src="fma.js"></script>
    </head>
    
    <body>
      <h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1>
      <form id="register">
        <fieldset id="controls">
          <div>
            <label class="button" for="Age">How old are you?</label>
            <input type="radio" id="agerange" name="age" value="0" checked="checked">
            <label for="agerange1">1-25</label>
            <input type="radio" id="agerange" name="age" value="5">
            <label for="agerange2">26-40</label>
            <input type="radio" id="agerange" name="age" value="8">
            <label for="agerange3">40-60</label>
            <input type="radio" id="agerange" name="age" value="10">
            <label for="agerange4">60+</label>
          </div>
          <div>
            <label class="button" for="bmi">What is your BMI?</label>
            <input type="radio" id="bmi" name="bmi" value="0" checked="checked">
            <label for="bmi1">0-25</label>
            <input type="radio" id="bmi" name="bmi" value="0">
            <label for="bmi2">26-30</label>
            <input type="radio" id="bmi" name="bmi" value="9">
            <label for="bmi3">31-35</label>
            <input type="radio" id="bmi" name="bmi" value="10">
            <label for="bmi4">35+</label>
          </div>
          <div>
            <label class="button" for="famhistory">Does anybody in your family have diabetes?</label>
            <input type="radio" id="famhistory" name="famhistory" value="0" checked="checked">
            <label for="famhistory1">No</label>
            <input type="radio" id="famhistory" name="famhistory" value="7">
            <label for="famhistory2">Grandparent</label>
            <input type="radio" id="famhistory" name="famhistory" <label for="famhistory3">Sibling</label>
            <input type="radio" id="famhistory" name="famhistory" value="15">
            <label for="famhistory4">Parent</label>
          </div>
          <div>
            <label class="button" for="diet">How would you describe your diet?</label>
            <input type="radio" id="diet" name="diet" value="0" checked="checked">
            <label for="diet1">Low sugar</label>
            <input type="radio" id="diet" name="diet" value="7">
            <label for="diet2">Normal sugar</label>
            <input type="radio" id="diet" name="diet" value="15">
            <label for="diet3">Quite high sugar</label>
            <input type="radio" id="diet" name="diet" value="15">
            <label for="diet4">High sugar</label>
          </div>
        </fieldset>
        <div>
          <input type="submit" value="submit" id="submit">
        </div>
      </form>
    
    </body>
    
    </html>
  2. Charles- Reply

    2019-11-13

    If you plan on adding values, here is a more flexible approach.

    The idea is to loop through each relevant input (those that are inside your fieldset with ID controls), regardless of its name, so that if you add more checks, the same code will still work.

    Create a score variable and increment it with the value of each input that is checked.

    Be careful, you have the value 0 TWICE for the BMI check

      window.addEventListener('DOMContentLoaded', function() {
    
        var form = document.querySelector('form');
    
        form.addEventListener('submit', function(event) {
            event.preventDefault();
    
            var inputs = document.querySelectorAll('#controls input');
            var score = 0;
            inputs.forEach(function(input) {
                if (input.checked) {
                    score += parseInt(input.value, 10);
                }
    
            });
            console.log(score);
        });
    
      });
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Zedland Health Authority's Diabetes health assessment tool</title>
        <script>
    
    
    
        </script>
    </head>
    <body>
        <h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1>
        <form id="register">
        <fieldset id="controls">
            <div>
              <label class="button" for="Age">How old are you?</label>
                <input type="radio" id="agerange" name="age" value="0" checked="checked">
    
                <label for="agerange1">1-25</label>
                <input type="radio" id="agerange" name="age" value="5">
                <label for="agerange2">26-40</label>
                <input type="radio" id="agerange" name="age" value="8">
                <label for="agerange3">40-60</label>
                <input type="radio" id="agerange" name="age" value="10">
                <label for="agerange4">60+</label>
            </div>
            <div>
                <label class="button" for="bmi">What is your BMI?</label>
                <input type="radio" id="bmi" name="bmi" value="0" checked="checked">
    
                <label for="bmi1">0-25</label>
                <input type="radio" id="bmi" name="bmi"  value="0">
                <label for="bmi2">26-30</label>
                <input type="radio" id="bmi" name="bmi" value="9">
                <label for="bmi3">31-35</label>
                <input type="radio" id="bmi" name="bmi"  value="10">
                <label for="bmi4">35+</label>
            </div>
            <div>
                <label class="button" for="famhistory">Does anybody in your family have diabetes?</label>
                <input type="radio" id="famhistory" name="famhistory" value="0" checked="checked">
                <label for="famhistory1">No</label>
                <input type="radio" id="famhistory" name="famhistory" value="7">
                <label for="famhistory2">Grandparent</label>
                <input type="radio" id="famhistory" name="famhistory"
                <label for="famhistory3">Sibling</label>
                <input type="radio" id="famhistory" name="famhistory" value="15">
                <label for="famhistory4">Parent</label>
            </div>
            <div>
                <label class="button" for="diet">How would you describe your diet?</label>
                <input type="radio" id="diet" name="diet"  value="0" checked="checked">
                <label for="diet1">Low sugar</label>
                <input type="radio" id="diet" name="diet"  value="7">
                <label for="diet2">Normal sugar</label>
                <input type="radio" id="diet" name="diet" value="15">
                <label for="diet3">Quite high sugar</label>
                <input type="radio" id="diet" name="diet" value="15">
                <label for="diet4">High sugar</label>
            </div>
        </fieldset>
      <div>
          <input type="submit" value="submit">
      </div>
    </form>
    
    </body>
    </html>

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>