I am working with jQuery table with some calculations and with results it gave me some warning messages and i want that if there is any warning message of right side of any row of the table then it should just show me the value "BULK" below table under id="result" and that should not reflect with another values of table.
here is the site link : http://sea.studioscue.in/test.php
<script type="text/javascript">
$(function () {
$('.pnm, .price, .subtot, .widtot, .perm, .tottot, .vol, .tot, .vols, .heights, .acts, .heitot').prop('readonly', true);
var $tblrows = $("#tblProducts tbody tr");
$tblrows.each(function (index) {
var $tblrow = $(this);
$tblrow.find('.width, .height, .carton, .perm, .act').on('change', function () {
var carton = $tblrow.find("[name=carton][type=number][min=0]").val();
var height = $tblrow.find("[name=height][type=number][min=0]").val();
var width = $tblrow.find("[name=width][type=number][min=0]").val();
var act = $tblrow.find("[name=act][type=number][min=0]").val();
var perm = $tblrow.find("[name=perm]").val();
var subTotal = parseFloat(height*0.01, 10) * parseInt(carton, 10);
var cartons =parseInt(carton, 10);
if (!isNaN(cartons)) {
$tblrow.find('.carton').val(cartons.toFixed(0));
var cartonTotal = 0;
$(".carton").each(function () {
var stval = parseInt($(this).val());
cartonTotal += isNaN(stval) ? 0 : stval;
});
$('.cartontot').val(cartonTotal.toFixed(0));
}
if (!isNaN(subTotal)) {
$tblrow.find('.perm').val(subTotal.toFixed(5));
var grandTotal = 0;
$(".perm").each(function () {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$('.grdtot').val(grandTotal.toFixed(5));
}
$('.grdtot').val(grandTotal.toFixed(5));
var length = $(this).val();
var lngthOnly = ($(this).attr('class') == 'length') ? length : false;
var width = $(this).val();
var wdthOnly = ($(this).attr('class') == 'width') ? width : false;
var height = $(this).val();
var hightOnly = ($(this).attr('class') == 'height') ? height : false;
var carton = $(this).val();
var cartonOnly = ($(this).attr('class') == 'carton') ? carton : false;
var act = $(this).val();
var actOnly = ($(this).attr('class') == 'act') ? act : false;
if (grandTotal > 7 && lngthOnly < 590 && lngthOnly < 1201 && wdthOnly < 235 && hightOnly < 238 && hightOnly < 269) {
$('#result').html('FCL');
} else if (grandTotal < 7 && lngthOnly < 590 && lngthOnly < 1201 && wdthOnly < 235 && hightOnly < 238 && hightOnly < 269) {
$('#result').html('LCL');
}
else if ((grandTotal < 7 || grandTotal > 7) && (lngthOnly > 590 || lngthOnly > 1201 || wdthOnly > 235 || hightOnly > 238))
{
$('#result').html('BULK');
}
var height = $(this).val();
var hightOnly = ($(this).attr('class') == 'height') ? height : false;
var subCalc = parseFloat(height);
if (!isNaN(subCalc)) {
$tblrow.find('.calcheight').val(subCalc.toFixed(5));
var calcTotal = 0;
$(".calcheight").each(function () {
var stval = parseFloat($(this).val());
calcTotal += isNaN(stval) ? 0 : stval;
});
$('.heitot').val(calcTotal.toFixed(5));
}
var sp = subCalc;
hightOnly = parseFloat(hightOnly);
if(hightOnly > 238 && hightOnly < 269) {
$(this).closest('tr').find('td.error').text("Cargo won't fit in 20STD and 40STD Containers, change the mode to bulk");
} else if(hightOnly > 269){
$(this).closest('tr').find('td.error').text("Cargo won't fit in 20STD, 40STD and 40HC Containers, change the mode to bulk");
} else if(hightOnly < 269) {
$(this).closest('tr').find('td.error').text('');
}
var width = $(this).val();
var wdthOnly = ($(this).attr('class') == 'width') ? width : false;
var subCalcwidth = parseFloat(width);
if (!isNaN(subCalcwidth)) {
$tblrow.find('.calcwidth').val(subCalcwidth.toFixed(5));
var calcwidthTotal = 0;
$(".calcwidth").each(function () {
var stval = parseFloat($(this).val());
calcwidthTotal += isNaN(stval) ? 0 : stval;
});
$('.widtot').val(calcwidthTotal.toFixed(5));
}
var spwidth = subCalcwidth;
wdthOnly = parseFloat(wdthOnly);
if (wdthOnly > 235) {
$(this).closest('tr').find('td.errorwidth').text("Cargo won't fit in 20STD, 40STD and 40HC Containers, change the mode to bulk");
} else if (wdthOnly < 235) {
$(this).closest('tr').find('td.errorwidth').text('');
}
});
});
});
</script>
<table id="tblProducts">
<thead>
<tr>
<td><strong>Packages</strong></td>
<td><strong>Cartons</strong></td>
<td><strong>Cm Width</strong></td>
<td><strong>Cm Height</strong></td>
<td><strong>Act Kilos</strong></td>
<td><strong>M3</strong></td>
<td><strong>Warning Messages</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" style="width:120px" /></td>
<td ><input type="number" oninput="validity.valid||(value='');" class="carton" value="0" name="carton" min="0" maxlength="5" style="width:70px"></td>
<td><input type="number" onKeyPress="return AllowOnlyNumbers(event);" oninput="validity.valid||(value='');" class="width" value="0" min="0" name="width" maxlength="5" style="width:110px"/></td>
<td><input type="number" oninput="validity.valid||(value='');" class="height" value="0" min="0" name="height" maxlength="5" style="width:110px"/></td>
<td><input type="number" onKeyPress="return AllowOnlyNumbers(event);" oninput="validity.valid||(value='');" class="act" value="0" min="0" name="act" maxlength="5" style="width:90px"/></td>
<td><input type="number" class="perm" value="" name="perm" style="width:80px"/></td>
<td class="error" style="color:red"></td> <td class="errorwidth" style="color:red"></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Second" name="pnm" style="width:120px" /></td>
<td ><input type="number" oninput="validity.valid||(value='');" class="carton" value="0" name="carton" min="0" maxlength="5" style="width:70px"></td>
<td><input type="number" onKeyPress="return AllowOnlyNumbers(event);" oninput="validity.valid||(value='');" class="width" value="0" min="0" name="width" maxlength="5" style="width:110px"/></td>
<td><input type="number" oninput="validity.valid||(value='');" class="height" value="0" min="0" name="height" maxlength="5" style="width:110px"/></td>
<td><input type="number" onKeyPress="return AllowOnlyNumbers(event);" oninput="validity.valid||(value='');" class="act" value="0" min="0" name="act" maxlength="5" style="width:90px"/></td>
<td><input type="number" class="perm" value="" name="perm" style="width:80px"/></td>
<td class="error" style="color:red"></td><td class="errorwidth" style="color:red"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><input type="number" class="cartontot" value="" name="" style="width:70px" readonly/></td>
<td></td>
<td></td>
<td></td>
<td><input type="number" class="grdtot" value="" name="" style="width:80px" readonly/></td>
</tr>
</tfoot>
Regards
Ankit
Related
I'm nearing the end of this script and I've noticed an error.
It's possible to add rows to the table, however when I try to remove them it doesn't seem to work. I'm guessing the error is somewhere in my JS. It was working before and then stopped working all of a sudden! Can someone please shed some light on it?
Thanks,
Snelly
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function calculate(object) {
var QTY = object.parentNode.parentNode.querySelector('#Qty').value;
var LINEPRICENET = object.parentNode.parentNode.querySelector("#LinePriceNet").value;
var LINEPRICEDISCOUNT = object.parentNode.parentNode.querySelector("#LinePriceDiscountInput").value;
var TAXRATE = object.parentNode.parentNode.querySelector("#TaxRate").value;
// Lineprice with discount
LinePriceAfterDiscount = (QTY * (LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT))));
object.parentNode.parentNode.querySelector('#LinePriceAfterDiscount').value = LinePriceAfterDiscount.toFixed(2);
//Line Price discount Amount
LINEPRICEDISCOUNTAMOUNT = (QTY * (LINEPRICENET) - (QTY * (LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT)))));
object.parentNode.parentNode.querySelector("#LinePriceDiscountAmount").value = LINEPRICEDISCOUNTAMOUNT.toFixed(2);
//Tax calculation
TAXAMOUNT = (LinePriceAfterDiscount * TAXRATE);
object.parentNode.parentNode.querySelector("#TaxAmount").value = TAXAMOUNT.toFixed(2);
//Calc Gross
LINEPRICEGROSSAMOUNT = (LinePriceAfterDiscount + TAXAMOUNT);
object.parentNode.parentNode.querySelector("#GrossOutput").value = LINEPRICEGROSSAMOUNT.toFixed(2);
/******Calculate totals*******/
//net
var arr = document.getElementsByName('LinePriceAfterDiscount[]');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('TotalNetAmount').value = tot;
//VAT
var arr = document.getElementsByName('TaxAmount[]');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('TotalTaxAmount').value = tot;
//Gross
var NetTotal = document.getElementById('TotalNetAmount').value;
var TaxTotal = document.getElementById('TotalTaxAmount').value;
GrossTotal = (+NetTotal + +TaxTotal);
document.getElementById('TotalGrossAmount').value = GrossTotal;
}
/******Adding and removing rows******/
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all of the items!.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
</head>
<body>
<form name="CalculationTesting">
<p>
<input type="button" value="Add Item" onClick="addRow('dataTable')" />
<input type="button" value="Remove Selected Item" onClick="deleteRow('dataTable')" />
</p>
<thead>
<tr>
<th>Qty 1|||</th>
<th>Line Price Net 2|||</th>
<th>Line Price Discount% 3|||</th>
<th>Line Price Discount Amount 4|||</th>
<th>Line Price With Discount 5|||</th>
<th>VAT Rate Amount 6|||</th>
<th>VAT Amount 7|||</th>
<th>Line Price Gross-OUTPUT 8|||</th>
</tr>
</thead>
<!-- start -->
<table id="dataTable" border="1" width="600" height="50" cellpadding="10" cellspacing="3">
<tr>
<td>
<input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
</td>
<td>
<input type="number" name="Qty[]" id="Qty" step="1" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);" />
</td>
<td>
<input type="number" name="LinePriceNet[]" step="0.01" id="LinePriceNet" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);" />
</td>
<td>
<select type="number" name="LinePriceDiscount" id="LinePriceDiscountInput" onchange="calculate(this);" />
<option value="0.00">None</option>
<option value="0.01">1%</option>
<option value="0.02">2%</option>
<option value="0.03">3%</option>
<option value="0.04">4%</option>
<option value="0.05">5%</option>
<option value="0.06">6%</option>
<option value="0.07">7%</option>
<option value="0.08">8%</option>
<option value="0.09">9%</option>
<option value="0.10">10%</option>
</select>
</td>
<td>
<input readonly="readonly" type="number" name="LinePriceDiscountAmount[]" id="LinePriceDiscountAmount">
</td>
<td>
<input readonly="readonly" type="number" name="LinePriceAfterDiscount[]" id="LinePriceAfterDiscount">
</td>
<td>
<select type="number" name="TaxRate" id="TaxRate" onchange="calculate(this);" />
<option value="0.00">Zero Rate</option>
<option value="0.20">Standard(20%)</option>
<option value="0.00">Exempt</option>
<option value="0.05">Reduced Rate</option>
<option value="0.00">Outside The Scope</option>
</select>
</td>
<td>
<input readonly="readonly" type="number" name="TaxAmount[]" id="TaxAmount">
</td>
<td>
<input readonly="readonly" type="number" name="GrossOutput[]" id="GrossOutput">
</td>
</tr>
</table>
<table>
<tr>
<td><label>Net Amount</label>
<input readonly="readonly" type="number" name="TotalNetAmount[]" id="TotalNetAmount">
</td>
</tr>
<tr>
<td><label>VAT Amount</label>
<input readonly="readonly" type="number" name="TotalTaxAmount[]" id="TotalTaxAmount">
</td>
</tr>
<tr>
<td><label>Gross Amount</label>
<input readonly="readonly" type="number" name="TotalGrossAmount[]" id="TotalGrossAmount">
</td>
</tr>
</table>
</form>
</body>
</html>
Here are the code to work:
function deleteRow(tableID) {
debugger;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0].nextElementSibling;
if (chkbox != null && chkbox.checked) {
if (rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all of the items!.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
For some reason childNodes[0] is text and childNodes[1] is the input you're looking for.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function calculate(object) {
var QTY = object.parentNode.parentNode.querySelector('#Qty').value;
var LINEPRICENET = object.parentNode.parentNode.querySelector("#LinePriceNet").value;
var LINEPRICEDISCOUNT = object.parentNode.parentNode.querySelector("#LinePriceDiscountInput").value;
var TAXRATE = object.parentNode.parentNode.querySelector("#TaxRate").value;
// Lineprice with discount
LinePriceAfterDiscount = (QTY * (LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT))));
object.parentNode.parentNode.querySelector('#LinePriceAfterDiscount').value = LinePriceAfterDiscount.toFixed(2);
//Line Price discount Amount
LINEPRICEDISCOUNTAMOUNT = (QTY * (LINEPRICENET) - (QTY * (LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT)))));
object.parentNode.parentNode.querySelector("#LinePriceDiscountAmount").value = LINEPRICEDISCOUNTAMOUNT.toFixed(2);
//Tax calculation
TAXAMOUNT = (LinePriceAfterDiscount * TAXRATE);
object.parentNode.parentNode.querySelector("#TaxAmount").value = TAXAMOUNT.toFixed(2);
//Calc Gross
LINEPRICEGROSSAMOUNT = (LinePriceAfterDiscount + TAXAMOUNT);
object.parentNode.parentNode.querySelector("#GrossOutput").value = LINEPRICEGROSSAMOUNT.toFixed(2);
/******Calculate totals*******/
//net
var arr = document.getElementsByName('LinePriceAfterDiscount[]');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('TotalNetAmount').value = tot;
//VAT
var arr = document.getElementsByName('TaxAmount[]');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('TotalTaxAmount').value = tot;
//Gross
var NetTotal = document.getElementById('TotalNetAmount').value;
var TaxTotal = document.getElementById('TotalTaxAmount').value;
GrossTotal = (+NetTotal + +TaxTotal);
document.getElementById('TotalGrossAmount').value = GrossTotal;
}
/******Adding and removing rows******/
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[1];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all of the items!.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
</head>
<body>
<form name="CalculationTesting">
<p>
<input type="button" value="Add Item" onClick="addRow('dataTable')" />
<input type="button" value="Remove Selected Item" onClick="deleteRow('dataTable')" />
</p>
<thead>
<tr>
<th>Qty 1|||</th>
<th>Line Price Net 2|||</th>
<th>Line Price Discount% 3|||</th>
<th>Line Price Discount Amount 4|||</th>
<th>Line Price With Discount 5|||</th>
<th>VAT Rate Amount 6|||</th>
<th>VAT Amount 7|||</th>
<th>Line Price Gross-OUTPUT 8|||</th>
</tr>
</thead>
<!-- start -->
<table id="dataTable" border="1" width="600" height="50" cellpadding="10" cellspacing="3">
<tr>
<td>
<input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
</td>
<td>
<input type="number" name="Qty[]" id="Qty" step="1" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);" />
</td>
<td>
<input type="number" name="LinePriceNet[]" step="0.01" id="LinePriceNet" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);" />
</td>
<td>
<select type="number" name="LinePriceDiscount" id="LinePriceDiscountInput" onchange="calculate(this);" />
<option value="0.00">None</option>
<option value="0.01">1%</option>
<option value="0.02">2%</option>
<option value="0.03">3%</option>
<option value="0.04">4%</option>
<option value="0.05">5%</option>
<option value="0.06">6%</option>
<option value="0.07">7%</option>
<option value="0.08">8%</option>
<option value="0.09">9%</option>
<option value="0.10">10%</option>
</select>
</td>
<td>
<input readonly="readonly" type="number" name="LinePriceDiscountAmount[]" id="LinePriceDiscountAmount">
</td>
<td>
<input readonly="readonly" type="number" name="LinePriceAfterDiscount[]" id="LinePriceAfterDiscount">
</td>
<td>
<select type="number" name="TaxRate" id="TaxRate" onchange="calculate(this);" />
<option value="0.00">Zero Rate</option>
<option value="0.20">Standard(20%)</option>
<option value="0.00">Exempt</option>
<option value="0.05">Reduced Rate</option>
<option value="0.00">Outside The Scope</option>
</select>
</td>
<td>
<input readonly="readonly" type="number" name="TaxAmount[]" id="TaxAmount">
</td>
<td>
<input readonly="readonly" type="number" name="GrossOutput[]" id="GrossOutput">
</td>
</tr>
</table>
<table>
<tr>
<td><label>Net Amount</label>
<input readonly="readonly" type="number" name="TotalNetAmount[]" id="TotalNetAmount">
</td>
</tr>
<tr>
<td><label>VAT Amount</label>
<input readonly="readonly" type="number" name="TotalTaxAmount[]" id="TotalTaxAmount">
</td>
</tr>
<tr>
<td><label>Gross Amount</label>
<input readonly="readonly" type="number" name="TotalGrossAmount[]" id="TotalGrossAmount">
</td>
</tr>
</table>
</form>
</body>
</html>
I am currently working on a college project on the GPA calculator whereby the default subjects, subjects code and credits are filled in the table by default and are editable. The students only need to fill in their expected marks for each subjects and then just simply click on a button that has been provided to view the grades and the pointers for each subject. The following code works just okay since I have not finished a large part of it yet, but there is certainly a problem while running the code. The problem is that the button for showing the grades and pointers for each subject only works on the first row of the table. Which means that it updates the grade and pointer of a subject only on the first row on the table. I have provided you with both the html file and js file to run the program and make you understand more on what I am trying to say.
JS Fiddle example: https://jsfiddle.net/onyhL6mb/
.html file:
<html>
<title> GPA Calculator </title>
<head>
<script src="test_asg3.js">
</script>
</head>
<body>
<form name="gpaCalc">
<table id="myTable" border="1"; width: "100%">
<tr>
<th>Code
<th>Subject
<th>Credit
<th>Expected Mark
<th>Grades
<th>GPA
<th>
</tr>
<tr>
<td><input type="text" name="code" value="SCJ524"></td>
<td><input type="text" name="subject" value="Object-Oriented Programming"></td>
<td><input type="text" name="credit" value="4"></td>
<td><input type="text" id="marks" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="SCJ011"></td>
<td><input type="text" name="subject" value="Software Engineering"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks1" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="SCR234"></td>
<td><input type="text" name="subject" value="Operating System"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks2" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="SCV122"></td>
<td><input type="text" name="subject" value="Web Programming"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks3" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="ENG222"></td>
<td><input type="text" name="subject" value="Advanced Academic English Skills"></td>
<td><input type="text" name="credit" value="2"></td>
<td><input type="text" id="marks4" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
<tr>
<td><input type="text" name="code" value="BIO683"></td>
<td><input type="text" name="subject" value="Structure and Functions of Proteins"></td>
<td><input type="text" name="credit" value="3"></td>
<td><input type="text" id="marks5" oninput="getMarks(this.id)"></td>
<td id = "grade"></td>
<td id = "points"></td>
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td>
</tr>
</table>
</form>
<br><input type="button" value="Add Subject" onclick="addRow('myTable')" />
<!--<input type="button" value="Calculate GPA" onclick="gpacalc()" /> -->
<!---<br><input type="submit" value="Calculate GPA" onclick="xxxxxx('yyyy')" />--->
</body>
</html>
.js file
function addRow(myTable)
{
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("");
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("");
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("");
cell7.appendChild(element7);
}
var x;
function getMarks(id)
{
x = document.getElementById(id).value;
}
function displayGrades()
{
var grade;
var gpaPoint;
if(x >= 90 && x<=100)
{
grade = "A+";
gpaPoint = 4.00;
}
else if(x >=80 && x< 90)
{
grade = "A";
gpaPoint = 4.00;
}
else if(x >=75 && x< 80)
{
grade = "A-";
gpaPoint = 3.67;
}
else if(x >=70 && x< 75)
{
grade = "B+";
gpaPoint = 3.33;
}
else if(x >=65 && x< 70)
{
grade = "B";
gpaPoint = 3.00;
}
else if(x >=60 && x< 65)
{
grade = "B-";
gpaPoint = 2.67;
}
else if(x >=55 && x< 60)
{
grade = "C+";
gpaPoint = 2.33;
}
else if(x >=50 && x< 55)
{
grade = "C";
gpaPoint = 2.00;
}
else if(x >=45 && x< 50)
{
grade = "C-";
gpaPoint = 1.67;
}
else if(x >=40 && x< 45)
{
grade = "D";
gpaPoint = 1.00;
}
else if(x < 40)
{
grade = "F";
gpaPoint = 0.00;
}
document.getElementById("grade").innerHTML = grade;
document.getElementById("points").innerHTML = gpaPoint;
}
I have posted the same question on my other account on here and updated the code using the answers suggested by the other users. However, I am not allowed to post another question on that account since the question that I have posted received "bad reviews" from the other users and hence reached my limit to post another question. Hopefully someone can come up with an idea this time to help with this project.
P/S: it works perfectly fine when i use notepad++ but it doesn't seem to work with the js fiddle example.
You cannot have HTMLElements having the same ID
Your id="grade" and id="point" is wrong.
You should generate it with and unique ID like the row count or the ID of the subject like id="grade_0" or id="grade_SCV122" and pass this variable to your function for exemple.
Edit :
You can do it this way :
Change your button onclick to this
displayGrades(this.parentElement.parentElement)
And the begining of your script like this
function displayGrades( line )
{
var grade;
var gpaPoint;
if( line && line.children && line.children.length > 0 ){
//Pure javascript
grade = line.children[0].children[0].value;
gpaPoint = line.children[3].children[0].value;
//jQuery
grade = $(line).find("input[name=code]").val();
gpaPoint = $(line).find("input[name=marks]").val();//And add the name marks to your input marks
}
UPDATE
//replace the 2 getElementsById lines by that
line.children[4].innerHTML = grade;
line.children[5].innerHTML = gpaPoint;
HTML:
<table id="tab1">
<tr id="maint">
<td style="background-color:white;"></td>
<td>słowo klucz</td>
<td>ilość wynikow google</td>
</tr>
<tr>
<td id="maint">słowo klucz</td>
<td><input type="text" name="klucz" value="" required></td>
<td><input type="number" name="wyszkiwania" value="" onblur="sumX()" onkeyup="operatorf()" id="eq"required></td>
</tr>
<tr>
<td id="maint">słowo klucz</td>
<td><input type="text" name="klucz" value=""></td>
<td><input type="number" name="wyszkiwania" value="" onblur="sumX()" onkeyup="operatorf()" id="eq"required></td>
</tr>
</table>
JS:
var wejscie = document.getElementById('eq').value;
if ( wejscie <= 100000) {
var stawka13 = 59;
var stawka46 = stawka13*0.75;
var stawka710 = stawka46*0.55;
}
else {
var stawka13 = wejscie/100000*59;
if (stawka13 > 210) {
stawka13 = 210;
}
var stawka46 = stawka13*0.75;
var stawka710 = stawka46*0.55;
}
stawka13 = Math.round(stawka13).toFixed(2);
stawka46 = Math.round(stawka46).toFixed(2);
stawka710 = Math.round(stawka710).toFixed(2);
document.getElementById('sum13').innerHTML = "";
document.getElementById('sum46').innerHTML = "";
document.getElementById('sum710').innerHTML = "";
document.getElementById('sum13').innerHTML = " "+sum13+" zł";
document.getElementById('sum46').innerHTML = " "+sum46+" zł";
document.getElementById('sum710').innerHTML = " "+sum710+" zł";
I would like to get an sum of it but with this eq.
I try arr etc but aint work "properly" as I want.
My target is just sum all of it with all math in it.
I'm not allowed to add jq to it so it is impotant to stay on meta.
I am looking to get the sum of these 4 different values without query through a the radio buttons.
Here my javascript and html, once I click on submit, 0 appears in the total field, thank you for your help!
<!DOCTYPE html>
<html>
<body>
<script>
function checkRadio() {
var selectedAge="";
var selectedBmi="";
var selectedDiabete="";
var description="";
var len = document.row.length;
var i;
function init(){
for (i = 0; i<len; i++) {
if (document.row[i].value);
break;
}
if (selectedAge == "") {
document.getElementByid("radio_error").innnerHTML = "no option selected";
return false
}
else {
document.getElementById("radio_error").innerHTML = "";
return true;
}
}
init();
}
</script>
<script>
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var val3 = parseInt(document.getElementById("value3").value);
var val4 = parseInt(document.getElementById("value4").value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2 + val3 + val4;
}
</script>
<table>
<tr>
<th scope="col"></th>
<th scope="col">noRisk</th>
<th scope="col">lowRisk</th>
<th scope="col">mediumRisk</th>
<th scope="col">HighRisk</th>
</tr>
<tr>
<th scope="row"><div class="lefttext">How old are you?</div></th>
<td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="0"checked>1-25</td>
<td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="5">26-40</td>
<td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="8">41-60</td>
<td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="10">1-25</td>
</tr>
<tr>
<th scope="row"><div class="lefttext">What is you BMI?</div></th>
<td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="0" checked>0-25</td>
<td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="0">26-30</td>
<td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="9">31-35</td>
<td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="10">35+</td>
</tr>
<tr>
<th scope="row"><div class="lefttext">Does anybody in your family have diabetes?</div></th>
<td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="0" checked>No</td>
<td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="7">Grandparent</td>
<td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="15">Sibling</td>
<td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="15">Parent</td>
</tr>
<tr>
<th scope="row"><div class="lefttext">How would you describe your diabete</div></th>
<td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="0" checked >Low sugar</td>
<td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="0">Normal sugar</td>
<td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="7">Quite high sugar</td>
<td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="10">High sugar</td>
</tr>
</table>
<input type="button" name="Sumbit" value="Submit" onclick="javascript:addNumbers()"/>
Total = <input type="text" id="answer" name="answer" value=""/>
</body>
You have to specify that you only want the value of the checked checkboxes. You now select all the checkboxes. Try this instead:
function addNumbers()
{
var val1 = parseInt(document.querySelector('input[name = "selectedAge"]:checked').value);
var val2 = parseInt(document.querySelector('input[name = "selectedBmi"]:checked').value);
var val3 = parseInt(document.querySelector('input[name = "selectedDiabete"]:checked').value);
var val4 = parseInt(document.querySelector('input[name = "description"]:checked').value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2 + val3 + val4;
}
Here is working example.
Basically:
var sum = function(a, b) {
return a + b;
};
var getPollResult = function() {
var checkedRadioButtons = document.querySelectorAll('table input[type="radio"]:checked');
return Array.prototype.map.call(checkedRadioButtons, function(radio) { return parseInt(radio.value, 10); }).reduce(sum, 0);
};
document.getElementById("submit").addEventListener('click', function() {
document.getElementById("answer").value = getPollResult();
});
my UI - http://puu.sh/bbx5G/33953b74ea.png
I want to calculate marks of 5 papers -> input in 1st textbox and update 2nd textbox (with equivalent grade) without reload of page. That means, as I am typing, the grade textbox should be updated. I tried to run a for loop and iterate through the 5 IDs of marks and grades after hitting a submit button but it didn't seem to work. So firstly I need to make this work, and after that, I want something which will instantly updated the grades field while i type the marks.
My HTML form having tables:
<td><input type="text" id="pm1" onkeypress="validate(event)" onchange="" maxlength=3/> =
<input type="text" id="pg1" onkeypress="return inputLimiter(event)" maxlength=1/></td>
<td><input type="text" id="pm2" onkeypress="validate(event)" maxlength=3/> =
<input type="text" id="pg2" onkeypress="return inputLimiter(event)" maxlength=1/></td>
..... upto pm5 and pg5
My Javascript:
function calculate_g(){
var i = 1;
var m = 0.0;
var p = 0.0;
var g = '';
for(i = 1; i <= 5; i++)
{
m = document.getElementById("pm"+i).value;
p = (m / 80.00) * 100.00;
if(p >= 45.00 && p <= 49.99) { g = 'P'; }
if(p >= 50.00 && p <= 54.99) { g = 'E'; }
if(p >= 55.00 && p <= 59.99) { g = 'D'; }
if(p >= 60.00 && p <= 69.99) { g = 'C'; }
if(p >= 70.00 && p <= 74.99) { g = 'B'; }
if(p >= 75.00 && p <= 79.99) { g = 'A'; }
if(p >= 80.00) { g = 'O'; }
document.getElementById("pg"+i).value = g;
}
}
To update the fields without a page reload, you can structure your code like so, and expand it as needed for more inputs. You can do the validation on form submit or on keyup, whichever is easier for you:
JSFIDDLE: http://jsfiddle.net/biz79/fesjejnp/
<table>
<tr><td>
ESE1<input type="text" id="pm1" onkeyup="calc()" maxlength=3/> =
PR1<input type="text" id="pg1" maxlength=1/ class="pipe" readonly>
</td></tr>
<tr><td>
ESE2<input type="text" id="pm2" onkeyup="calc()" maxlength=3/> =
PR2<input type="text" id="pg2" maxlength=1/ class="pipe" readonly></td></tr>
</table>
<script>
function calc() {
var m;
var p = 0.0;
var g = '';
for (var i = 1; i < 3; i++) {
m = document.getElementById("pm" + i).value;
g = getGrade(p,m);
document.getElementById("pg" + i).value = g;
}
}
function getGrade(p,m) {
var g;
p = (m / 80.00) * 100.00;
if(p >= 45.00 && p <= 49.99) { g = 'P'; }
else if(p >= 50.00 && p <= 54.99) { g = 'E'; }
else if(p >= 55.00 && p <= 59.99) { g = 'D'; }
else if(p >= 60.00 && p <= 69.99) { g = 'C'; }
else if(p >= 70.00 && p <= 74.99) { g = 'B'; }
else if(p >= 75.00 && p <= 79.99) { g = 'A'; }
else if(p >= 80.00) { g = 'O'; }
else { g = 'X'; }
return g;
}
</script>
try this it will solve all requirements
JSFIDDLE Link: http://jsfiddle.net/8fkkqvt8/
`
<table border="2">
<tr>
<td><input type="text" id="pm1" onkeyup="calculate_g()" onchange="" maxlength=3/> =
<input type="text" id="pg1" disabled="disabled"/></td>
<td><input type="text" id="pm2" onkeypress="validate(event)" maxlength=3/> =
<input type="text" id="pg2" onkeypress="return inputLimiter(event)" maxlength=1/></td>
</tr>
</table>
<script>
function calculate_g(){
var i = 1;
var m = 0.0;
var p = 0.0;
var g = '';
for(i = 1; i <= 2; i++){
m = document.getElementById("pm"+i).value;
p = (m / 80.00) * 100.00;
if(p >= 45.00 && p <= 49.99) { g = 'P'; }
if(p >= 50.00 && p <= 54.99) { g = 'E'; }
if(p >= 55.00 && p <= 59.99) { g = 'D'; }
if(p >= 60.00 && p <= 69.99) { g = 'C'; }
if(p >= 70.00 && p <= 74.99) { g = 'B'; }
if(p >= 75.00 && p <= 79.99) { g = 'A'; }
if(p >= 80.00) { g = 'O'; }
document.getElementById("pg"+i).value = g;
}
}
</script>
`
<table>
<tr>
<td>
<b>
ESE1
</b>
</td>
<td>
<input type="text" class="grade" size="5" maxlength="5" value="0" />
</td>
<td>
<b>
= PR1
</b>
</td>
<td>
<input type="text" class="letter" size="5" maxlength="5" value="X" />
</td>
</tr>
<tr>
<td>
<b>
ESE2
</b>
</td>
<td>
<input type="text" class="grade" size="5" maxlength="5" value="0" />
</td>
<td>
<b>
= PR2
</b>
</td>
<td>
<input type="text" class="letter" size="5" maxlength="5" value="X" />
</td>
</tr>
<tr>
<td>
<b>
ESE3
</b>
</td>
<td>
<input type="text" class="grade" size="5" maxlength="5" value="0" />
</td>
<td>
<b>
= PR3
</b>
</td>
<td>
<input type="text" class="letter" size="5" maxlength="5" value="X" />
</td>
</tr>
<tr>
<td>
<b>
ESE4
</b>
</td>
<td>
<input type="text" class="grade" size="5" maxlength="5" value="0" />
</td>
<td>
<b>
= PR4
</b>
</td>
<td>
<input type="text" class="letter" size="5" maxlength="5" value="X" />
</td>
</tr>
<tr>
<td>
<b>
ESE5
</b>
</td>
<td>
<input type="text" class="grade" size="5" maxlength="5" value="0" />
</td>
<td>
<b>
= PR5
</b>
</td>
<td>
<input type="text" class="letter" size="5" maxlength="5" value="X" />
</td>
</tr>
Use jQuery .each function
$(function() {
var letter = (e) => (e >= 80) ? 'O' :
(e >= 75) ? 'A' :
(e >= 70) ? 'B' :
(e >= 60) ? 'C' :
(e >= 55) ? 'D' :
(e >= 50) ? 'E' :
(e >= 45) ? 'P' : 'X';
$('.grade').keyup(function(e) {
$('.grade').each(function(index) {
var val = parseFloat($('.grade:eq(' + index + ')').val()) * 1.25 || 0;
$('.letter:eq(' + index + ')').val(letter(val));
});
});
});
http://jsfiddle.net/0mjsgpc3/7/