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);
Related
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 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.
/* user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working. */
<script>
function max(){ /* this is the function to check the input feilds and if find mistake alert the message in to an alert box */
_aa=document.getElementById("s1").value
if(_aa.length>10)
xx="name should be less then or equal to 10 characters"
else xx=""
_bb=document.getElementById("s2").value
if(_bb.length>10)
yy="last name should be less then or equal to 10 characters"
else yy=""
_cc=document.getElementById("s3").value
if(_cc.length<6)
zz="street adress should be greater then or equal to 6 characters"
else zz=""
_dd=document.getElementById("s4").value
if(isNaN(_dd)){jj="fill"}
else if(_dd.length!=5 || _dd.length!=0){jj="fill"} \\this does'nt work
else{jj=""}
alert([xx,yy,zz,jj]);
}
</script>
<html>
<head>
<title>Form</title>
</head>
<body>
<form >
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM <hr/></td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text"id="s1"/ ></td>
<td><p id="a1"></p></td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text"id="s2" / ></td>
<td><p id="a2"></p></td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text"id="s3" maxlength="" / ></td>
<td><p id="a3"></p></td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number"id="s5" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number"id="s6" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio"id="s7"value="6.75" name="bt" onclick="calculate(this.value)"/ >UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s8" value="8.55" name="bt" onclick="calculate(this.value)" / >UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s9"value="10.00" name="bt" onclick="calculate(this.value)" / >FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number"id="s10" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number"id="s11" min="" max="" / ></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number"id="s12" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio"id="s13"value="" name="bn" / >American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s14" value="" name="bn" / >Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s15"value="" name="bn" / >Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s16"value="" name="bn" / >MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s17"value="" name="bn" / >Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number"id="s18" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()" >place</button></td>
<td><input type="submit"id="s21" value="Cancel" / ></td>
</tr>
</table>
</body>
</html>
variable declaration was wrong
Declare all your element value in function start
And declare the all _aa with variable like var _aa
Don't forget to add {} in if else condition
Why is not working?
Because you are declare the _dd in if (_cc.length < 6) in else condition ._dd always null until if (_cc.length < 6) else statement execute
function max() {
var _aa = document.getElementById("s1").value
var _bb = document.getElementById("s2").value
var _cc = document.getElementById("s3").value
var _dd = document.getElementById("s4").value
if (_aa.length > 10) {
var xx = "name should be less then or equal to 10 characters"
} else {
xx = ""
}
if (_bb.length > 10) {
var yy = "last name should be less then or equal to 10 characters"
} else {
yy = "";
}
if (_cc.length < 6) {
var zz = "street adress should be greater then or equal to 6 characters"
} else {
zz = ""
}
if (isNaN(_dd)) {
var jj = "fill"
} else if (_dd.length != 5 || _dd.length != 0) {
jj = "fill length"
} else {
jj = ""
}
console.log([xx, yy, zz, jj]);
}
<form>
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM
<hr/>
</td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text" id="s1" /></td>
<td>
<p id="a1"></p>
</td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text" id="s2" /></td>
<td>
<p id="a2"></p>
</td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text" id="s3" maxlength="" /></td>
<td>
<p id="a3"></p>
</td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number" id="s5" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number" id="s6" min="" max="" /></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio" id="s7" value="6.75" name="bt" onclick="calculate(this.value)" />UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s8" value="8.55" name="bt" onclick="calculate(this.value)" />UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s9" value="10.00" name="bt" onclick="calculate(this.value)" />FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number" id="s10" min="" max="" /></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number" id="s11" min="" max="" /></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number" id="s12" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio" id="s13" value="" name="bn" />American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s14" value="" name="bn" />Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s15" value="" name="bn" />Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s16" value="" name="bn" />MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s17" value="" name="bn" />Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number" id="s18" min="" max="" /></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()">place</button></td>
<td><input type="submit" id="s21" value="Cancel" /></td>
</tr>
</table>
I would like to print this script currency format thousand separator with comma or dot with javascript.
I mean ,for example I would print 1.001,00 instead of 1001
which code should I add for this script ?
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('input').change(function(){
var linetotals = 0;
$('[name^="price"]').each(function(){
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
$(this).val(price*quantity);
linetotals += price*quantity;
});
$('[name=subtotal]').val(linetotals);
});
});
</script>
<form name="invoice form" action="saveToDatabase.java">
<table width="30%" border="1" height="30%">
<tbody>
<tr>
<td colspan="5" align="center">Customer Invoice</td>
</tr>
<tr>
<td width="5%" bgcolor="#CCCCCC">Sn.no.</td>
<td width="25%" bgcolor="#CCCCCC">Item</td>
<td width="25%" bgcolor="#CCCCCC">Unit Price(In $)</td>
<td width="20%" bgcolor="#CCCCCC">Quantity</td>
<td width="25%" bgcolor="#CCCCCC">Line Total<br>(Price * Qnty)</td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">Iphone 5S</td>
<td width="25%"><input value="400" name="unitprice1" size="4" type="text"></td>
<td width="20%"><input name="quantity1" value="2" size="2" type="text"></td>
<td width="25%"><input name="price1" value="400" size="4" type="text"></td>
</tr>
<tr>
<td width="5%">2</td>
<td width="25%">Ipad 2</td>
<td width="25%"><input value="700" name="unitprice2" size="4" disabled="" type="text"></td>
<td width="20%"><input name="quantity2" value="1" size="2" type="text"></td>
<td width="25%"><input name="price2=" value="700" size="4" type="text"></td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">mp3</td>
<td width="25%"><input value="50" name="unitprice1" size="4" disabled="" type="text"></td>
<td width="20%"><input name="quantity1" value="3" size="2" type="text"></td>
<td width="25%"><input name="price1" value="150" size="4" type="text"></td>
</tr>
<tr>
<td colspan="5" align="right">Total<input name="subtotal" value="1250" size="12" disabled="" type="text"></td>
</tr>
</tbody>
</table>
</form>
JSfiddle link
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>