Form response calculation

Asked by At

I just create a form and table for a physical therapist. Need your help in calculating "sum based on response". The extreme difficulty value can be "0" and no difficulty can be "4"

I am familiar with reading and modifying js, html, css code. Here is what i wrote. Please help

<FORM >

<TABLE BORDER>

<TR ALIGN=CENTER>
<TD WIDTH=350><B>ACTIVITIES<B> </TD>
<TD WIDTH=125><B>Extreme difficulty (0)</B></TD>
<TD WIDTH=125><B>Quite a bit of difficulty (1)</B></TD>
<TD WIDTH=125><B>Moderate Difficulty(2)</B></TD>
<TD WIDTH=125><B>Little Difficulty(3)</B></TD>
<TD WIDTH=125><B>No Difficulty(4)</B></TD>
</TR>

<TR ALIGN=CENTER>
<TD  ALIGN=LEFT>
  Any of usual work (household, work)</TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="stimulat" VALUE="5"></TD>
</TR>

<TR ALIGN=CENTER>
<TD  ALIGN=LEFT>
  Your hobbies, recreational, sporting</TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="freedom" VALUE="5"></TD>
</TR>

<TR ALIGN=CENTER>
<TD  ALIGN=LEFT>
 Lifting bag of groceries to waist level</TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="demand" VALUE="5"></TD>
</TR>

<TR ALIGN=CENTER>
<TD  ALIGN=LEFT>
Grooming your hair</TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="1"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="2"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="3"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="4"></TD>
<TD><INPUT TYPE="RADIO" NAME="creative" VALUE="5"></TD>
</TR>

</TABLE>

</FORM>

I do not know how to calculate the result value to this form

3 Answers

0
MrJ On Best Solutions

New and complete solution

const
  theForm        = document.querySelector('#the-Form'),
  theTabBody     = document.querySelector('#Activities-Table tbody'),
  theTotal       = document.querySelector('#the-Sum'),
  theReset       = document.querySelector('#the-Reset'),
  PrintButton    = document.querySelector('#bt-Print'),
  ActivitiesList = [
    { name: 'household', lib: 'Any of usual work, household, or school activities' }
  , { name: 'hobbies',   lib: 'Your usual hobbies, recreational, sporting activities' }
  , { name: 'groceryw',  lib: 'Lifting bag of groceries to waist level' }
  , { name: 'groceryd',  lib: 'Lifting a bag of groceries above your head' }
  , { name: 'grooming',  lib: 'Grooming your hair' }
  , { name: 'pushing',   lib: 'Pushing up on your hands (e.g. from bathtub or chair)' }
  , { name: 'food',      lib: 'Preparing food (e.g. peeling, cutting ..)' }
  , { name: 'driving',   lib: 'Driving' }
  , { name: 'cleaning',  lib: 'Vaccuming, sweeping, or raking ' }
  , { name: 'dressing',  lib: 'Dressing' }
  , { name: 'dbuttons',  lib: 'Doing up buttons' }
  , { name: 'appliance', lib: 'Using tools or appliances' }
  , { name: 'doors',     lib: 'Opening doors' }
  , { name: 'cleaning1', lib: 'Cleaning' }
  , { name: 'shoes',     lib: 'Tying or lacing shoes' }
  , { name: 'sleep',     lib: 'Sleeping' }
  , { name: 'laundry',   lib: 'Laundering cloths (e.g. washing, ironing, folding)' }
  , { name: 'jar',       lib: 'Opening a jar' }
  , { name: 'ball',      lib: 'Throwing a ball' }
  , { name: 'carrying',  lib: 'Carrying a small suitcase with affected limb' }
  ]
;

function CaculSum()
{
  let total = 0;

  ActivitiesList.forEach( line => {
    total += parseInt(document.querySelector(`input[name="${line.name}"]:checked`).value);
  })
  theTotal.textContent = ` total = ${total} `;
}

function GlobalInit()
{
  let Cheking = '';
    
  ActivitiesList.forEach( (line,iLine) => {
    let
      newRow  = theTabBody.insertRow(-1),
      newCell = newRow.insertCell(0);

      newCell.textContent = line.lib;

      Cheking = 'checked';

      for (let i=0; i<5; i++) {
        newCell           = newRow.insertCell(i+1); // id="R-${iLine}-${i}"
        newCell.innerHTML = `<input type="radio" name="${line.name}" id="R-${iLine}-${i}" value="${i}" ${Cheking}>`
        newCell.innerHTML += `<label for="R-${iLine}-${i}">&#x2610;</label>`; // not checked
        newCell.innerHTML += `<label for="R-${iLine}-${i}">&#x2611;</label>`; // checked
        newCell.innerHTML += `<label for="R-${iLine}-${i}">&#x2714;</label>`; // print checked

        Cheking = '';
      }
  })
  theTotal.textContent = ' total = 0 ';
}

GlobalInit();

theForm.onchange = CaculSum;

theForm.onreset = function() { 
  theTotal.textContent = ` total = 0 `;
};

PrintButton.onclick = function(){
  window.print();
}
body {
  font :16px Arial, Helvetica, sans-serif;
}

h3 {
  text-align:center;
  color:blue;
}
table {
  border-collapse: collapse;
  margin: 10px 20px;
}

td {
  border: 1px solid grey;
  padding: 2px 10px;
}

td {
  text-align: center;
  min-width: 100px;
  max-width: 100px;
}

tr td:first-child {
  text-align: left;
  min-width: 350px;
  max-width: 350px;
}

thead td {
  font-weight: bold;
  background: lavender
}

#the-Sum {
  display: inline-block;
  margin: 10px 20px;
  padding: 10px;

  font-weight: bold;
  color: crimson;
  border: 1px solid grey;
  width: 350px;

}
tbody tr:nth-child(even) {
  background: lavender
}

#the-Form > label, 
#the-Form > input {
  background-color:lavender;
  color: black;
  margin: 5px 10px;
  padding: 5px;
  font-weight: bold
}
#the-Form > input {
  border: 1px solid grey;
  width : 300px;
}

#the-Form tbody label { font-size: 22px; }

input[type=radio] { display:none }
input[type=radio] + label { display:inline; color: grey; } 
input[type=radio] + label + label { display:none; color:black; } 
input[type=radio]:checked + label { display:none } 
input[type=radio]:checked + label + label { display:inline } 
input[type=radio] + label + label + label { display:none }
<style media="print">
    h3, output {  color: black; }
    h4, button { display: none; }
    table { margin: 10px 0; }
    tr td:first-child { min-width: 400px; max-width: 400px; }
    tbody tr:nth-child(even) { background: none }
    #the-Form tbody label { display:none  }
    input[type=radio]:checked + label + label + label { display:inline !important }
</style>

<h3> Dr ABC<br> MYLocation</h3>

<h4> We are interested in knowing wheather you are having any difficulty with the 
    activities listed below <u> because of your upper limb problem </u>
    for which  you are seeking attention. <br>Provide an answer for each activity
    Today, <u>do you or would you </u> have any difficulty with: (check boxes below 
    on each line)
</h4>

<form id="the-Form">
  <label for="patientName"> Enter Patient's Name :</label>
  <input type="text" id="patientName" value="" />
    
  <table id="Activities-Table">
    <thead>
      <tr>
        <td>ACTIVITIES </td>
        <td>Extreme difficulty&nbsp;(0)</td>
        <td>Quite a bit of difficulty&nbsp;(1)</td>
        <td>Moderate Difficulty&nbsp;(2)</td>
        <td>Little Difficulty&nbsp;(3)</td>
        <td>No Difficulty&nbsp;(4)</td>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>

  <output id="the-Sum"></output>
  <!-- <button type="submit">submit</button> --> 
  <button type="reset">reset</button>
  <button id="bt-Print">Print or Save as pdf</button>
</form>

0
Community On
var total = 0;
var hi = getelementById("hi");

hi.onclick = function(){
total = 0;
}

Try adding id's to all of your check boxes and add an onclick function to them that adds up the total

https://jsfiddle.net/Lvejzuac/

1
user3877540 On
<h4 style="text-align:center;color:blue;"> Dr ABC<br> MYLocation</h4>

<form action="" method="get">
    <b> Enter Patient's Name :</b> <input type="text"  /><br>
</form>
<h4> We are interested in knowing wheather you are having any difficulty with the 
 activities listed below <u> because of your upper limb problem </u>
for which <br> you are seeking attention. Provide an answer for each activity</h4>
<h4> Today, <u>do you or would you </u> have any difficulty with: (check boxes below 
on each line)</h4>
<style>table, td { border: 1px solid grey }
    td {
      text-align: center;
      min-width: 125px;
      max-width: 125px;
    }
    tr td:first-child {
      text-align: left;
      min-width: 350px;
      max-width: 350px;
    }
    thead td { font-weight: bold }
    #the-Sum {
      display: block;
      margin: 10px 0 0 20px;
      font-weight: bold;
      color:crimson;
}</style>
<form id="the-Form">
<table>
<thead>
  <tr>
    <td>ACTIVITIES </td>
    <td>Extreme Difficulty or Unable to Perform Activity&nbsp;(0)</td>
    <td>Quite a Bit of Difficulty&nbsp;(1)</td>
    <td>Moderate Difficulty&nbsp;(2)</td>
    <td>A Little bit of Difficulty&nbsp;(3)</td>
    <td>No Difficulty&nbsp;(4)</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td> Any of usual work, household, or school activities</td>
    <td><input type="radio" name="household" value="0"></td>
    <td><input type="radio" name="household" value="1"></td>
    <td><input type="radio" name="household" value="2"></td>
    <td><input type="radio" name="household" value="3"></td>
    <td><input type="radio" name="household" value="4"></td>
  </tr>
  <tr>
    <td> Your usual hobbies, recreational, sporting activities</td>
    <td><input type="radio" name="hobbies" value="0"></td>
    <td><input type="radio" name="hobbies" value="1"></td>
    <td><input type="radio" name="hobbies" value="2"></td>
    <td><input type="radio" name="hobbies" value="3"></td>
    <td><input type="radio" name="hobbies" value="4"></td>
  </tr>
  <tr>
    <td> Lifting bag of groceries to waist level</td>
    <td><input type="radio" name="groceryw" value="0"></td>
    <td><input type="radio" name="groceryw" value="1"></td>
    <td><input type="radio" name="groceryw" value="2"></td>
    <td><input type="radio" name="groceryw" value="3"></td>
    <td><input type="radio" name="groceryw" value="4"></td>
  </tr>
  <tr>
    <td> Lifting a bag of groceries above your head </td>
    <td><input type="radio" name="groceryd" value="0"></td>
    <td><input type="radio" name="groceryd" value="1"></td>
    <td><input type="radio" name="groceryd" value="2"></td>
    <td><input type="radio" name="groceryd" value="3"></td>
    <td><input type="radio" name="groceryd" value="4"></td>
  </tr>

  <tr>
    <td> Grooming your hair </td>
    <td><input type="radio" name="grooming" value="0"></td>
    <td><input type="radio" name="grooming" value="1"></td>
    <td><input type="radio" name="grooming" value="2"></td>
    <td><input type="radio" name="grooming" value="3"></td>
    <td><input type="radio" name="grooming" value="4"></td>
  </tr>
  <tr>
    <td> Pushing up on your hands (e.g. from bathtub or chair) </td>
    <td><input type="radio" name="pushing" value="0"></td>
    <td><input type="radio" name="pushing" value="1"></td>
    <td><input type="radio" name="pushing" value="2"></td>
    <td><input type="radio" name="pushing" value="3"></td>
    <td><input type="radio" name="pushing" value="4"></td>
  </tr>
  <tr>
    <td> Preparing food (e.g. peeling, cutting </td>
    <td><input type="radio" name="food" value="0"></td>
    <td><input type="radio" name="food" value="1"></td>
    <td><input type="radio" name="food" value="2"></td>
    <td><input type="radio" name="food" value="3"></td>
    <td><input type="radio" name="food" value="4"></td>
  </tr>
  <tr>
    <td> Driving </td>
    <td><input type="radio" name="driving" value="0"></td>
    <td><input type="radio" name="driving" value="1"></td>
    <td><input type="radio" name="driving" value="2"></td>
    <td><input type="radio" name="driving" value="3"></td>
    <td><input type="radio" name="driving" value="4"></td>
  </tr>
  <tr>
    <td> Vaccuming, sweeping, or raking </td>
    <td><input type="radio" name="cleaning" value="0"></td>
    <td><input type="radio" name="cleaning" value="1"></td>
    <td><input type="radio" name="cleaning" value="2"></td>
    <td><input type="radio" name="cleaning" value="3"></td>
    <td><input type="radio" name="cleaning" value="4"></td>
  </tr>
  <tr>
    <td> Dressing </td>
    <td><input type="radio" name="dressing" value="0"></td>
    <td><input type="radio" name="dressing" value="1"></td>
    <td><input type="radio" name="dressing" value="2"></td>
    <td><input type="radio" name="dressing" value="3"></td>
    <td><input type="radio" name="dressing" value="4"></td>
  </tr>
  <tr>
    <td> Doing up buttons </td>
    <td><input type="radio" name="dbuttons" value="0"></td>
    <td><input type="radio" name="dbuttons" value="1"></td>
    <td><input type="radio" name="dbuttons" value="2"></td>
    <td><input type="radio" name="dbuttons" value="3"></td>
    <td><input type="radio" name="dbuttons" value="4"></td>
  </tr>
  <tr>
    <td> Using tools or appliances</td>
    <td><input type="radio" name="appliance" value="0"></td>
    <td><input type="radio" name="appliance" value="1"></td>
    <td><input type="radio" name="appliance" value="2"></td>
    <td><input type="radio" name="appliance" value="3"></td>
    <td><input type="radio" name="appliance" value="4"></td>
  </tr>
  <tr>
    <td> Opening doors </td>
    <td><input type="radio" name="doors" value="0"></td>
    <td><input type="radio" name="doors" value="1"></td>
    <td><input type="radio" name="doors" value="2"></td>
    <td><input type="radio" name="doors" value="3"></td>
    <td><input type="radio" name="doors" value="4"></td>
  </tr>
  <tr>
    <td> Cleaning </td>
    <td><input type="radio" name="cleaning1" value="0"></td>
    <td><input type="radio" name="cleaning1" value="1"></td>
    <td><input type="radio" name="cleaning1" value="2"></td>
    <td><input type="radio" name="cleaning1" value="3"></td>
    <td><input type="radio" name="cleaning1" value="4"></td>
  </tr>
  <tr>
    <td> Tying or lacing shoes</td>
    <td><input type="radio" name="shoes" value="0"></td>
    <td><input type="radio" name="shoes" value="1"></td>
    <td><input type="radio" name="shoes" value="2"></td>
    <td><input type="radio" name="shoes" value="3"></td>
    <td><input type="radio" name="shoes" value="4"></td>
  </tr>
  <tr>
    <td> Sleeping</td>
    <td><input type="radio" name="sleep" value="0"></td>
    <td><input type="radio" name="sleep" value="1"></td>
    <td><input type="radio" name="sleep" value="2"></td>
    <td><input type="radio" name="sleep" value="3"></td>
    <td><input type="radio" name="sleep" value="4"></td>
  </tr>
  <tr>
    <td> Laundering cloths (e.g. washing, ironing, folding)</td>
    <td><input type="radio" name="laundry" value="0"></td>
    <td><input type="radio" name="laundry" value="1"></td>
    <td><input type="radio" name="laundry" value="2"></td>
    <td><input type="radio" name="laundry" value="3"></td>
    <td><input type="radio" name="laundry" value="4"></td>
  </tr>
  <tr>
    <td>Opening a jar</td>
    <td><input type="radio" name="jar" value="0"></td>
    <td><input type="radio" name="jar" value="1"></td>
    <td><input type="radio" name="jar" value="2"></td>
    <td><input type="radio" name="jar" value="3"></td>
    <td><input type="radio" name="jar" value="4"></td>
  </tr>
  <tr>
    <td> Throwing a ball </td>
    <td><input type="radio" name="ball" value="0"></td>
    <td><input type="radio" name="ball" value="1"></td>
    <td><input type="radio" name="ball" value="2"></td>
    <td><input type="radio" name="ball" value="3"></td>
    <td><input type="radio" name="ball" value="4"></td>
  </tr>
  <tr>
    <td> Carrying a small suitcase with affected limb </td>
    <td><input type="radio" name="carrying" value="0"></td>
    <td><input type="radio" name="carrying" value="1"></td>
    <td><input type="radio" name="carrying" value="2"></td>
    <td><input type="radio" name="carrying" value="3"></td>
    <td><input type="radio" name="carrying" value="4"></td>
  </tr>
</tbody>
</table>

<output id="the-Sum"> total = 0 </output>
</form>
<script>
    const
  theForm         = document.querySelector('#the-Form'),
  theTotal        = document.querySelector('#the-Sum'),
  List_RadioGroup = [ 'household', 'hobbies', 'groceryw', 'groceryd', 'grooming', 'pushing', 'food', 'driving', 'cleaning', 'dressing', 'dbuttons', 'appliance', 'doors', 'cleaning1', 'shoes', 'sleep', 'laundry', 'jar', 'ball', 'carrying']
  ;

// load init.
theTotal.textContent = ' total = 0 ';
List_RadioGroup.forEach(xElm=>{ theForm[xElm][0].checked = true; })


theForm.onchange = function()
{
  let total = 0;
  List_RadioGroup.forEach(xElm=>{
    total += parseInt( document.querySelector(`input[name="${xElm}"]:checked`).value );
  })
  theTotal.textContent = ` TOTAL OUT OF 80 = ${total} `;
}
</script>
<div><form>
<input type="button" value="Print or Save as pdf" onClick="window.print()">
</form></div>