Form response calculation

Form response calculation - javascript

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

<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 (0)</td>
<td>Quite a Bit of Difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>A Little bit of Difficulty (3)</td>
<td>No Difficulty (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>

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}">☐</label>`; // not checked
newCell.innerHTML += `<label for="R-${iLine}-${i}">☑</label>`; // checked
newCell.innerHTML += `<label for="R-${iLine}-${i}">✔</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 (0)</td>
<td>Quite a bit of difficulty (1)</td>
<td>Moderate Difficulty (2)</td>
<td>Little Difficulty (3)</td>
<td>No Difficulty (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>

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/

Related

Errors with freeze table header - HTML [duplicate]

This question already has answers here:
How to set tbody height with overflow scroll
(16 answers)
Closed 2 years ago.
I am trying to enter entries in table inputs for my inventory website. I want to freeze the headers of each column and tried doing it with this -> Freeze the top row for an html table only (Fixed Table Header Scrolling)
window.onload = function(){
var to_show = '';
for(var i = 1 ; i < 50 ; i++){
to_show += '<tr><td><input type="text" autocomplete="off" id="product_name_'+ i +'" name="product_name_'+i+'" onkeyup="productSearch(this.value, '+i+')" tabindex="-1" style="font-size:larger;"></td>';
to_show += '<td><input type="text" autocomplete="off" id="location_'+ i +'" name="location_'+ i +'" onkeyup="productSearch(this.value, '+ i +')" tabindex="-1" style="font-size:larger;"></td></tr>';
}
document.getElementById('addInside_tr_20').innerHTML = to_show;
}
#import url("https://fonts.googleapis.com/css?family=Montserrat:300,400|Oswald:200,300,400&display=swap");
:root {
--purple-theme: #091428;
--lightpurple-theme: #0f3a41;
--gray-bg-heading: #b8b8b8;
--gray-bg-sidebar: #dee3e7;
--lightgreen-theme: #65ffce;
--green-theme: #46b692;
--red-theme: #f75b54;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px 0px 10px 10px;
background: var(--lightpurple-theme);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--green-theme);
border-radius: 0 0 10px 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--lightgreen-theme);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::-moz-selection {
/* Code for Firefox */
color: var(--purple-theme);
background: var(--green-theme);
}
::selection {
color: var(--purple-theme);
background: var(--green-theme);
}
input:focus,
option:focus,
select:focus {
outline-color: var(--lightgreen-theme);
}
body {
height: 100%;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
table,
select,
input,
a {
color: whitesmoke;
}
input {
width: 100%;
line-height: 5px;
font-size: 10px;
}
input[type="text"],
input[type="url"],
input[type="number"] {
height: 30px;
border: 1px solid var(--green-theme);
background-color: transparent;
color: whitesmoke;
font-size: 15px;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid var(--green-theme);
background-color: var(--green-theme);
color: var(--purple-theme);
text-decoration-style: bold;
font-size: 15px;
border-radius: 0px 15px 15px 0px;
}
/* ------grid container------ */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
}
input[type="date"] {
height: 100%;
}
.grid_container {
display: grid;
grid-template-columns: repeat(auto, 1fr);
grid-gap: 10px;
padding: 10px;
margin: 0 auto;
color: whitesmoke;
}
.grid {
background-color: var(--purple-theme);
border: 1px solid lightgrey;
padding: 20px;
}
.inside > span {
font-family: "Oswald", sans-serif;
font-weight: 400;
font-size: 18px;
}
.item1 {
grid-column: 1 / 3;
}
.item2 {
grid-column: 3 / 5;
}
.item3 {
grid-column: 5 / 7;
}
.item4 {
grid-column: 7 / 9;
}
.item5 {
grid-column: 1 / 9;
}
.inside {
padding: 0;
padding-bottom: 10px;
border: none;
}
.item2 {
grid-column: 1 / 9;
grid-row: 1 / 5;
}
.inside input[type="text"] {
width: 200px;
}
.item2 select,
.item2 option {
width: 100%;
height: 30px;
background-color: var(--purple-theme);
border: 1px solid var(--green-theme);
text-align: center;
}
.item2 select option {
background: var(--purple-theme);
}
.item2 table {
width: 100%;
text-align: center;
margin-top: 20px;
font-size: 20px;
}
.details table:nth-child(1) {
margin-top: -20px;
}
.details {
margin-top: -20px;
}
.item2 th {
background-color: var(--green-theme);
color: var(--purple-theme);
padding: 15px;
}
.item2 a {
text-decoration: underline;
}
/* main edit here start */
#text-area td:nth-child(1) {
width: 80%;
}
#text-area td:nth-child(2) {
width: 20%;
}
#text-area thead th:nth-child(1) {
width: 80%;
}
#text-area thead th:nth-child(2) {
width: 20%;
}
#text-area thead {
display: block;
}
#text-area tbody {
height: 440px;
display: block;
overflow: auto;
width: 100%;
}
#text-area input {
width: 100%;
}
#text-area input {
border: none;
}
#text-area {
border: 1px solid var(--green-theme);
}
#text-area tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
#text-area td:nth-child(4) {
border-right: none;
}
#text-area td {
border-right: 1px solid var(--green-theme);
}
/* main edit here ends */
.item2 .inside table * {
padding-bottom: 20px;
}
.suggestion {
position: absolute;
background-color: var(--purple-theme);
font-size: smaller;
cursor: pointer;
}
.suggestion_i:hover {
color: var(--purple-theme);
background-color: var(--green-theme);
}
.suggestion_i {
cursor: pointer;
text-align: center;
text-justify: center;
padding: 10px 10px -5px 10px;
}
#sorted_div {
background-color: var(--purple-theme);
/*position:absolute;*/
top: 123px;
}
#sorted_div tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
<div class="grid_container">
<div class="grid item2">
<div class="inside" id="topTableID">
<form action="php/invoiceFetch.php" method="post" enctype="multipart/form-data" id='myForm' onkeypress="return event.keyCode != 13;">
<table>
<tr>
<td><label for="">Location :</label></td>
<td><input type="text" autocomplete="off" name="invoice_name" id="invoice_name" onchange="invoiceSpliter()" onkeyup="customerSearch(this.value)" style="width: 500;"></td>
<td><label>Product Suggestion : </label></td>
<td>
<div id="product_suggestion" class="suggestion"></div>
</td>
</tr>
<tr>
<td>
<div id="suggestion" class="suggestion"></div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="details">
<table id="text-area">
<thead>
<tr>
<th><label>Product Name</label></th>
<th><label>Current Locations</label></th>
</tr>
</thead>
<tbody id="addInside_tr_20">
<!--there will be some rows added here -->
</tbody>
</table>
<table>
<tr>
<td><input type="reset" value="Reset" tabindex="-1"></td>
<td><input type="button" onclick="document.getElementById('myModal').style.display = 'block';" value="Submit"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
You can check the code on [codepen]{https://codepen.io/zaidi2293/pen/WNwmJrP} (Ignore most of the css as they are just to replicate what I had so that I don't miss something out)
(Sorry for the extensive code length) The Problem is the "thead" is not aligned with "tbody" as in column perspective because of overflow in vertical direction. I've asked this question before but that doesn't seem to work for me. Also, there will be some more columns added in the future. No custom size width answers please

You may reset the table-layout to fixed, turn tr into tables and apply the width to each cells, then add a 1.2em padding or margin right on thead (average width of a scrollbar).
answer inspired from How to set tbody height with overflow scroll and probably a duplicate.
table {
border: 1px solid;
}
tr {
display: table;
table-layout: fixed;
}
#text-area {
border: 1px solid;
}
#text-area tr :nth-child(1) {
width: 15%;
}
#text-area tr :nth-child(2) {
width: 60%;
}
#text-area tr :nth-child(3) {
width: 10%;
}
#text-area tr :nth-child(4) {
width: 15%;
}
#text-area thead {
display: block;
padding-right:1.2em;
}
#text-area tbody {
height: 200px;
display: block;
overflow: auto;
}
input {
box-sizing:border-box;
min-width: 100%;
}
<table id="text-area">
<thead>
<tr>
<th><label>Barcode</label></th>
<th><label>Product Name</label></th>
<th><label>Count</label></th>
<th><label>QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS"></td>
<td><input type="text" value="4"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER"></td>
<td><input type="text" value="2"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
</tbody>
</table>

You could set input box width 100% and add pixels width to th and td, instead of percentages.,
The input box width 100% will help to set it to its parent width and remove its default width. The pixels can help to have a fixed width and alignment problems.
table{
border: 1px solid;
}
#text-area{
border: 1px solid;
}
#text-area td:nth-child(1){
width: 100px;
}
#text-area td:nth-child(2){
width: 200px;
}
#text-area td:nth-child(3){
width: 100px;
}
#text-area td:nth-child(4){
width: 100px;
}
#text-area thead th:nth-child(1){
width: 100px;
}
#text-area thead th:nth-child(2){
width: 200px;
}
#text-area thead th:nth-child(3){
width: 100px;
}
#text-area thead th:nth-child(4){
width: 100px;
}
#text-area thead{
display:block;
}
#text-area tbody{
height:200px;
display:block;
overflow:auto;
}
#text-area input{
width:100%
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>

th {
background-color: #fff;
}
th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>

Google Apps Script access values from dialog box

I followed this tutorial https://yagisanatode.com/2018/06/10/google-apps-script-getting-input-data-from-a-dialog-box-in-google-sheets/ to create a dialog box in Google Sheets and print the values. However, I'd like to feed these values into a new function. If I try to access them in line 29, the code somewhat breaks. I say 'somewhat' because it still runs until line 28, but I think it doesn't execute line 28 as I can't see anything in the log.
I also noticed that it doesn't close the dialog box automatically once I add my two new lines. I assume it has something to do with the function closeIt in testUI.html, but I can't figure out what it is as I'm new to jQuery/Javascript.
code.gs
//--GLOBALS--
var ui = SpreadsheetApp.getUi();
function onOpen(e) {
// Create menu options
ui.createAddonMenu()
.addSubMenu(ui.createMenu("Admin")
.addItem("Test", "test"))
.addToUi();
};
function test() {
//Call the HTML file and set the width and height
var html = HtmlService.createHtmlOutputFromFile("testUI")
.setWidth(450)
.setHeight(300);
//Display the dialog
var dialog = ui.showModalDialog(html, "Select the relevant module and unit");
};
function runsies(values) {
//Display the values submitted from the dialog box in the Logger.
Logger.log(values);
//I added the two lines below because I'd like to access the values, not just print them.
var valuesAcc = values[0]["orange"]
Logger.log(valuesAcc);
};
//I'd like to run another function after runsies so I can work with the values which were inputted
//into the dialogue box.
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
function form_data(){
var values = [{
"orange":$("input[name=orange]:checked").val(),
"blue":$("input[name=blue]:checked").val(),
"green":$("input[name=green]:checked").val(),
"purple":$("input[name=purple]:checked").val()
}];
google.script.run.withSuccessHandler(closeIt).runsies(values);
};
function closeIt(){
google.script.host.close()
};
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<table>
<col width="60">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<tr>
<th></th><th><strong>Unit:</strong></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
</tr>
<tr>
<th><strong>Module</strong></th>
<th><strong>n/a</strong></th>
<th><strong>1</strong></th>
<th><strong>2</strong></th>
<th><strong>3</strong></th>
<th><strong>4</strong></th>
<th><strong>5</strong></th>
<th><strong>6</strong></th>
<th><strong>7</strong></th>
<th><strong>8</strong></th>
</tr>
<tr>
<td>Orange </td>
<td><input type="radio" name="orange" value="na" checked></td>
<td><input type="radio" name="orange" value="1"></td>
<td><input type="radio" name="orange" value="2"></td>
<td><input type="radio" name="orange" value="3"></td>
<td><input type="radio" name="orange" value="4"></td>
<td><input type="radio" name="orange" value="5"></td>
<td><input type="radio" name="orange" value="6"></td>
<td><input type="radio" name="orange" value="7"></td>
<td><input type="radio" name="orange" value="8"></td>
</tr>
<tr>
<td>Blue </td>
<td><input type="radio" name="blue" value="na" checked></td>
<td><input type="radio" name="blue" value="1"></td>
<td><input type="radio" name="blue" value="2"></td>
<td><input type="radio" name="blue" value="3"></td>
<td><input type="radio" name="blue" value="4"></td>
<td><input type="radio" name="blue" value="5"></td>
<td><input type="radio" name="blue" value="6"></td>
<td><input type="radio" name="blue" value="7"></td>
<td><input type="radio" name="blue" value="8"></td>
</tr>
<tr>
<td>Green </td>
<td><input type="radio" name="green" value="na" checked></td>
<td><input type="radio" name="green" value="1"></td>
<td><input type="radio" name="green" value="2"></td>
<td><input type="radio" name="green" value="3"></td>
<td><input type="radio" name="green" value="4"></td>
<td><input type="radio" name="green" value="5"></td>
<td><input type="radio" name="green" value="6"></td>
<td><input type="radio" name="green" value="7"></td>
<td><input type="radio" name="green" value="8"></td>
</tr>
<tr>
<td>Purple </td>
<td><input type="radio" name="purple" value="na" checked></td>
<td><input type="radio" name="purple" value="1"></td>
<td><input type="radio" name="purple" value="2"></td>
<td><input type="radio" name="purple" value="3"></td>
<td><input type="radio" name="purple" value="4"></td>
<td><input type="radio" name="purple" value="5"></td>
<td><input type="radio" name="purple" value="6"></td>
<td><input type="radio" name="purple" value="7"></td>
<td><input type="radio" name="purple" value="8"></td>
</tr>
</table>
<input type="submit" value="Submit" class="action" onclick="form_data()" >
</div>
And I think I should use a later version of jQuery?

Accessing values from a Dialog is easily performed with google.script.run. Information can be found at Client To Server Communication.
Here's a couple of examples of dialog boxes that I've done:
Data Entry Dialog Created from Header Info on Spreadsheet
Simple Example

Automatic calculation from input fields

I want to construct some input forms that can calculate automatically. Provide below is my input forms.
var form = document.forms.myform,
pv1 = form.pv1,
pv2 = form.pv2,
output = form.pvtotal;
window.calculate = function () {
var p1 = parseInt(pv1.value, 10) || 0,
p2 = parseFloat(pv2.value) || 0;
output.value = (p1 + p2).toFixed(2);
};
<style>
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number]{
width: 50px;
}
</style>
<form action="" name="myform" onkeyup="calculate()">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" name="pv1"></td>
<td><input type="number" name="pv2"></td>
<td><input type="number" name="pvtotal"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
</tbody>
</table>
</form>
As you can see and try, i just provide the sum for previous stock. The main problem is I want all the column be automatic calculated except for the CURRENT STOCK column which i want this column calculated by:
(PREVIOUS STOCK - CULL - MORTALITY = CURRENT STOCK
Then, the other problem whenever i add one row below, all the script did not function anymore. I don't know why. I hope you guys can help me through this.
Below is my expected output:
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number]{
width: 50px;
}
div.scrollmenu {
overflow: auto;
}
h4 {
text-decoration: underline;
text-align: center;
line-height: 1.6;
}
<form action="dailyprod_action.php" method="post" name="myform" onkeyup="calculate()">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" name="" value="1000"></td>
<td><input type="number" name="" value="1000"></td>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="200" ></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="600" readonly></td>
<td><input type="number" name="" value="600" readonly></td>
<td><input type="number" name="" value="1200" readonly></td>
</tr>
<tr>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="4000"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="400" ></td>
<td><input type="number" name="" value="800"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="800"></td>
<td><input type="number" name="" value="1700" readonly></td>
<td><input type="number" name="" value="1700" readonly></td>
<td><input type="number" name="" value="3400" readonly></td>
</tr>
</tbody>
</table>
</form>

You can develop my sample script and try
$("#pds_v1").keyup(function(){
var pds_v1 = $("#pds_v1").val();
var pds_v2 = $("#pds_v2").val();
var total= parseInt(pds_v2) + parseInt(pds_v1);
$("#pds_sum").val(total);
});
$("#pds_v2").keyup(function(){
var pds_v1 = $("#pds_v1").val();
var pds_v2 = $("#pds_v2").val();
var total= parseInt(pds_v2) + parseInt(pds_v1);
$("#pds_sum").val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="" id="pds_v1"></td>
<td><input type="number" name="" id="pds_v2"></td>
<td><input type="number" name="" id="pds_sum"></td>
</tr>
</table>

I suggest you use JQuery as that will make your life easier, also there's not much difference between Javascript and JQuery syntax, so it'll be easy for you to learn if you know Javascript.
I moved your onkeyup event listener to the tr tag so you'll be able to do calculate() on every row. I also added this parameter on the calculate() function to get the element that fired that function and get all child from that element to change the output field of that row (the one that fired calculate() function).
Try this code below (this is only inputs for Previous Stock):
function calculate(elem) {
pv1 = $(elem).children()[0].children;
pv2 = $(elem).children()[1].children;
out = $(elem).children()[2].children;
var p1 = parseInt($(pv1).val(), 10) || 0;
var p2 = parseFloat($(pv2).val()) || 0;
$(out).val((p1 * p2).toFixed(2));
}
$('#add_field').click(function() {
$('#table_body').append(`
<tr onkeyup="calculate(this)" onchange="calculate(this)">
<td><input type="number" name="pv1" id="pv1"></td>
<td><input type="number" name="pv2" id="pv2"></td>
<td><input type="number" name="pvtotal" id="output"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
`)
})
$('#remove_field').click(function() {
var len = ($('#table_body').children()).length - 1;
$('#table_body').children()[len].remove();
})
table,
th,
td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number] {
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" name="myform">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody id="table_body">
<!-- I'm moving your event listener to the <tr> tag -->
<tr onkeyup="calculate(this)" onchange="calculate(this)">
<td><input type="number" name="pv1" id="pv1"></td>
<td><input type="number" name="pv2" id="pv2"></td>
<td><input type="number" name="pvtotal" id="output"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
</tbody>
</table>
</form>
<button type="button" id="add_field">Add Field</button>
<button type="button" id="remove_field">Remove Field</button>

Ajax updatet score from input value

I am trying to create a form with three "Likert Scale" input.
For all three input field there is totaly 10 points that can be devided on the three "Likert scale" inputs. When this score is equal to 0, the submit button should be enabled and the form can be submitted. The number of points left should be updated without having the page reloade using ajax, so the user will know how many points that are left.
I have not really figured out how to do this but I have added some pseudo code, to explain this.
$(document).ready(function(e) {
// Initial score/points
var score = 10;
document.getElementById("score").innerHTML = score;
$('input:radio').click(function() {
e.preventDefault();
// update score, based on clicked alternative value
new_score = score - alternative_clicked;
if new_score < 0:
var error = "You do not have enoght points left, choose a smaler number";
document.getElementById("error").innerHTML = error;
else if new_score === 0:
// enable submit button
else :
// update score with new_score value
});
$('input:submit').click(function() {
e.preventDefault();
// send to google spreadsheet
});
});
table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
background: blue;
}
table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
background: #fafafa;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
table.border td,
table.border th {
border: 1px solid grey;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This should be updated -->
<p><b>TOTAL POINTS LEFT:</b> <span id="score"></span></p>
<form method="post" action="/echo/html/" ajax="true">
<table class="striped-columns border">
<thead>
<tr>
<th>TEST</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alternativ 1</td>
<td><input type="radio" value="1" name="alternativ1" /></td>
<td><input type="radio" value="2" name="alternativ1" /></td>
<td><input type="radio" value="3" name="alternativ1" /></td>
<td><input type="radio" value="4" name="alternativ1" /></td>
<td><input type="radio" value="5" name="alternativ1" /></td>
</tr>
<tr>
<td>Alternativ 2</td>
<td><input type="radio" value="1" name="alternativ2" /></td>
<td><input type="radio" value="2" name="alternativ2" /></td>
<td><input type="radio" value="3" name="alternativ2" /></td>
<td><input type="radio" value="4" name="alternativ2" /></td>
<td><input type="radio" value="5" name="alternativ2" /></td>
</tr>
<tr>
<td>Alternativ 3</td>
<td><input type="radio" value="1" name="alternativ3" /></td>
<td><input type="radio" value="2" name="alternativ3" /></td>
<td><input type="radio" value="3" name="alternativ3" /></td>
<td><input type="radio" value="4" name="alternativ3" /></td>
<td><input type="radio" value="5" name="alternativ3" /></td>
</tr>
</tbody>
</table>
<br>
<input type="submit" value="Submit" />
</form>

Here is a one way to do that:
(sorry for bad indentation in the snippet. Seems it is a bit buggy feature in SO)
I use eval() so I wouldn't need to write many if/else statements.
However - eval() isn’t evil, just misunderstood.
$(document).ready(function(e) {
// Initial score/points
var score = 10;
var a1 = 0, a2 = 0, a3 = 0;
var inputs = $('input');
inputs.each(function(i) {
$(this).on('click', function() {
var clicked = $(this).closest('tr').get(0).id;
score += eval(clicked)
score -= eval(clicked + " = " + $(this).val());
$("#score").html(score);
if (score == 0 && (a1 != 0 && a2 != 0 && a3 != 0)) {
$("#submit").prop("disabled", false);
} else {
$("#submit").prop("disabled", true);
}
})
})
});
table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
background: blue;
}
table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
background: #fafafa;
}
table.border {
border-collapse: collapse;
border-spacing: 0;
}
table.border td,
table.border th {
border: 1px solid grey;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form method="post" action="/echo/html/" ajax="true">
<table class="striped-columns border">
<thead>
<tr>
<th>TEST</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr id="a1">
<td>Alternativ 1</td>
<td><input type="radio" value="1" name="alternativ1" /></td>
<td><input type="radio" value="2" name="alternativ1" /></td>
<td><input type="radio" value="3" name="alternativ1" /></td>
<td><input type="radio" value="4" name="alternativ1" /></td>
<td><input type="radio" value="5" name="alternativ1" /></td>
</tr>
<tr id="a2">
<td>Alternativ 2</td>
<td><input type="radio" value="1" name="alternativ2" /></td>
<td><input type="radio" value="2" name="alternativ2" /></td>
<td><input type="radio" value="3" name="alternativ2" /></td>
<td><input type="radio" value="4" name="alternativ2" /></td>
<td><input type="radio" value="5" name="alternativ2" /></td>
</tr>
<tr id="a3">
<td>Alternativ 3</td>
<td><input type="radio" value="1" name="alternativ3" /></td>
<td><input type="radio" value="2" name="alternativ3" /></td>
<td><input type="radio" value="3" name="alternativ3" /></td>
<td><input type="radio" value="4" name="alternativ3" /></td>
<td><input type="radio" value="5" name="alternativ3" /></td>
</tr>
</tbody>
</table>
<br>
<input id="submit" type="submit" value="Submit" disabled/>
<div id="score"> 10
</div>
</form>

How to validate that at least one checkbox is checked in each set of checkboxes

I have a large group of checkboxes that are separated by two tables. Out of the two sets of checkboxes, I want the user to be required to check at least one checkbox in both sets before submitting a form (so, based on my code, at least one checkbox under COST and one under BENEFIT). I hope this makes sense. My code is below:
<body>
<h2 align="center">Cost/Benefit Matrix</h2>
<script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>
<style type="text/css">
p
{
font-family: "Arial";
align: center;
}
h2
{
font-family: "Arial";
}
</style>
<p>
<table border="1" align="center">
<tbody>
<tr>
<th><b>COST</b></th>
<th colspan="3">Reduced Cost</th>
<th>Neutral</th>
<th colspan="3">Increased Cost</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Capital cost</td>
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
<td><input type="checkbox" id="matrix3" value="1"></td>
<td><input type="checkbox" id="matrix4" value="1"></td>
<td><input type="checkbox" id="matrix5" value="1"></td>
<td><input type="checkbox" id="matrix6" value="1"></td>
<td><input type="checkbox" id="matrix7" value="1"></td>
<td><input type="checkbox" id="matrix8" value="1"></td>
</tr>
<tr>
<td>Clinical operating cost</td>
<td><input type="checkbox" id="matrix9" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix10" value="1"></td>
<td><input type="checkbox" id="matrix11" value="1"></td>
<td><input type="checkbox" id="matrix12" value="1"></td>
<td><input type="checkbox" id="matrix13" value="1"></td>
<td><input type="checkbox" id="matrix14" value="1"></td>
<td><input type="checkbox" id="matrix15" value="1"></td>
<td><input type="checkbox" id="matrix16" value="1"></td>
</tr>
<tr>
<td>Facility operating cost</td>
<td><input type="checkbox" id="matrix17" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix18" value="1"></td>
<td><input type="checkbox" id="matrix19" value="1"></td>
<td><input type="checkbox" id="matrix20" value="1"></td>
<td><input type="checkbox" id="matrix21" value="1"></td>
<td><input type="checkbox" id="matrix22" value="1"></td>
<td><input type="checkbox" id="matrix23" value="1"></td>
<td><input type="checkbox" id="matrix24" value="1"></td>
</tr>
<tr>
<td>Energy cost</td>
<td><input type="checkbox" id="matrix25" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix26" value="1"></td>
<td><input type="checkbox" id="matrix27" value="1"></td>
<td><input type="checkbox" id="matrix28" value="1"></td>
<td><input type="checkbox" id="matrix29" value="1"></td>
<td><input type="checkbox" id="matrix30" value="1"></td>
<td><input type="checkbox" id="matrix31" value="1"></td>
<td><input type="checkbox" id="matrix32" value="1"></td>
</tr>
<br>
<br>
<table border="1" align="center">
<tbody>
<tr>
<th><b>BENEFIT</b></th>
<th colspan="3">Negative Impact</th>
<th>Neutral</th>
<th colspan="3">Positive Impact</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Patient/staff safety</td>
<td><input type="checkbox" id="matrix33" value="1"></td>
<td><input type="checkbox" id="matrix34" value="1"></td>
<td><input type="checkbox" id="matrix35" value="1"></td>
<td><input type="checkbox" id="matrix36" value="1"></td>
<td><input type="checkbox" id="matrix37" value="1"></td>
<td><input type="checkbox" id="matrix38" value="1"></td>
<td><input type="checkbox" id="matrix39" value="1"></td>
<td><input type="checkbox" id="matrix40" value="1"></td>
</tr>
<tr>
<td>Fire/life safety</td>
<td><input type="checkbox" id="matrix41" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix42" value="1"></td>
<td><input type="checkbox" id="matrix43" value="1"></td>
<td><input type="checkbox" id="matrix44" value="1"></td>
<td><input type="checkbox" id="matrix45" value="1"></td>
<td><input type="checkbox" id="matrix46" value="1"></td>
<td><input type="checkbox" id="matrix47" value="1"></td>
<td><input type="checkbox" id="matrix48" value="1"></td>
</tr>
<tr>
<td>Clinical quality of care</td>
<td><input type="checkbox" id="matrix49" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix50" value="1"></td>
<td><input type="checkbox" id="matrix51" value="1"></td>
<td><input type="checkbox" id="matrix52" value="1"></td>
<td><input type="checkbox" id="matrix53" value="1"></td>
<td><input type="checkbox" id="matrix54" value="1"></td>
<td><input type="checkbox" id="matrix55" value="1"></td>
<td><input type="checkbox" id="matrix56" value="1"></td>
</tr>
<tr>
<td>Patient/resident experience</td>
<td><input type="checkbox" id="matrix57" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix58" value="1"></td>
<td><input type="checkbox" id="matrix59" value="1"></td>
<td><input type="checkbox" id="matrix60" value="1"></td>
<td><input type="checkbox" id="matrix61" value="1"></td>
<td><input type="checkbox" id="matrix62" value="1"></td>
<td><input type="checkbox" id="matrix63" value="1"></td>
<td><input type="checkbox" id="matrix64" value="1"></td>
</tr>
<tr>
<td>Operational efficiency</td>
<td><input type="checkbox" id="matrix65" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix66" value="1"></td>
<td><input type="checkbox" id="matrix67" value="1"></td>
<td><input type="checkbox" id="matrix68" value="1"></td>
<td><input type="checkbox" id="matrix69" value="1"></td>
<td><input type="checkbox" id="matrix70" value="1"></td>
<td><input type="checkbox" id="matrix71" value="1"></td>
<td><input type="checkbox" id="matrix72" value="1"></td>
</tr>
<tr>
<td>Sustainability</td>
<td><input type="checkbox" id="matrix73" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix74" value="1"></td>
<td><input type="checkbox" id="matrix75" value="1"></td>
<td><input type="checkbox" id="matrix76" value="1"></td>
<td><input type="checkbox" id="matrix77" value="1"></td>
<td><input type="checkbox" id="matrix78" value="1"></td>
<td><input type="checkbox" id="matrix79" value="1"></td>
<td><input type="checkbox" id="matrix80" value="1"></td>
</tr>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input').not(this).prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
</script>
</tbody>
</tbody>
</p>

You could add a class (like .checkbox) to each of your checkboxes and then perform something like this before submit -
if ($(".checkbox:checked").length > 0) {
//perform submit
}
else{
alert("check at least one checkbox!");
}

You could also use ".is: for more readability.
if ( $( '.checkbox' ).is( ':checked' ) ) {
// atleast one checked
} else {
// none checked
}
Example: https://jsfiddle.net/rr3vfymy/

First of all, your HTML isn't well-formed. You should close one table element before starting a new one.
Then start by distinguishing your tables by id, or at least by class, for example:
<table id="cost-table" border="1" align="center">
and then check, if at least one is checked. If you are using jQuery, you can use something like:
$( document ).ready( function() {
// you should use id on form too, this will bug if you have more forms on your page
$( "form" ).submit( function( event ) {
if( $( "#cost-table input[type=checkbox]:checked" ).length === 0 ) {
event.preventDefault();
//alert user here
alert('You need to select at least one cost type');
}
});
});
and the same for other types.

We Keep Coding

JavaScript is the programming language of the Web.

Form response calculation - javascript

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/

Related

Errors with freeze table header - HTML [duplicate]

Google Apps Script access values from dialog box

Automatic calculation from input fields

Ajax updatet score from input value

How to validate that at least one checkbox is checked in each set of checkboxes

Categories

Resources