Develop Reference

change event on multiple text box in a modal

I have a table and each row of the table has a checkbox, textbox and name field.
Following is the html
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
<td>Name</td>
<td><input type="text" name="factor" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
</tr>
i want to read the value as soon as it is entered in any of the text box with name = position

Please Have a look
$("input[name='position']").keyup(function() {
var valueOfInput = $(this).val(); //value
var indexOfTr = $(this).parents('tr').index(); //index
console.log(valueOfInput, '-->', indexOfTr);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="w" /></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</table>

you can use name as array and make common class name for input field...
hope it work...
$('.myclassname').on("keyup",function(){
var row_index = $(this).closest("tr").index();
// row_index = row_index-1; // if you have tr header then enable this also...
var textvalue = $("[name='position[]']").eq(row_index).val();
alert(textvalue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</table>

Selecting a Group of Radio Buttons by Clicking on Button

I wanna add on two buttons which can function as selecting all the radio buttons according to the respective type. I want the buttons to select either all Yes radio buttons or all No buttons accordingly.
I would appreciate if anyone could help me to solve this. Prefers JavaScript instead of jQuery.
function Calc() {
var arr = document.getElementsByName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
var radios = document.getElementsByName("group" + (i + 1));
for (var j = 0; j < radios.length; j++) {
var radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
//Display the total value of test points
document.getElementById('total').value = tot;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showdata" align="center"></div>
<form id="radioForm" method="get" align="center">
<table style="width:60% table-layout:fixed" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<h3>
<B>Initial (On Arrival)</B>
</h3>
<table class="table1" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>Initial (On Arrival)</td>
<!--The input box in the 'Value' column is set as below-->
<td class="cent"><input type="text" value="19" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td class="cent"><input type="radio" name="group1" value="Yes"></td>
<td class="cent"><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Drop Test (Portable Only)</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group2" value="Yes"></td>
<td class="cent"><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Power Up Test (Mobile Only)</td>
<td class="cent"><input type="text" value="0" align="center" name="qty" id="qty3" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group3" value="Yes"></td>
<td class="cent"><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>User Interface Room</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty4" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group4" value="Yes"></td>
<td class="cent"><input type="radio" name="group4" value="No"></td>
</label>
</tr>
</table>
<br><br>
<h3>
<B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group5">
<td>ATE Labview RF Testing Extreme</td>
<td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group5" value="Yes"></td>
<td class="cent"><input type="radio" name="group5" value="No"></td>
</label>
</tr>
<tr>
<label id="group6">
<td>User Interface Extreme</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group6" value="Yes"></td>
<td class="cent"><input type="radio" name="group6" value="No"></td>
</label>
</tr>
<tr>
<label id="group7">
<td>Mic Talk Internal Extreme</td>
<td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group7" value="Yes"></td>
<td class="cent"><input type="radio" name="group7" value="No"></td>
</label>
</tr>
<tr>
<label id="group8">
<td>Mic Talk External Extreme</td>
<td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" /></td>
<td class="cent"><input type="radio" name="group8" value="Yes"></td>
<td class="cent"><input type="radio" name="group8" value="No"></td>
</label>
</tr>
<tr>
<label id="group9">
<td>Desense Test</td>
<td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group9" value="Yes"></td>
<td class="cent"><input type="radio" name="group9" value="No"></td>
</label>
</tr>
<tr>
<label id="group10">
<td>Tx Stability</td>
<td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group10" value="Yes"></td>
<td class="cent"><input type="radio" name="group10" value="No"></td>
</label>
</tr>
<tr>
<label id="group11">
<td>Microphonic Test</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group11" value="Yes"></td>
<td class="cent"><input type="radio" name="group11" value="No"></td>
</label>
</tr>
</table>
<br><br>
<button type="button" name="selectYes">Select All Yes</button>
<button type="button" name="selectNo">Select All No</button>
<br><br>
</table>
</form>
<table class="resultsTbl" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
</table>

You can use the following function:
function selectAll(value) {
var elements = document.querySelectorAll("input[value=" + value + "]");
elements.forEach(function(element, index) {
element.checked = true;
});
}
function Calc() {
var arr = document.getElementsByName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
var radios = document.getElementsByName("group" + (i + 1));
for (var j = 0; j < radios.length; j++) {
var radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
//Display the total value of test points
document.getElementById('total').value = tot;
}
function selectAll(value) {
var elements = document.querySelectorAll("input[value=" + value + "]");
elements.forEach(function(element, index) {
element.checked = true;
});
}
document.getElementById("selectYes").addEventListener("click", function() {
selectAll("Yes");
});
document.getElementById("selectNo").addEventListener("click", function() {
selectAll("No");
});
<div id="showdata" align="center"></div>
<form id="radioForm" method="get" align="center">
<table style="width:60% table-layout:fixed" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<h3>
<B>Initial (On Arrival)</B>
</h3>
<table class="table1" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>Initial (On Arrival)</td>
<!--The input box in the 'Value' column is set as below-->
<td class="cent"><input type="text" value="19" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td class="cent"><input type="radio" name="group1" value="Yes"></td>
<td class="cent"><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Drop Test (Portable Only)</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group2" value="Yes"></td>
<td class="cent"><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Power Up Test (Mobile Only)</td>
<td class="cent"><input type="text" value="0" align="center" name="qty" id="qty3" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group3" value="Yes"></td>
<td class="cent"><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>User Interface Room</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty4" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group4" value="Yes"></td>
<td class="cent"><input type="radio" name="group4" value="No"></td>
</label>
</tr>
</table>
<br><br>
<h3>
<B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group5">
<td>ATE Labview RF Testing Extreme</td>
<td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group5" value="Yes"></td>
<td class="cent"><input type="radio" name="group5" value="No"></td>
</label>
</tr>
<tr>
<label id="group6">
<td>User Interface Extreme</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group6" value="Yes"></td>
<td class="cent"><input type="radio" name="group6" value="No"></td>
</label>
</tr>
<tr>
<label id="group7">
<td>Mic Talk Internal Extreme</td>
<td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group7" value="Yes"></td>
<td class="cent"><input type="radio" name="group7" value="No"></td>
</label>
</tr>
<tr>
<label id="group8">
<td>Mic Talk External Extreme</td>
<td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" /></td>
<td class="cent"><input type="radio" name="group8" value="Yes"></td>
<td class="cent"><input type="radio" name="group8" value="No"></td>
</label>
</tr>
<tr>
<label id="group9">
<td>Desense Test</td>
<td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group9" value="Yes"></td>
<td class="cent"><input type="radio" name="group9" value="No"></td>
</label>
</tr>
<tr>
<label id="group10">
<td>Tx Stability</td>
<td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group10" value="Yes"></td>
<td class="cent"><input type="radio" name="group10" value="No"></td>
</label>
</tr>
<tr>
<label id="group11">
<td>Microphonic Test</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group11" value="Yes"></td>
<td class="cent"><input type="radio" name="group11" value="No"></td>
</label>
</tr>
</table>
<br><br>
<button type="button" name="selectYes" id="selectYes">Select All Yes</button>
<button type="button" name="selectNo" id="selectNo">Select All No</button>
<br><br>
</table>
</form>
<table class="resultsTbl" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
</table>

On click of the buttons, you can call the below function which will toggle the selection of radio buttons Yes/No based on the parameters passed.
The code gets the HTML collection of all radio buttons having type='radio' and value='Yes' or value='No' using querySelectorAll, then convert the HTML element collection to array using slice. Then updates the checked property to true using Map method.
function selectAll(value){
var ele = [].slice.call(document.querySelectorAll("[type='radio'][value='" + value + "']"))
.map(function (el) { el.checked = true; });
}
function selectAll(value){
var ele = [].slice.call(document.querySelectorAll("[type='radio'][value='" + value + "']"))
.map(function (el) { el.checked = true; });
}
<div id="showdata" align="center"></div>
<form id="radioForm" method="get" align="center">
<table style="width:60% table-layout:fixed" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<h3>
<B>Initial (On Arrival)</B>
</h3>
<table class="table1" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>Initial (On Arrival)</td>
<!--The input box in the 'Value' column is set as below-->
<td class="cent"><input type="text" value="19" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td class="cent"><input type="radio" name="group1" value="Yes"></td>
<td class="cent"><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Drop Test (Portable Only)</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group2" value="Yes"></td>
<td class="cent"><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Power Up Test (Mobile Only)</td>
<td class="cent"><input type="text" value="0" align="center" name="qty" id="qty3" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group3" value="Yes"></td>
<td class="cent"><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>User Interface Room</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty4" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group4" value="Yes"></td>
<td class="cent"><input type="radio" name="group4" value="No"></td>
</label>
</tr>
</table>
<br><br>
<h3>
<B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:60%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time (Seconds)</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
</tr>
<tr>
<label id="group5">
<td>ATE Labview RF Testing Extreme</td>
<td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group5" value="Yes"></td>
<td class="cent"><input type="radio" name="group5" value="No"></td>
</label>
</tr>
<tr>
<label id="group6">
<td>User Interface Extreme</td>
<td class="cent"><input type="text" value="161" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group6" value="Yes"></td>
<td class="cent"><input type="radio" name="group6" value="No"></td>
</label>
</tr>
<tr>
<label id="group7">
<td>Mic Talk Internal Extreme</td>
<td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group7" value="Yes"></td>
<td class="cent"><input type="radio" name="group7" value="No"></td>
</label>
</tr>
<tr>
<label id="group8">
<td>Mic Talk External Extreme</td>
<td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" /></td>
<td class="cent"><input type="radio" name="group8" value="Yes"></td>
<td class="cent"><input type="radio" name="group8" value="No"></td>
</label>
</tr>
<tr>
<label id="group9">
<td>Desense Test</td>
<td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group9" value="Yes"></td>
<td class="cent"><input type="radio" name="group9" value="No"></td>
</label>
</tr>
<tr>
<label id="group10">
<td>Tx Stability</td>
<td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group10" value="Yes"></td>
<td class="cent"><input type="radio" name="group10" value="No"></td>
</label>
</tr>
<tr>
<label id="group11">
<td>Microphonic Test</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" /></td>
<td class="cent"><input type="radio" name="group11" value="Yes"></td>
<td class="cent"><input type="radio" name="group11" value="No"></td>
</label>
</tr>
</table>
<br><br>
<button type="button" name="selectYes" onclick="selectAll('Yes')">Select All Yes</button>
<button type="button" name="selectNo" onclick="selectAll('No')">Select All No</button>
<br><br>
</table>
</form>
<table class="resultsTbl" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
</table>

You can add this to your javascript
var selectYesBtn = document.getElementsByName('selectYes')[0];
var selectNoBtn = document.getElementsByName('selectNo')[0];
function check_Uncheck( radioValueAttr, check ) {
var radios = document.querySelectorAll('input[type="radio"[value="'+ radioValueAttr +'"]');
for (x in radios) {
radios[x].checked = check;
}
}
selectYesBtn.onclick = function () {
check_Uncheck("No",false);
check_Uncheck("Yes",true);
};
selectNoBtn.onclick = function () {
check_Uncheck("No",true);
check_Uncheck("Yes",false);
};
The function "check_Uncheck" works for both radios (yes/no).. passing the input value attribute("Yes"/"No") as first argument, and a boolean whether to check them or uncheck them as second argument.

HTML - Multiple Calculations in a Function

I want to add in a few formulas into a function called Calc(). I've managed to do the calculation for the total and standard hour. I need help in adding the calculations as the following formula.
Earn Hour = stdHour * Number of Tables
People = (Earn Hour / 6.6) * Number of Days
Earn Days = Number of Tables / (Number of Head Count / stdHour)
Note : Number of Tables, Number of Days and Number of Head Count are user inputs.
function findSum() {
var hour = 6.6;
var shift = 3.0;
document.getElementById('capacity').value = Math.round(hour * shift);
}
function Calc() {
//I want to add the variable of `earnHour`, `people` and `earnDays` here
let arr = document.getElementsByName('qty');
let tot = 0;
for (let i = 0; i < arr.length; i++) {
let radios = document.getElementsByName("group" + (i + 1));
for (let j = 0; j < radios.length; j++) {
let radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
document.getElementById('total').value = Math.round(tot);
var stdHour = document.getElementById('stdHour').value = ((tot * 1.15) / 60);
//I do not know how to reference the input box values from `HTML` to here.
}
<head>
<style>
<!--Table designing-->table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 40%;
text-align: center;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 2px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
text-align: center;
}
#button {
width: 200px margin: auto;
text-align: center;
margin: 10px;
}
</style>
</head>
<body>
<div id="showdata" align="center"></div>
<br/>
<br/>
<br/>
<form id="radioForm" method="get" align="center">
<td align="center">Number of Tables : <input type="text" name="tableNum"><br></td>
<td align="center">Number of Days : <input type="text" name="days"><br></td>
<td align="center">Number of Head Count : <input type="text" name="headC"><br></td>
<table style="width:70%" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<tr>
<th>Food</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td>Edit</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>On Arrival</td>
<!--The input box in the 'Edit' column is set as below-->
<td><input type="text" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td><input type="radio" name="group1" value="Yes"></td>
<td><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Food Test</td>
<td><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
<td><input type="radio" name="group2" value="Yes"></td>
<td><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Cleaniness</td>
<td><input type="text" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
<td><input type="radio" name="group3" value="Yes"></td>
<td><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>Stock</td>
<td><input type="text" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
<td><input type="radio" name="group4" value="Yes"></td>
<td><input type="radio" name="group4" value="No"></td>
</label>
</tr>
<tr>
<td>Total (seconds)</td>
<td><input type="text" name="total" id="total" /></td>
</tr>
<tr>
<td>Standard Hour</td>
<td><input type="text" name="stdHour" id="stdHour" /></td>
</tr>
<tr>
<td>Earn Hour</td>
<td><input type="text" name="earnHour" id="earnHour" /></td>
</tr>
<tr>
<td>Capacity</td>
<td><input type="text" name="capacity" id="capacity" /></td>
</tr>
<tr>
<td>People</td>
<td><input type="text" name="hc" id="hc" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td><input type="text" name="days" id="days" /></td>
</tr>
</table>
</form>
<!--End of Form-->
</br>
<div id="button" align="center"><button type="button" align="center" onClick="Calc(),findSum()">Calculate</button></div>
</body>

I believe this is the answer that you are looking for.
You were close, and could just use the .value JavaScript attribute to get the values of the user's inputs.
I also changed the inputs from type="text" to type="number" as this would solve some possible errors.
Though improvements could be made to the JavaScript below, I hope that this is understandable to you.
function findSum() {
var hour = 6.6;
var shift = 3.0;
document.getElementById('capacity').value = Math.round(hour * shift);
}
function calc() {
//I want to add the variable of `earnHour`, `people` and `earnDays` here
let arr = document.getElementsByName('qty');
let tot = 0;
for (let i = 0; i < arr.length; i++) {
let radios = document.getElementsByName("group" + (i + 1));
for (let j = 0; j < radios.length; j++) {
let radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
document.getElementById('total').value = Math.round(tot);
var stdHour = ((tot * 1.15) / 60);
document.getElementById('stdHour').value = stdHour;
var earnHour = ((tot * 1.15) / 60) * document.getElementById('numTables').value;
document.getElementById('earnHour').value = earnHour;
document.getElementById('hc').value = (earnHour / 6.6) * document.getElementById('numDays').value;
// Calculated earnDays, but unaware where you want this value to go.
var earnDays = (document.getElementById('numTables').value / (document.getElementById('numHeadCount').value /stdHour));
console.log(earnDays);
}
<!--Table designing-->
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 40%;
text-align: center;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 2px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
text-align: center;
}
#button {
width: 200px margin: auto;
text-align: center;
margin: 10px;
}
<head>
</head>
<body>
<div id="showdata" align="center"></div>
<br/>
<br/>
<br/>
<form id="radioForm" align="center">
<td align="center">Number of Tables : <input type="text" id="numTables"><br></td>
<td align="center">Number of Days : <input type="text" id="numDays"><br></td>
<td align="center">Number of Head Count : <input type="text" id="numHeadCount"><br></td>
<table style="width:70%" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<tr>
<th>Food</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td>Edit</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>On Arrival</td>
<!--The input box in the 'Edit' column is set as below-->
<td><input type="text" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td><input type="radio" name="group1" value="Yes"></td>
<td><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Food Test</td>
<td><input type="number" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
<td><input type="radio" name="group2" value="Yes"></td>
<td><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Cleaniness</td>
<td><input type="number" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
<td><input type="radio" name="group3" value="Yes"></td>
<td><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>Stock</td>
<td><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
<td><input type="radio" name="group4" value="Yes"></td>
<td><input type="radio" name="group4" value="No"></td>
</label>
</tr>
<tr>
<td>Total (seconds)</td>
<td><input type="number" name="total" id="total" /></td>
</tr>
<tr>
<td>Standard Hour</td>
<td><input type="number" name="stdHour" id="stdHour" /></td>
</tr>
<tr>
<td>Earn Hour</td>
<td><input type="number" name="earnHour" id="earnHour" /></td>
</tr>
<tr>
<td>Capacity</td>
<td><input type="number" name="capacity" id="capacity" /></td>
</tr>
<tr>
<td>People</td>
<td><input type="number" name="hc" id="hc" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td><input type="number" name="days" id="days" /></td>
</tr>
</table>
</form>
<!--End of Form-->
</br>
<div id="button" align="center"><button type="button" align="center" onClick="calc(),findSum()">Calculate</button></div>
</body>

PHP- Select all based on checkbox

So, i have a form as below.I want to select all in working when the checkbox(For All Day) is selected. Is there any way i can do it through html or should i go for php or javascript?
<form>
<table>
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>

You won't be able to do this with php, at least without reloading the page or making an Ajax request but this would be impractical. The best option is JavaScript; refer to this question, it solves your problem: How to implement "select all" check box in HTML?
Basically, all you have to do is bind an onClick event on the checkbox "All days" that triggers the JavaScript function. The function then takes the list of checkboxes, iterates through all of them, and checks them. The html (taken from the link I provided) should be similar to this:
<input type="checkbox" onClick="toggle(this)" />All days<br/>
And then the script:
function toggle(source) {
checkboxes = document.getElementsByName('x');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}

The easiest method would be to use a javascript function that would be called upon the All Day check box value changed.
Then your function would be IF checked, run through the list and check all days

Try This Using jquery
Live Demo Here
Script
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
Snippet Example Below
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="allday" id="allday"/>All Day Working Close <br>
<table>
<tr>
<td colspan="4"><tr>
<td colspan="4">
<b>Monday</b>
</td>
<td>
<input type="radio" name="mday" value="work" /></td>
<td>
<input type="radio" name="mday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Tuesday</b>
</td>
<td>
<input type="radio" name="tday" value="work" /></td>
<td>
<input type="radio" name="tday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Wednesday</b>
</td>
<td>
<input type="radio" name="wday" value="work" /></td>
<td>
<input type="radio" name="wday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Thursday</b>
</td>
<td>
<input type="radio" name="thday" value="work" /></td>
<td>
<input type="radio" name="thday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Friday</b>
</td>
<td>
<input type="radio" name="fday" value="work" /></td>
<td>
<input type="radio" name="fday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Saturday</b>
</td>
<td>
<input type="radio" name="sday" value="work" /></td>
<td>
<input type="radio" name="sday" value="close" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Sunday</b>
</td>
<td>
<input type="radio" name="suday" value="work" /></td>
<td>
<input type="radio" name="suday" />
</td>
</tr>
</table>
</form>

Use jQuery for checking/unchecking all week days based on checking/unchecking of "All days":
$(document).ready(function(){
$(':checkbox[name="day"]').click(function(){
if($(this).is(':checked')){
$("input:radio[value='work']").prop("checked", true);
} else {
$("input:radio[value='work']").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1" colspan="0" cellpadding="0">
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>

Validation errors with form

I am doing an assignment for school and it is a restaurant website. I am working on the "order online" page. I must include a table in my website so I put it in my form with all of my menu items and their cost and the total. The problem I am having is: I have each menu item wrapped in a form element in order to make my Javascript work but when I try to validate it, I get errors because my fieldset is outside of a form element and if I move it around I go from 3 errors to 150 and I just don't really understand why. Also, this is causing a problem with my reset button because the reset button is in a different form element then each menu item, and finally I can't get my grand total at the bottom working.
<!DOCTYPE html>
<html>
<head>
<title>Lefebvre-Oliver Final Assignment</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="Final2.css" media="screen">
</head>
<body>
<script type="text/javascript">
function multiply(element) {
var row = element.parentNode.parentNode;
row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}
</script>
<form id="contact-form" action="script.php" method="post">
<input type="hidden" name="redirect" value="file:///D:/Final%20Project/index.html"/>
<h1>Order Online</h1>
<fieldset>
<legend>Basic Information</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value=""/>
</li>
<li>
<label for="address">Address:</label>
<input type="text" name="address" id="address" value=""/>
</li>
<li>
<label for="pwd">City</label>
<input type="text" name="city" id="city" value=""/>
</li>
</ul>
<div>Would you like the same order as last time?</div>
<label for="yes">Yes</label>
<input type="radio" name="yes" id="yes" value="yes" checked="checked">
<label for="no">No</label>
<input type="radio" name="yes" id="no" value="no"/>
<div>Special Instructions:</div>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</fieldset>
<fieldset>
<legend>Order</legend>
<table id="OrderTable" style="width:100%">
<tr>
<th>Food Item</th>
<th>Quantity</th>
<th>Unit Price in ($)</th>
<th>Total Price in ($)</th>
</tr>
<tr>
<th>Appetizers</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Spiedini di Albicocca al Prosciutto Crudo</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="9" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Tortino di Gorgonzola</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Soup and Salads</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Zuppa di Giorno</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="5" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Minestrone Piemontese</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="5" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Zuppa de Pesce</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Insalata Mista</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Insalata Fagioli</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Pizza</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Margherita</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="10" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Sicilian</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Chicken Florentine</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Pasta</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Bucatini all'Amatriciana</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="16" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Rigatoni Alla Siciliana</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Paglia e Fieno</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="14" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Orecchiette con Rapini</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="14" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Pappardelle con Sugo di Coniglio</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="15" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Dessert</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Chocolate Zabaglione Cake</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Zuccotto</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Tira Misu</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Beverages</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Sparkling Water</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="2" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Coke, Iced Tea, Root Beer, Cream Soda</td>
<td><input name="QTY"></td>
<td><input name="PRICE" value="2" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Coffee and Brewed Decaf</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="3" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Cappuccino or Americano</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="3" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Total Cost:</td>
<td></td>
<td></td>
<td><label>Total amount</label>
<input disabled></td>
</tr>
</table>
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="reset" value="Reset"/>
</fieldset>
</form>
</body>
</html>

Use a single form element around everything and you can still access the correct inputs, relative to the row.
For example, your function could look like:
function multiply(element) {
var row = element.parentNode.parentNode;
row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}
First it gets the row that contains the three inputs, then from there it finds the TOTAL and PRICE inputs by name using querySelectorAll.
Note: querySelectorAll isn't supported by IE7 or lower but I doubt that will matter for an assignment.