The code below, when executed by edge shows a lot of input lag.
Steps to reproduce:
copy paste the snippit in a local html file.
It will not be reproducable from the snippit editor in stackoverflow.
open it with edge
make sure auto fill form fields are ON in edge settings/advanced . there is no need to actually have these form fields
slam your keyboard with random keys (more than 10 keys/sec)
it's a bit rude but necessary to demonstrate. On a production page where there is css, normal typing is enough to see the issue.
Not sure if it matters, Version where this issue works
Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134
You will see the input still being filled in even if you already stopped slamming the keyboard.
Workaround found but not acceptible for our situation
Disable "save form entries" option in edge. (not acceptable as we cannot force all our users to do this)
remove form element (obviously not acceptable)
<html>
<head>
</head>
<body>
<form method="post">
<div>
<div>
<table>
<tr>
<td><input class="decimal" id="OrderLines_0__AmountExcl" name="OrderLines[0].AmountExcl" type="text" value="45,00" /></td>
<td><input class="decimal" id="OrderLines_0__VAT" name="OrderLines[0].VAT" type="text" value="21,00" /></td>
<td><input class="decimal" id="OrderLines_0__Quantity" name="OrderLines[0].Quantity" type="text" value="1,00" /></td>
<td><input id="OrderLines_0__Unit" name="OrderLines[0].Unit" type="text" value="" /></td>
<td><input id="OrderLines_0__ReductionPercentage" name="OrderLines[0].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_1__AmountExcl" name="OrderLines[1].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_1__VAT" name="OrderLines[1].VAT" type="text" value="" /></td>
<td><input id="OrderLines_1__Quantity" name="OrderLines[1].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_1__Unit" name="OrderLines[1].Unit" type="text" value="" /></td>
<td><input id="OrderLines_1__ReductionPercentage" name="OrderLines[1].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_2__AmountExcl" name="OrderLines[2].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_2__VAT" name="OrderLines[2].VAT" type="text" value="" /></td>
<td><input id="OrderLines_2__Quantity" name="OrderLines[2].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_2__Unit" name="OrderLines[2].Unit" type="text" value="" /></td>
<td><input id="OrderLines_2__ReductionPercentage" name="OrderLines[2].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_3__AmountExcl" name="OrderLines[3].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_3__VAT" name="OrderLines[3].VAT" type="text" value="" /></td>
<td><input id="OrderLines_3__Quantity" name="OrderLines[3].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_3__Unit" name="OrderLines[3].Unit" type="text" value="" /></td>
<td><input id="OrderLines_3__ReductionPercentage" name="OrderLines[3].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_4__AmountExcl" name="OrderLines[4].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_4__VAT" name="OrderLines[4].VAT" type="text" value="" /></td>
<td><input id="OrderLines_4__Quantity" name="OrderLines[4].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_4__Unit" name="OrderLines[4].Unit" type="text" value="" /></td>
<td><input id="OrderLines_4__ReductionPercentage" name="OrderLines[4].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_5__AmountExcl" name="OrderLines[5].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_5__VAT" name="OrderLines[5].VAT" type="text" value="" /></td>
<td><input id="OrderLines_5__Quantity" name="OrderLines[5].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_5__Unit" name="OrderLines[5].Unit" type="text" value="" /></td>
<td><input id="OrderLines_5__ReductionPercentage" name="OrderLines[5].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_6__AmountExcl" name="OrderLines[6].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_6__VAT" name="OrderLines[6].VAT" type="text" value="" /></td>
<td><input id="OrderLines_6__Quantity" name="OrderLines[6].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_6__Unit" name="OrderLines[6].Unit" type="text" value="" /></td>
<td><input id="OrderLines_6__ReductionPercentage" name="OrderLines[6].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_7__AmountExcl" name="OrderLines[7].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_7__VAT" name="OrderLines[7].VAT" type="text" value="" /></td>
<td><input id="OrderLines_7__Quantity" name="OrderLines[7].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_7__Unit" name="OrderLines[7].Unit" type="text" value="" /></td>
<td><input id="OrderLines_7__ReductionPercentage" name="OrderLines[7].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_8__AmountExcl" name="OrderLines[8].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_8__VAT" name="OrderLines[8].VAT" type="text" value="" /></td>
<td><input id="OrderLines_8__Quantity" name="OrderLines[8].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_8__Unit" name="OrderLines[8].Unit" type="text" value="" /></td>
<td><input id="OrderLines_8__ReductionPercentage" name="OrderLines[8].ReductionPercentage" type="text" value="" /></td>
</tr>
<tr>
<td><input id="OrderLines_9__AmountExcl" name="OrderLines[9].AmountExcl" type="text" value="" /></td>
<td><input id="OrderLines_9__VAT" name="OrderLines[9].VAT" type="text" value="" /></td>
<td><input id="OrderLines_9__Quantity" name="OrderLines[9].Quantity" type="text" value="" /></td>
<td><input id="OrderLines_9__Unit" name="OrderLines[9].Unit" type="text" value="" /></td>
<td><input id="OrderLines_9__ReductionPercentage" name="OrderLines[9].ReductionPercentage" type="text" value="" /></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Edge performance profiler shows big delays on the input event
And pins it to the AutoFormFill extension which is by default enabled in Edge
Detailed overview getFormIdentifier
Detailed overview Isimple iloop
Related
I'm trying to loop through all the <td> in each <tr> in this table in order to assign a value to each <td>.
<table id="grid">
<tr>
<td><input type="text" id="1" /></td>
<td><input type="text" id="2" /></td>
<td><input type="text" id="3" /></td>
<td><input type="text" id="4" /></td>
<td><input type="text" id="5" /></td>
<td><input type="text" id="6" /></td>
<td><input type="text" id="7" /></td>
<td><input type="text" id="8" /></td>
<td><input type="text" id="9" /></td>
</tr>
<tr>
<td><input type="text" id="10" /></td>
<td><input type="text" id="11" /></td>
<td><input type="text" id="12" /></td>
<td><input type="text" id="13" /></td>
<td><input type="text" id="14" /></td>
<td><input type="text" id="15" /></td>
<td><input type="text" id="16" /></td>
<td><input type="text" id="17" /></td>
<td><input type="text" id="18" /></td>
</tr>
<tr>
<td><input type="text" id="19" /></td>
<td><input type="text" id="20" /></td>
<td><input type="text" id="21" /></td>
<td><input type="text" id="22" /></td>
<td><input type="text" id="23" /></td>
<td><input type="text" id="24" /></td>
<td><input type="text" id="25" /></td>
<td><input type="text" id="26" /></td>
<td><input type="text" id="27" /></td>
</tr>
<tr>
<td><input type="text" id="28" /></td>
<td><input type="text" id="29" /></td>
<td><input type="text" id="30" /></td>
<td><input type="text" id="31" /></td>
<td><input type="text" id="32" /></td>
<td><input type="text" id="33" /></td>
<td><input type="text" id="34" /></td>
<td><input type="text" id="35" /></td>
<td><input type="text" id="36" /></td>
</tr>
<tr>
<td><input type="text" id="37" /></td>
<td><input type="text" id="38" /></td>
<td><input type="text" id="39" /></td>
<td><input type="text" id="40" /></td>
<td><input type="text" id="41" /></td>
<td><input type="text" id="42" /></td>
<td><input type="text" id="43" /></td>
<td><input type="text" id="44" /></td>
<td><input type="text" id="45" /></td>
</tr>
<tr>
<td><input type="text" id="46" /></td>
<td><input type="text" id="47" /></td>
<td><input type="text" id="48" /></td>
<td><input type="text" id="49" /></td>
<td><input type="text" id="50" /></td>
<td><input type="text" id="51" /></td>
<td><input type="text" id="52" /></td>
<td><input type="text" id="53" /></td>
<td><input type="text" id="54" /></td>
</tr>
<tr>
<td><input type="text" id="55" /></td>
<td><input type="text" id="56" /></td>
<td><input type="text" id="57" /></td>
<td><input type="text" id="58" /></td>
<td><input type="text" id="59" /></td>
<td><input type="text" id="60" /></td>
<td><input type="text" id="61" /></td>
<td><input type="text" id="62" /></td>
<td><input type="text" id="63" /></td>
</tr>
<tr>
<td><input type="text" id="64" /></td>
<td><input type="text" id="65" /></td>
<td><input type="text" id="66" /></td>
<td><input type="text" id="67" /></td>
<td><input type="text" id="68" /></td>
<td><input type="text" id="69" /></td>
<td><input type="text" id="70" /></td>
<td><input type="text" id="71" /></td>
<td><input type="text" id="72" /></td>
</tr>
<tr>
<td><input type="text" id="73" /></td>
<td><input type="text" id="74" /></td>
<td><input type="text" id="75" /></td>
<td><input type="text" id="76" /></td>
<td><input type="text" id="77" /></td>
<td><input type="text" id="78" /></td>
<td><input type="text" id="79" /></td>
<td><input type="text" id="80" /></td>
<td><input type="text" id="81" /></td>
</tr>
</table>
So far I've tried this:
const grid = document.getElementById("grid");
const row = grid.getElementsByTagName('tr');
const cell = row.getElementsByTagName('td');
for(row in grid) {
for(cell in row) {
cell.textContent = "1";
}
}
But it errors with TypeError: row.getElementsByTagName is not a function.
How can I fix this?
You can use document.querySelectorAll('td') to get all of your cells and then you can loop through it by using forEach for example.
// looping through the inputs inside the cells
// to demonstrate that it works I log the id of the input field
document.querySelectorAll('td > input').forEach((x) => {
console.log(x.id)
})
// here looping through the cells
document.querySelectorAll('td').forEach((x) => {
console.log(x)
})
<table id="grid">
<tr>
<td><input type="text" id="1" /></td>
<td><input type="text" id="2" /></td>
<td><input type="text" id="3" /></td>
<td><input type="text" id="4" /></td>
<td><input type="text" id="5" /></td>
<td><input type="text" id="6" /></td>
<td><input type="text" id="7" /></td>
<td><input type="text" id="8" /></td>
<td><input type="text" id="9" /></td>
</tr>
<tr>
<td><input type="text" id="10" /></td>
<td><input type="text" id="11" /></td>
<td><input type="text" id="12" /></td>
<td><input type="text" id="13" /></td>
<td><input type="text" id="14" /></td>
<td><input type="text" id="15" /></td>
<td><input type="text" id="16" /></td>
<td><input type="text" id="17" /></td>
<td><input type="text" id="18" /></td>
</tr>
<tr>
<td><input type="text" id="19" /></td>
<td><input type="text" id="20" /></td>
<td><input type="text" id="21" /></td>
<td><input type="text" id="22" /></td>
<td><input type="text" id="23" /></td>
<td><input type="text" id="24" /></td>
<td><input type="text" id="25" /></td>
<td><input type="text" id="26" /></td>
<td><input type="text" id="27" /></td>
</tr>
<tr>
<td><input type="text" id="28" /></td>
<td><input type="text" id="29" /></td>
<td><input type="text" id="30" /></td>
<td><input type="text" id="31" /></td>
<td><input type="text" id="32" /></td>
<td><input type="text" id="33" /></td>
<td><input type="text" id="34" /></td>
<td><input type="text" id="35" /></td>
<td><input type="text" id="36" /></td>
</tr>
<tr>
<td><input type="text" id="37" /></td>
<td><input type="text" id="38" /></td>
<td><input type="text" id="39" /></td>
<td><input type="text" id="40" /></td>
<td><input type="text" id="41" /></td>
<td><input type="text" id="42" /></td>
<td><input type="text" id="43" /></td>
<td><input type="text" id="44" /></td>
<td><input type="text" id="45" /></td>
</tr>
<tr>
<td><input type="text" id="46" /></td>
<td><input type="text" id="47" /></td>
<td><input type="text" id="48" /></td>
<td><input type="text" id="49" /></td>
<td><input type="text" id="50" /></td>
<td><input type="text" id="51" /></td>
<td><input type="text" id="52" /></td>
<td><input type="text" id="53" /></td>
<td><input type="text" id="54" /></td>
</tr>
<tr>
<td><input type="text" id="55" /></td>
<td><input type="text" id="56" /></td>
<td><input type="text" id="57" /></td>
<td><input type="text" id="58" /></td>
<td><input type="text" id="59" /></td>
<td><input type="text" id="60" /></td>
<td><input type="text" id="61" /></td>
<td><input type="text" id="62" /></td>
<td><input type="text" id="63" /></td>
</tr>
<tr>
<td><input type="text" id="64" /></td>
<td><input type="text" id="65" /></td>
<td><input type="text" id="66" /></td>
<td><input type="text" id="67" /></td>
<td><input type="text" id="68" /></td>
<td><input type="text" id="69" /></td>
<td><input type="text" id="70" /></td>
<td><input type="text" id="71" /></td>
<td><input type="text" id="72" /></td>
</tr>
<tr>
<td><input type="text" id="73" /></td>
<td><input type="text" id="74" /></td>
<td><input type="text" id="75" /></td>
<td><input type="text" id="76" /></td>
<td><input type="text" id="77" /></td>
<td><input type="text" id="78" /></td>
<td><input type="text" id="79" /></td>
<td><input type="text" id="80" /></td>
<td><input type="text" id="81" /></td>
</tr>
</table>
I need to provide option to user to enter multiple rows of data in form and save. I have html something like this.
<form id="books">
<table>
<tbody>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
<tr>
<td><input name="bookName" type="text" /></td>
<td><input name="author" type="text" /></td>
<td><input name="publisher" type="text" /></td>
<td><input name="year" type="text" /></td>
</tr>
</tbody>
</table>
<button id="AddRow">Add Row</button>
<button id="SubmitBook">Save</button>
</form>
I want to save data in JSON thru PHP. Can someone help how can I serialize my form to POST like below, let me know if I have to use HTML in different way to make this easier (I tried finding solution, couldn't find anyone fitting my requirement):
{
"books": [
{"bookName":"html", "author":"xxxxx", "publisher":"johnWiley", "year":"2010"},
{"bookName":"CSS", "author":"yyyyy", "publisher":"johnWiley", "year":"2011"},
{"bookName":"javaScript", "author":"aaaa", "publisher":"johnWiley", "year":"2012"},
{"bookName":"PHP", "author":"bbbbb", "publisher":"johnWiley", "year":"2013"}
]
}
var arr = [];
$('#SubmitBook').click(function() {
var tablerow = $('#table').find('tr');
tablerow.each(function() {
var bookname = $(this).find('td .bookName').val();
var author = $(this).find('td .author').val()
var publisher = $(this).find('td .publisher').val()
var year = $(this).find('td .year').val()
arr.push({
bookname: bookname,
author: author,
publisher: publisher,
year: year
})
})
console.log(JSON.stringify(arr))
})
Try like this
DEMO
I have a table
<table>
<tbody>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
</tbody>
</table>
How can I update the total input field when a change in quantity or price happens?
I have thought of something like
$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
$(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});
but it seems a bit unhandy.
You can use:
$('table tbody tr td').find('input').keyup(function() {
var total=0;
total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
$(this).closest('tr').find('input:last').val(total)
});
Working Demo
Much easy to read and control if you can assign some dummy class to quantity, price and total input.
Something like this:
HTML
<table>
<tbody>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
</tbody>
</table>
Script
$('table tbody tr').find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('tr');
var quantity = parseInt(parent.find('.qty').val())||0;
var price = parseInt(parent.find('.prc').val())||0;
parent.find('.total').val(quantity*price);
});
Check working example here
Personally, i prefer not to select elements by their position. If you wind up changing them later, or adding another your code is broken.
I would do something like:
$(this).closest('tr').find('input[name=total]').val(?);
I create a add item page where i implement autucomplete textbox and auto multiplication using jquery.
when i use autucomplete textbox multiplication cannot work.
My Jquery Code is....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
$(".product").autocomplete("autocomplete1.php", {
selectFirst: true
});
$(".brand").autocomplete("autocomplete2.php", {
selectFirst: true
});
$(".model").autocomplete("autocomplete3.php", {
selectFirst: true
});
});
</script>-->
<script type="text/javascript">
$(document).ready(function() {
$(".product").autocomplete("autocomplete1.php", {
selectFirst: true
});
$(".brand").autocomplete("autocomplete2.php", {
selectFirst: true
});
$(".model").autocomplete("autocomplete3.php", {
selectFirst: true
});
$('#dataTable').on('keyup', '.price', calTotal)
.on('keyup', '.quantity', calTotal);
// find the value and calculate it
function calTotal() {
var $row = $(this).closest('tr'),
price = $row.find('.price').val(),
quantity = $row.find('.quantity').val(),
total = price * quantity;
// change the value in total
$row.find('.txt').val(total)
}
});
</script>
My html code is...
<TABLE id="dataTable" class="dataTable" width="350px" border="1">
<tr> <th></th>
<th width="144"><div align="center"><strong>Product Name</strong></div></th>
<th width="146"><div align="center"><strong>Brand Name</strong></div></th>
<th width="146"><div align="center"><strong>Model No</strong></div></th>
<th width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></th>
<th width="146"><div align="center"><strong>Quantity (Q)</strong></div></th>
<th width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</th>
<th width="153"><div align="center"><strong>Description</strong></div></th>
</tr>
<tbody>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model"/></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand"/></td>
<td><input type="text" name="model[]" id="model" class="model"/></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
<tr>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><input type="text" name="product[]" id="product" class="product" /></td>
<td><input type="text" name="brand[]" id="brand" class="brand" /></td>
<td><input type="text" name="model[]" id="model" class="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
</tr>
</tbody>
</TABLE>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
<table width="1206" border="0">
<tr>
<td width="753"> </td>
<td width="124"><input name="btn" type="button" id="btn" value="Grand Total"/></td>
<td width="315"><input type="text" id="sum" name="sum" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<!--<td colspan="2">Transport Price:
<input type="text" name="transport" id="transport" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Grand Total:
<input type="text" name="grandt" id="grandt" /></td>
</tr>-->
</table>
How can i do it
Please help!!
If you're using a textbox and want to see if the input is changed, use:
$('#your-text-box').on('input', function() {
//Do your calculation
//Show it in your other textbox perhaps?
}
<SCRIPT>
$(document).ready(function(){
$(document).each(function(){
var tc = document.getElementsByClassName('tc')[0].value;
var ac = document.getElementsByClassName('ac')[0].value;
$('.ac').change(function(){
if ($('.ac').val() > $('.tc').val()){
alert(" ERROR !!! \n\n The attended classes are more than total classes");}
});
});
});
$(document).ready(function(){
$(document).each(function(){
var re = new RegExp("[0-9]");
$('.tc').change(function(){
if ($('.tc').val().match(re)) { // DO NOTHING}
else {
alert(" Please enter only numbers ");
}
});
});
});
</script>
The above function works once or may not at all
if once the value is correct and next the value
is not a number means it doest alert at all
is there something missing or wrong about the
code i have written?????
<table width="928" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="126">MONTH</th>
<th colspan="2"><div align="center">Dec</div></th>
<th colspan="2"><div align="center">Jan</div></th>
<th colspan="2"><div align="center">Feb</div></th>
<th colspan="2"><div align="center">Mar</div></th>
<th colspan="2"><div align="center">Apr</div></th>
<th colspan="2"><div align="center">May</div></th>
<th colspan="2"><div align="center">Jun</div></th>
<th colspan="3"><div align="center">I A</div></th>
</tr>
<tr>
<th><div align="center">DETAILS</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="43"><div align="center">TC</div></th>
<th width="43"><div align="center">AC</div></th>
<th width="64"><div align="center">T1</div></th>
<th width="64"><div align="center">T2</div></th>
<th width="72"><div align="center">T3</div></th>
</tr>
<tr>
<th>Subject-1</th>
<td><input name="dec_tc_s1" type="text" class="tc" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="may_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="may_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s1" class="tc" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s1" class="ac" value="" size="3" /></td>
<td><input type="text" name="s1_t1" value="" size="5" /></td>
<td><input type="text" name="s1_t2" value="" size="5" /></td>
<td><input type="text" name="s1_t3" value="" size="5" /></td>
</tr>
<tr>
<th>Subject-2 </th>
<td><input type="text" name="dec_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="may_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="may_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s2" class="tc" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s2" class="ac" value="" size="3" /></td>
<td><input type="text" name="s2_t1" value="" size="5" /></td>
<td><input type="text" name="s2_t2" value="" size="5" /></td>
<td><input type="text" name="s2_t3" value="" size="5" /></td>
</tr>
<tr>
<th>Subject-3 </th>
<td><input type="text" name="dec_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="dec_ac_s3" class="ac"value="" size="3" /></td>
<td><input type="text" name="jan_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="jan_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="feb_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="mar_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s3" class="tc" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="may_tc_s3" class="tc"value="" size="3" /></td>
<td><input type="text" name="may_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s3" class="tc" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s3" class="ac" value="" size="3" /></td>
<td><input type="text" name="s3_t1" value="" size="5" /></td>
<td><input type="text" name="s3_t2" value="" size="5" /></td>
<td><input type="text" name="s3_t3" value="" size="5" /></td>
</tr>
<tr>
<th>Subject-4 </th>
<td><input type="text" name="dec_tc_s4" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s4" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s4" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s4" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s4" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s4" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s4" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s4" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s4" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s4" value="" size="3" /></td>
<td><input type="text" name="may_tc_s4" value="" size="3" /></td>
<td><input type="text" name="may_ac_s4" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s4" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s4" value="" size="3" /></td>
<td><input type="text" name="s4_t1" value="" size="5" /></td>
<td><input type="text" name="s4_t2" value="" size="5" /></td>
<td><input type="text" name="s4_t3" value="" size="5" /></td>
</tr>
<tr>
<th colspan="15"><div align="center">Practicals</div></th>
<th><div align="center">T1</div></th>
<th><div align="center">T2</div></th>
<th><div align="center">REC</div></th>
</tr>
<tr>
<th>Subject-5 </th>
<td><input type="text" name="dec_tc_s5" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s5" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s5" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s5" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s5" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s5" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s5" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s5" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s5" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s5" value="" size="3" /></td>
<td><input type="text" name="may_tc_s5" value="" size="3" /></td>
<td><input type="text" name="may_ac_s5" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s5" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s5" value="" size="3" /></td>
<td><input type="text" name="s5_t1" value="" size="5" /></td>
<td><input type="text" name="s5_t2" value="" size="5" /></td>
<td><input name="s5_t3" type="text" value="" size="5" /></td>
</tr>
<tr>
<th>Subject-6 </th>
<td><input type="text" name="dec_tc_s6" value="" size="3" /></td>
<td><input type="text" name="dec_ac_s6" value="" size="3" /></td>
<td><input type="text" name="jan_tc_s6" value="" size="3" /></td>
<td><input type="text" name="jan_ac_s6" value="" size="3" /></td>
<td><input type="text" name="feb_tc_s6" value="" size="3" /></td>
<td><input type="text" name="feb_ac_s6" value="" size="3" /></td>
<td><input type="text" name="mar_tc_s6" value="" size="3" /></td>
<td><input type="text" name="mar_ac_s6" value="" size="3" /></td>
<td><input type="text" name="apr_tc_s6" value="" size="3" /></td>
<td><input type="text" name="apr_ac_s6" value="" size="3" /></td>
<td><input type="text" name="may_tc_s6" value="" size="3" /></td>
<td><input type="text" name="may_ac_s6" value="" size="3" /></td>
<td><input type="text" name="jun_tc_s6" value="" size="3" /></td>
<td><input type="text" name="jun_ac_s6" value="" size="3" /></td>
<td><input type="text" name="s6_t1" value="" size="5" /></td>
<td><input type="text" name="s6_t2" value="" size="5" /></td>
<td><input name="s6_t3" type="text" value="" size="5" /></td>
</tr>
<tr>
<td colspan="18"><div align="center">
<input type="submit" class="button" value="Update record" onClick="t1()" />
</div></td>
</tr>
</table>
<input type="hidden" name="idatten" value="" />
<input type="hidden" name="user_att_id" value="" />
<input type="hidden" name="MM_update" value="form1" />
<input type="hidden" name="username" value="" />
</form>
<p> </p>
<p> </p>
</body>
<SCRIPT LANGUAGE="JavaScript">
$('.percentage').each(function() {
if(parseInt($(this).html())>100){
$(this).css('background', '#FFCF87' )
alert('You Have Entered Attented class more than Total classes');
}
else if (parseInt($(this).html())<75){
$(this).css('background', '#FF9B82');
}
});
$('.iatotal').each(function() {
if(parseInt($(this).html())>25){
$(this).css('background', '#FFCF87' )
alert('You Have Worng number Please check your entry');
}
else if (parseInt($(this).html())<10){
$(this).css('background', '#FF9B82');
}
});
</script>
</html>
try something like following to loop over the multiple elements in your scenario:
<SCRIPT>
$(document).ready(function(){
$('.ac').change(function(){
$('.ac').each(function(index){
if($('.tc').get(index)) {
if($('.ac').get(index).val() > $('.tc').get(index).val()) {
alert(" ERROR !!! \n\n The attended classes are more than total classes");
}
}
});
});
var re = new RegExp("[0-9]");
$('.tc').change(function(){
if ($(this).val().match(re)) {
// DO NOTHING
}
else {
alert(" Please enter only numbers ");
}
});
});
</script>