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.
Related
VIEW PAGE
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="1" /><input type="hidden" name="amount[]" value="500" tabindex ="-1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="2" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="3" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="4" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="5" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
</tbody>
MY REQUIREMENT
I want to save bellowed data's to table
1. bene_id
2. Bonus ₹
3. Stipendiary ₹
I've fetch this table data form existing Beneficiary Table. So Bene_id and Stipendiary ₹ value get from that tabel. Bonus ₹ will be an input.
Now i want to save table data to the payment table.
I'm trying to post the value by array. it's working fine.
now i've an issue with the check box. i want to neglect the row value that unchecked. That means i want row value which was checkbox : checked
i'm expecting jquery for passing checkbox : checked row value to hidden input array.
As i told you in the comments section, you can use normal HTML forms to submit to the action method on your controller, but you need to modify your form a little bit, this is the easiest solution.
Despite of option one simplicity i decided to give you another approach to solve this problem, so first look at the code of HTML and JavaScript:
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody id="details">
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="2" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="3" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="4" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="5" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
</tbody>
</table>
<button id="submit">Submit</button>
<script type="text/javascript" src="<?= base_url(assets/js/jquery.min.js) ?>"></script>
<script type="text/javascript">
function jsonify(){
var rows = $('#details tr');
var a = [];
rows.each(function(){
if($(this).find('#bene_id').is(':checked'))
{
var bene_id = $(this).find('#bene_id').val();
var stipendiary = $(this).find('#amount').html();
var bonus = $(this).find('#bonus').val();
var x = {
bene_id:bene_id,
stipendiary:stipendiary,
bonus:bonus
};
a.push(x);
}
});
var c = JSON.stringify(a);
return c;
}
$(function(){
$('#submit').click(function(){
$data = jsonify();
$.ajax({
type:'POST',
url:'<?= base_url('controller/method_name') ?>',
data:{details:data},
success:function(response)
{
//if you data save successfuly, do sth here..
}
});
});
});
The following code is a PHP code of the action method on the specified controller:
public function method_name()
{
$details = json_decode($this->input->post('details'));
foreach($details as $det ){
$bene_id = $det->bene_id;
$stipendiary = $det->stipendiary;
$bonus = $det->bonus;
// your logic goes here
}
}
In this solution i didn't considered the validation and security issues, because i wanted to make it simple, so before you put it in your production server you must deal with these issues.
I hope it helps.
I have a table in which there is a radio group. There are 5 items and each item has 4 choices (the values for which are 0, 1, 2, 3). I need to not only calculate the total of all these, but also the number of Fails (value = 0). I have work js for both of these. How can I use these together? Any assistance would be greatly appreciated. Thank you.
Count Fails (value = 0):
function setRadios() {
function countFail() {
var numFail = 0;
oForm = this.form;
for (var i = 1; i <= 5; i++) {
var radgrp = document.getElementsByName('Set' + i);
for (var j = 0; j < radgrp.length; j++) {
var radio = radgrp[j];
if (radio.value == "0" && radio.checked) {
numFail++;
}
}
}
oForm.elements.numFail.value = numFail;
}
var i = 0,
input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
input.onclick = countFail;
}
onload = setRadios;
Total:
function setRadios() {
function sumRadios() {
var total = 0,
i = 1,
oForm = this.form;
while (radgrp = oForm.elements['Set' + (i++)]) {
j = radgrp.length;
do
if (radgrp[--j].checked) {
total += Number(radgrp[j].value);
break;
}
while (j);
}
oForm.elements.total.value = total;
}
var i = 0,
input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
input.onclick = sumRadios;
}
onload = setRadios;
And finally here is the form (radio group) - set up to calculate the number of fails:
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<form name="f1" method="post" name="buttons" id="f1" onsubmit="return false">
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="20%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Distinction</td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Task</td>
<td width="20%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="20%" align="center"><input id="task2" type="radio" name="Set1" value="1" /></td>
<td width="20%" align="center"><input id="task3" type="radio" name="Set1" value="2" /></td>
<td width="20%" align="center"><input id="task4" type="radio" name="Set1" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Cohesion</td>
<td width="20%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="20%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1" /></td>
<td width="20%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2" /></td>
<td width="20%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Lexis</td>
<td width="20%" align="center"><input id="lexis2" type="radio" name="Set3" value="0" required/></td>
<td width="20%" align="center"><input id="lexis3" type="radio" name="Set3" value="1" required/></td>
<td width="20%" align="center"><input id="lexis4" type="radio" name="Set3" value="2" /></td>
<td width="20%" align="center"><input id="lexis" type="radio" name="Set3" value="3" /></td>
</tr>
<tr>
<td bgcolor="#CCFFFF">Grammar</td>
<td align="center"><input id="grammar2" type="radio" name="Set4" value="0" required/></td>
<td align="center"><input id="grammar3" type="radio" name="Set4" value="1" /></td>
<td align="center"><input id="grammar4" type="radio" name="Set4" value="2" /></td>
<td align="center"><input id="grammar" type="radio" name="Set4" value="3" /></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1" /></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set4" value="2" /></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set4" value="3" /></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">numFails: <input id="numFail" type="text" name="" value="" />
</div>
</form>
There are 2 ways to do it. The first one is to add multiple event handlers to one form. Simply:
document.querySelector('#myForm').addEventListener('submit', sendForm);
document.querySelector('#myForm').addEventListener('submit', clearForm);
The second one is to create an anonymous function and call these 2 functions inside it.
document.querySelector('#myForm').addEventListener('submit', function (event) {
sendForm(event);
clearForm(event);
});
You could easily put them together like i did here:
function setRadios() {
var i = 0,
k = 0,
input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
input.onclick = countFail;
}
function countFail() {
var numFail = 0;
oForm = this.form;
for (var i = 1; i <= 5; i++) {
var radgrp = document.getElementsByName('Set' + i);
for (var j = 0; j < radgrp.length; j++) {
var radio = radgrp[j];
if (radio.value == "0" && radio.checked) {
numFail++;
}
}
}
oForm.elements.numFail.value = numFail;
sumRadios(oForm)
}
function sumRadios(oForm) {
var total = 0,
i = 1;
while (radgrp = oForm.elements['Set' + (i++)]) {
j = radgrp.length;
do
if (radgrp[--j].checked) {
total += Number(radgrp[j].value);
break;
}
while (j);
}
oForm.elements.total.value = total;
}
onload = setRadios;
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<form name="f1" method="post" name="buttons" id="f1" onsubmit="return false">
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="20%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Distinction</td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Task</td>
<td width="20%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="20%" align="center"><input id="task2" type="radio" name="Set1" value="1" /></td>
<td width="20%" align="center"><input id="task3" type="radio" name="Set1" value="2" /></td>
<td width="20%" align="center"><input id="task4" type="radio" name="Set1" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Cohesion</td>
<td width="20%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="20%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1" /></td>
<td width="20%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2" /></td>
<td width="20%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Lexis</td>
<td width="20%" align="center"><input id="lexis2" type="radio" name="Set3" value="0" required/></td>
<td width="20%" align="center"><input id="lexis3" type="radio" name="Set3" value="1" required/></td>
<td width="20%" align="center"><input id="lexis4" type="radio" name="Set3" value="2" /></td>
<td width="20%" align="center"><input id="lexis" type="radio" name="Set3" value="3" /></td>
</tr>
<tr>
<td bgcolor="#CCFFFF">Grammar</td>
<td align="center"><input id="grammar2" type="radio" name="Set4" value="0" required/></td>
<td align="center"><input id="grammar3" type="radio" name="Set4" value="1" /></td>
<td align="center"><input id="grammar4" type="radio" name="Set4" value="2" /></td>
<td align="center"><input id="grammar" type="radio" name="Set4" value="3" /></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1" /></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set4" value="2" /></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set4" value="3" /></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">numFails: <input id="numFail" type="text" name="" value="" />
<div align="center">total: <input id="total" type="text" name="" value="" />
</div>
</div>
</form>
</form>
Yes, that is the goods. Thank you so much. I did get it in the end without looking at your code (yours is MUCH better and way more elegant). I would love to hear what you think of my solution (it may not run as snippet, but it does run on my localhost). It is so gratifying when someone understands exactly what you are after.
<?php
$currentPage = $_SERVER[ "PHP_SELF" ];
?>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>Basic Report</title>
<script type="text/javascript">
function setRadios() {
function countTotals() {
var numFail = 0;
var total = 0;
oForm = this.form;
for ( var i = 1; i <= 5; i++ ) {
var radgrp = document.getElementsByName( 'Set' + i );
var radgrp1 = document.getElementsByName( 'Set' + i );
for ( var j = 0; j < 5; j++ ) {
var radio = radgrp[ j ];
if ( radio.value == "0" && radio.checked ) {
numFail++;
}
var radio1 = radgrp1[ j ];
if ( radio1.checked ) {
total += Number( radio.value );
}
}
}
oForm.elements.numFail.value = numFail;
oForm.elements.total.value = total;
}
var i = 0,
input, inputs = document.getElementById( 'f1' ).getElementsByTagName( 'input' );
while ( input = inputs.item( i++ ) )
input.onclick = countTotals;
}
onload = setRadios;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="17%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="15%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Distinction</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Excellence</td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Task</td>
<td width="15%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="17%" align="center"><input id="task2" type="radio" name="Set1" value="1"/></td>
<td width="17%" align="center"><input id="task3" type="radio" name="Set1" value="2"/></td>
<td width="17%" align="center"><input id="task4" type="radio" name="Set1" value="3"/></td>
<td width="17%" align="center"><input id="task5" type="radio" name="Set1" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Cohesion</td>
<td width="15%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="17%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1"/></td>
<td width="17%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2"/></td>
<td width="17%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3"/></td>
<td width="17%" align="center"><input id="cohesion5" type="radio" name="Set2" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Lexis</td>
<td width="15%" align="center"><input id="lexis1" type="radio" name="Set3" value="0" required/></td>
<td width="17%" align="center"><input id="lexis2" type="radio" name="Set3" value="1"/></td>
<td width="17%" align="center"><input id="lexis3" type="radio" name="Set3" value="2"/></td>
<td width="17%" align="center"><input id="lexis4" type="radio" name="Set3" value="3"/></td>
<td width="17%" align="center"><input id="lexis4" type="radio" name="Set3" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Grammar</td>
<td width="15%" align="center"><input id="grammar1" type="radio" name="Set4" value="0" required/></td>
<td width="17%" align="center"><input id="grammar2" type="radio" name="Set4" value="1"/></td>
<td width="17%" align="center"><input id="grammar3" type="radio" name="Set4" value="2"/></td>
<td width="17%" align="center"><input id="grammar4" type="radio" name="Set4" value="3"/></td>
<td width="17%" align="center"><input id="grammar5" type="radio" name="Set4" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1"/></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set5" value="2"/></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set5" value="3"/></td>
<td width="17%" align="center"><input id="grammar5" type="radio" name="Set5" value="4"/></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">NumFail: <input id="numFail" type="text" name="numFail" value=""/>
<div align="center">Total: <input id="total" type="text" name="total" value=""/>
<input type="reset" class="button1"/>
</div>
</form>
I have a situation where a few calculations were to be performed. I have created a few lines of formula to calculate the scenarios in Calc() function.
The calculations are working fine but I am having issue with the NaNoutput. When I do not input anything and click on the Calculate button, the text box shows an output of NaN. I understand that NaN indicates Not A Number but I am helpless in solving this issue.
I would want an output of 0.00 instead of NaN. Need help on this.
function Calc() {
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 = tot;
var stdHour = ((tot * 1.15) / 3600);
document.getElementById('stdHour').value = stdHour.toFixed(4);
var earnHour = ((tot * 1.15) / 3600) * document.getElementById('unitNum').value;
document.getElementById('earnHour').value = earnHour.toFixed(3);
document.getElementById('hc').value = ((earnHour / 19.8) * document.getElementById('numDays').value).toFixed(3);
var earnDays = ((document.getElementById('unitNum').value / ((document.getElementById('numHeadC').value / stdHour) * 6.6)) / 3);
document.getElementById('days').value = earnDays.toFixed(3);
document.getElementById('perday').value = ((document.getElementById('numHeadC').value / stdHour * 6.6) * 3).toFixed(1);
document.getElementById('hcperday').value = ((document.getElementById('output').value / 19.8) * stdHour).toFixed(3);
}
<h3>
<B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:60%" align="center">
<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" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group5" value="Yes" checked="checked"></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="0" align="center" name="qty" id="qty6" maxlength="6" size="4" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group6" value="Yes"></td>
<td class="cent"><input type="radio" name="group6" value="No" checked="checked"></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" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group7" value="Yes" checked="checked"></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" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group8" value="Yes" checked="checked"></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" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group9" value="Yes" checked="checked"></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" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group10" value="Yes" checked="checked"></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" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group11" value="Yes" checked="checked"></td>
<td class="cent"><input type="radio" name="group11" value="No"></td>
</label>
</tr>
</table>
<br><br>
<!---Number of units--->
<br><br>
<table class="resultsTbl">
<tr>
<th colspan="2">
<h4>Enter The Number of Units : <input type="text" id="unitNum"></h4>
</th>
</tr>
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
</table>
<br><br>
<!--Scenario 1-->
<table class="resultsTbl">
<tr>
<th colspan="2" class="scenario1"><input type="checkbox" value="select" align="center" id="check1"> Scenario 1</th>
</tr>
<tr>
<td colspan="2" class="cent">Calculate The Number of Head Count When Days Are Fixed</td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
<br><br>
<!--End of Form For Scenario 1-->
<table class="resultsTbl">
<tr>
<th colspan="2" class="scenario2"><input type="checkbox" value="select" align="center" id="check2"> Scenario 2</th>
</tr>
<tr>
<td colspan="2" class="cent">Calculate The Number of Days When Head Counts Are Fixed</td>
</tr>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
<br><br>
<table class="resultsTbl">
<tr>
<th colspan="2" class="scenario3"><input type="checkbox" value="select"> Scenario 3</th>
</tr>
<tr>
<td colspan="2" class="cent">Calculate The Number of Head Counts According to The Daily Output</td>
</tr>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>HC 2</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
<br><br><br>
<form align="center">
<div id="button"><button type="button" name="button1" onClick="Calc()" class="button button1">Calculate</button></div>
</form>
You can give your value a default value. i.e
var earnDays = ((document.getElementById('unitNum').value / ((document.getElementById('numHeadC').value / stdHour) * 6.6)) / 3) || 0.0;
The result NaN has come from division by zero at this line [ just did an indentation to spot easily ]
var earnDays = ((
document.getElementById('unitNum').value /
((document.getElementById('numHeadC').value / stdHour) *6.6)
)
/ 3 );
In chrome devtools, You can find this by putting a break point and then selecting the expression by your mouse to see the value
So, you have to code the logic to find the earnDays when document.getElementById('numHeadC').value is '' (emty string) which converts to 0.
like this as you wanted to be 0.0 :
var earnDays = 0.0;
if (document.getElementById('numHeadC').value)
earnDays = ((document.getElementById('unitNum').value / ((document.getElementById('numHeadC').value / stdHour) * 6.6)) / 3);
I'm having trouble to calculate my inputs even when I edit the default inputs. I want all the inputs to sum up when the user clicks on the selected 'Yes' radio buttons and then clicks on the 'Calculate' button in order to get the sum of inputted values. Need help on the code:
<script type="text/javascript">
function findTotal()
{
var arr = document.getElementsByName('qty');
var tot=0;
var stdHour=0;
for(var i = 0; i < arr.length; i++) //i=1/i=0
{
var radios = document.getElementsByName('group'+i);
for(var j = 0; j < radios.length; j++)
{
var radio = radios[j];
if(radio.value == "Yes" && radio.checked)
{
if(parseInt(arr[i].value))
{
tot += parseInt(arr[i].value);
}
}
}
}
document.getElementById('total').value = tot;
document.getElementById('stdHour').value = 3600/tot;
}
</script>
<!DOCTYPE html>
<html>
<head>
<style>
<!--Table designing-->
table
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%%;
align: center;
}
td, th
{
border: 1px solid #dddddd;
text-align: center;
padding: 6px;
}
tr:nth-child(even)
{
background-color: #dddddd;
}
input
{
text-align:center;
}
</style>
</head>
<!--Start of Table Developing-->
<body>
<br/>
<br/>
<br/>
<form id="radioForm" method="get" >
<table style="width:70%" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<tr>
<th>Test Points</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>Initial (On Arrival)</td>
<!--The input box in the 'Edit' column is set as below-->
<td><input onblur="findTotal()" 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>Drop Test (Portable Only)</td>
<td><input onblur="findTotal()" 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>Power Up Test (Mobile Only)</td>
<td><input onblur="findTotal()" 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>User Interface Room</td>
<td><input onblur="findTotal()" 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><B>-30 Degree C (Cold Temp)</B></td>
</tr>
<tr>
<label id="group5">
<td>ATE Labview RF Testing Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty5" maxlength="4" size="4"/></td>
<td><input type="radio" name="group5" value="Yes"></td>
<td><input type="radio" name="group5" value="No"></td>
</label>
</tr>
<tr>
<label id="group6">
<td>User Interface Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty6" maxlength="4" size="4"/></td>
<td><input type="radio" name="group6" value="Yes"></td>
<td><input type="radio" name="group6" value="No"></td>
</label>
</tr>
<tr>
<label id="group7">
<td>Mic Talk Internal Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty7" maxlength="4" size="4"/></td>
<td><input type="radio" name="group7" value="Yes"></td>
<td><input type="radio" name="group7" value="No"></td>
</label>
</tr>
<tr>
<label id="group8">
<td>Mic Talk External Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty8" maxlength="4" size="4"/></td>
<td><input type="radio" name="group8" value="Yes"></td>
<td><input type="radio" name="group8" value="No"></td>
</label>
</tr>
<tr>
<label id="group9">
<td>Desense Test</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty9" maxlength="4" size="4"/></td>
<td><input type="radio" name="group9" value="Yes"></td>
<td><input type="radio" name="group9" value="No"></td>
</label>
</tr>
<tr>
<label id="group10">
<td>Tx Stability</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty10" maxlength="4" size="4"/></td>
<td><input type="radio" name="group10" value="Yes"></td>
<td><input type="radio" name="group10" value="No"></td>
</label>
</tr>
<tr>
<label id="group11">
<td>Microphonic Test</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty11" maxlength="10" size="4"/></td>
<td><input type="radio" name="group11" value="Yes"></td>
<td><input type="radio" name="group11" value="No"></td>
</label>
</tr>
<tr>
<td><B>+60 Degree C (Hot Temp)</B></td>
</tr>
<tr>
<label id="group12">
<td>ATE Labview RF Testing Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty12" maxlength="4" size="4"/></td>
<td><input type="radio" name="group12" value="Yes"></td>
<td><input type="radio" name="group12" value="No"></td>
</label>
</tr>
<tr>
<label id="group13">
<td>User Interface Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty13" maxlength="4" size="4"/></td>
<td><input type="radio" name="group13" value="Yes"></td>
<td><input type="radio" name="group13" value="No"></td>
</label>
</tr>
<tr>
<label id="group14">
<td>Mic Talk Internal Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty14" maxlength="4" size="4"/></td>
<td><input type="radio" name="group14" value="Yes"></td>
<td><input type="radio" name="group14" value="No"></td>
</label>
</tr>
<tr>
<label id="group15">
<td>Mic Talk External Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty15" maxlength="4" size="4"/></td>
<td><input type="radio" name="group15" value="Yes"></td>
<td><input type="radio" name="group15" value="No"></td>
</label>
</tr>
<tr>
<label id="group16">
<td>Desense Test</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty16" maxlength="4" size="4"/></td>
<td><input type="radio" name="group16" value="Yes"></td>
<td><input type="radio" name="group16" value="No"></td>
</label>
</tr>
<tr>
<label id="group17">
<td>Tx Stability</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty17" maxlength="4" size="4"/></td>
<td><input type="radio" name="group17" value="Yes"></td>
<td><input type="radio" name="group17" value="No"></td>
</label>
</tr>
<tr>
<label id="group18">
<td>Microphonic Test</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty18" maxlength="4" size="4"/></td>
<td><input type="radio" name="group18" value="Yes"></td>
<td><input type="radio" name="group18" value="No"></td>
</label>
</tr>
<tr>
<td><B>Final (Ambient Room Temp)</B></td>
</tr>
<tr>
<label id="group19">
<td>Drop Test (Portable Only)</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty19" maxlength="4" size="4"/></td>
<td><input type="radio" name="group19" value="Yes"></td>
<td><input type="radio" name="group19" value="No"></td>
</label>
</tr>
<tr>
<label id="group20">
<td>ATE Labview RF Testing Room</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty20" maxlength="4" size="4"/></td>
<td><input type="radio" name="group20" value="Yes"></td>
<td><input type="radio" name="group20" value="No"></td>
</label>
</tr>
<tr>
<label id="group21">
<td>Mic Talk Internal Room</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty21" maxlength="4" size="4"/></td>
<td><input type="radio" name="group21" value="Yes"></td>
<td><input type="radio" name="group21" value="No"></td>
</label>
</tr>
<tr>
<label id="group22">
<td>Mic Talk External Room</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty22" maxlength="4" size="4"/></td>
<td><input type="radio" name="group22" value="Yes"></td>
<td><input type="radio" name="group22" value="No"></td>
</label>
</tr>
<tr>
<label id="group23">
<td>Final Mechanical Inspection</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty23" maxlength="4" size="4"/></td>
<td><input type="radio" name="group23" value="Yes"></td>
<td><input type="radio" name="group23" value="No"></td>
</label>
</tr>
<tr>
<label id="group24">
<td>Label Info Verification</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty24" maxlength="4" size="4"/></td>
<td><input type="radio" name="group24" value="Yes"></td>
<td><input type="radio" name="group24" value="No"></td>
</label>
</tr>
<tr>
<label id="group25">
<td>Gauge Checking</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty25" maxlength="4" size="4"/></td>
<td><input type="radio" name="group25" value="Yes"></td>
<td><input type="radio" name="group25" value="No"></td>
</label>
</tr>
<tr>
<label id="group26">
<td>Charging</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty26" maxlength="4" size="4"/></td>
<td><input type="radio" name="group26" value="Yes"></td>
<td><input type="radio" name="group26" value="No"></td>
</label>
</tr>
<tr>
<label id="group27">
<td>Packaging Buy Off</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty27" maxlength="4" size="4"/></td>
<td><input type="radio" name="group27" value="Yes"></td>
<td><input type="radio" name="group27" 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>VCT Capacity</td>
<td><input type="text" name="capacity" id="capacity"/></td>
</tr>
<tr>
<td>Head Count</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>
<button type="button" align="center" onClick="findTotal()">Calculate</button>
</form> <!--End of Form-->
Your quantity count does not match as you have group names starting from 1 (e.g group1). Just modify this line, and it should work.
var radios = document.getElementsByName("group" + (i+1));
I have removed quite a bit of HTML but it works: the code is below. You can just add the other sections in it will work.
I have started the count at 0: so the first section has group0 and qt0, it helps a lot when going through the arrays in the JS code. Also, I have removed all the .onblur calls, only the button click will run findTotal().
function findTotal() {
let arr = document.getElementsByName('qty');
let tot = 0;
let stdHour = 0;
for (let i = 0; i < arr.length; i++) {
let radios = document.getElementsByName('group' + i);
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 = tot;
document.getElementById('stdHour').value = 3600 / tot;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%%;
text-align: center;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 6px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
text-align: center;
}
#button {
width: 200px margin: auto;
text-align: center;
margin: 10px;
}
<form id="radioForm" method="get">
<table style="width:70%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td>Edit</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<label id="group0">
<td>Initial (On Arrival)</td>
<td><input type="text" value="20" align="center" name="qty" id="qty0" maxlength="4" size="4"></td>
<td><input type="radio" name="group0" value="Yes"></td>
<td><input type="radio" name="group0" value="No"></td>
</label>
</tr>
<tr>
<label id="group1">
<td>Drop Test (Portable Only)</td>
<td><input type="text" value="60" align="center" name="qty" id="qty1" maxlength="4" size="4"></td>
<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>Power Up Test (Mobile Only)</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>User Interface Room</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>
<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>
</table>
</form>
<div id="button"><button type="button" align="center" onClick="findTotal()">Calculate</button></div>
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>