I have the following html page and need to Sum three Rows of HTML Textbox Values Using JQuery / JavaScript.
- I need totals for each row as well as a grand total of all rows.
Here is what the form looks like:
Here is my HTML with three rows of textboxes:
<table data-role="table" data-theme="c" id="bookList" class="table-stroke table-stripe">
<thead>
<tr>
<th>Type</th>
<th>Mon<br>
<input disabled id="monDate" size="5" data-mini="true"></th>
<th>Tue<br>
<input disabled id="tueDate" size="5" data-mini="true"></th>
<th>Wed<br>
<input disabled id="wedDate" size="5" data-mini="true"></th>
<th>Thu<br>
<input disabled id="thuDate" size="5" data-mini="true"></th>
<th>Fri<br>
<input disabled id="friDate" size="5" data-mini="true"></th>
<th>Sat<br>
<input disabled id="satDate" size="5" data-mini="true"></th>
<th>Sun<br>
<input disabled id="sunDate" size="5" data-mini="true"></th>
<th>Totals</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th><select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-theme="c" data-mini="true">
<option value="Regular Hourly Rate" selected>Regular Hourly Rate</option>
<option value="Paid Leave Time">Paid Leave Time</option>
<option value="Bereavement">Bereavement</option>
<option value="Holiday Pay">Holiday Pay</option>
</select></th>
<td><input type="number" pattern="[0-9]*" name="mon1" id="mon1" value="8" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="tue1" id="tue1" value="8" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="wed1" id="wed1" value="8" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="thu1" id="thu1" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="fri1" id="fri1" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="sat1" id="sat1" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="sun1" id="sun1" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input name="total1" type="text" disabled id="total1" value="" size="10" maxlength="5" pattern="[0-9]*" data-mini="true"></td>
<td><label>
<input name="desc1" type="text" id="desc1" size="15" maxlength="50" data-mini="true">
</label></td>
</tr>
<tr>
<th><select name="select-choice-2" id="select-choice-2" data-native-menu="false" data-theme="c" data-mini="true">
<option value="Regular Hourly Rate">Regular Hourly Rate</option>
<option value="Paid Leave Time" selected>Paid Leave Time</option>
<option value="Bereavement">Bereavement</option>
<option value="Holiday Pay">Holiday Pay</option>
</select></th>
<td><input type="number" pattern="[0-9]*" name="mon2" id="mon2" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="tue2" id="tue2" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="wed2" id="wed2" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="thu2" id="thu2" value="8" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="fri2" id="fri2" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="sat2" id="sat2" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="sun2" id="sun2" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input name="total2" type="text" disabled id="total2" value="" size="10" maxlength="5" pattern="[0-9]*" data-mini="true"></td>
<td><label>
<input name="desc2" type="text" id="desc2" size="15" maxlength="50" data-mini="true">
</label></td>
</tr>
<tr>
<th><select name="select-choice-3" id="select-choice-3" data-native-menu="false" data-theme="c" data-mini="true">
<option value="Regular Hourly Rate">Regular Hourly Rate</option>
<option value="Paid Leave Time">Paid Leave Time</option>
<option value="Bereavement">Bereavement</option>
<option value="Holiday Pay" selected>Holiday Pay</option>
</select></th>
<td><input type="number" pattern="[0-9]*" name="mon3" id="mon3" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="tue3" id="tue3" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="wed3" id="wed3" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="thu3" id="thu3" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="fri3" id="fri3" value="8" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="sat3" id="sat3" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input type="number" pattern="[0-9]*" name="sun3" id="sun3" value="" size="10" maxlength="5" data- mini="true"></td>
<td><input name="total3" type="text" disabled id="total3" value="" size="10" maxlength="5" pattern="[0-9]*" data-mini="true"></td>
<td><label>
<input name="desc3" type="text" id="desc3" size="15" maxlength="50" data-mini="true">
</label></td>
</tr>
<tr>
<th> </th>
<td colspan="7"><div align="right">Totals</div></td>
<td><input name="total4" type="text" disabled id="total4" value="" size="10" maxlength="5" pattern="[0-9]*" data-mini="true"></td>
<td> </td>
</tr>
</tbody>
</table>
Assuming you have the following html
<table>
<tr id="hourly">
<td>
<input value="1" />
<input value="2" />
<input id="total_hour" />
</td>
</tr>
</table>
<button id="calc">Submit</button>
The following JS should work for your needs.
//-- Create an empty array to hold items
var items = [];
//-- set hourly total = 0
var htotal = 0;
//-- When submit is clicked process hourly time, this should be repeated for each row
$("#calc").click(function () {
//-- use the each function to loop through every input field on the hourly row
$("#hourly input").each(function () {
//-- only the final total has an id and we don't want that included in our total
if(!$(this).attr("id"))
{
//-- convert each value to a number and push to items array
items.push(parseFloat($(this).val()));
}
});
//-- loop through each item in the items array
$.each(items, function() {
//-- add the items together as the htotal variable
htotal += this;
});
//-- set the total_hour value to htotal
$("#total_hour").val(htotal);
});
Working Plunk here http://plnkr.co/edit/KbUgI9Orov5dao4fftET?p=preview
Related
I'm trying to insert a Web-to-Lead Form from Salesforce into a Code block of a Squarespace page. This is a slightly formatted version with tables, but even if I take the pure Web-to-Lead form it just doesn't create a Lead in the CRM.
The form itself submits and goes to the retURL, and this happens despite making the fields required and filling all of the fields. In Squarespace I've put the <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> in the Code of the Settings.
Edit: I can't find any advice for how to use this with Squarespace except to use Zapier, which I now see has a free tier. This seems to work, but not ideally. I would be interested to see if there are other solutions, but Zapier seems to be the best one I can find.
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="OID">
<input type=hidden name="retURL" value="WEBSITE URL">
<table>
<tbody>
<tr>
<td><label for="salutation">Salutation*: </label></td>
<td><select id="salutation" name="salutation" required="true"><option value="">--None--</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Mr.">Mr.</option>
<option value="Mx.">Mx.</option>
</select></td>
</tr>
<tr>
<td><label for="first_name">First Name*: </label></td>
<td><input id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="last_name">Surname*: </label></td>
<td><input id="last_name" maxlength="80" name="last_name" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="phone">Phone*</label></td>
<td><input id="phone" maxlength="40" name="phone" size="20" type="text" required="true"/></td>
</tr>
<tr>
<td><label for="email">E-Mail*: </label></td>
<td><input id="email" maxlength="80" name="email" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="company">Company*: </label></td>
<td><input id="company" maxlength="40" name="company" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="street">Street, Housenumber *: </label></td>
<td><textarea name="street" placeholder="Mandatory" required="true"></textarea></td>
</tr>
<tr>
<td><label for="zip">ZIP Code*: </label></td>
<td><input id="zip" maxlength="20" name="zip" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td><label for="city">City*: </label></td>
<td><input id="city" maxlength="40" name="city" size="20" type="text" placeholder="Mandatory" required="true"/></td>
</tr>
<tr>
<td> <label for="state">State/Province*</label></td>
<td><input id="state" maxlength="20" name="state" size="20" type="text" required="true"/></td>
</tr>
<tr>
<td><label for="country_code">Country*: </label></td>
<td><select id="country_code" name="country" required="true"/>
<option value="ZA">South Africa</option>
<option value="NA">Namibia</option></td>
</tr>
<tr>
<td>Contact Type:</td>
<td><select id="ID" name="ID" title="Contact Type" required="true">
<option value="CONTACT TYPE">CONTACT TYPE</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="checkbox" checked required="true"> Yes, I agree to the processing of my data.*
</div>
<div>
<input type="checkbox" > Yes, I have read the <u>data protection declaration</u> and agree.*
</div>
<input id="lead_source" name="lead_source" type="hidden" value="LEAD SOURCE">
<br>
<input type="submit" name ="submit" value="Register">
</form>
I am trying to get the value of a dynamic table cell. following is the code, but i only get undefined
Javascript and HTML given below:
function calcTot(i) {
unitPrice = document.getElementById("invoice_details").rows[i].cells[6].innerHTML.value;//gets the unit price for the item
alert(unitPrice);
quantity = document.getElementById("invoice_details").rows[i].cells[7].childNodes[0].value;
//alert(quantity);
dis = document.getElementById("invoice_details").rows[i].cells[8].children[0].value;
//alert(dis);
final_amt = (parseFloat(unitPrice) * parseFloat(quantity)) - (parseFloat(unitPrice) * parseFloat(quantity) * parseFloat(dis)) / 100;
//alert(final_amt);
document.getElementById("invoice_details").rows[i].cells[9].childNodes[0].value = final_amt.toFixed(2);
//calcTotal();
}
<tbody id="generate_invoice_table">
<tr>
<td><input class="form-control" readonly="" value="57" name="item_id[]"></td>
<td><input class="form-control" readonly="" value="Toyota" name="supplier_name[]"></td>
<td><input hidden="" class="form-control" readonly="" value="Item" name="type[]"></td>
<td><input class="form-control" readonly="" value="Fan Belt Aqua" name="item_description[]"></td>
<td><input class="form-control" readonly="" value="1" name="available_qty[]"></td>
<td><input class="form-control" readonly="" value="12000.00" name="retail_price[]"></td>
<td><input type="text" value="0" class="form-control text-right" name="qty[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td>
<td><input type="text" value="0" class="form-control text-right" name="discount[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td>
<td><input type="text" class="form-control text-right" name="price[]"></td>
</tr>
</tbody>
This script works fine for me:
<script>
calculate = function(){
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)* parseInt(minutes);
}
</script>
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td>
<input class="form-control"type="text" required="required" placeholder="Symptoms" name="Symptoms[]">
</td>
<td>
<input class="form-control" type="text" required="required" placeholder="GivenMedicin" name="GivenMedicin[]">
</td>
<td>
<input id="a1" class="form-control" type="text" required="required" placeholder="UnitePrice" name="UnitePrice[]" onblur="calculate()" >
</td>
<td>
<input id="a2" class="form-control" type="text" required="required" placeholder="Quentity" name="Quentity[]" onblur="calculate()" >
</td>
<td>
<input id="a3" class="form-control" type="text" required="required" placeholder="SubTotal" name="SubTotal[]" >
</td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<input class="submit" type="submit" value="Confirm" />
<input type="hidden" value="<?php echo $PatientIDSearch ?>" name="PatientIDSearch" />
</form>
But I need to calculate All Subtotal
Some issues:
If you add rows, you'll have to avoid that you get duplicate id property values in your HTML. It is probably easiest to just remove them and identify the input elements via their names, which does not have to be unique
It is bad practice to assign to a non-declared variable. Use var, and in the case of functions, you can just use the function calculate() { syntax.
Make the subtotal input elements read-only by adding the readonly attribute, otherwise the user can change the calculated total.
Instead of responding on blur events, you'll get a more responsive effect if you respond to the input event. And I would advise to bind the event handler via JavaScript, not via an HTML attribute.
I would fix some spelling errors in your elements (but maybe they make sense in your native language): Quantity with an 'a', UnitPrice without the 'e'.
You can use querySelectorAll to select elements by a CSS selector, and then Array.from to iterate over them.
See below snippet with 2 rows:
function calculate(){
var unitPrices = document.querySelectorAll('[name=UnitPrice\\[\\]]');
var quantities = document.querySelectorAll('[name=Quantity\\[\\]]');
var subTotals = document.querySelectorAll('[name=SubTotal\\[\\]]');
var grandTotal = 0;
Array.from(subTotals, function (subTotal, i) {
var price = +unitPrices[i].value * +quantities[i].value;
subTotal.value = price;
grandTotal += price;
});
// Maybe you can also display the grandTotal somehwere.
}
document.querySelector('form').addEventListener('input', calculate);
input { max-width: 7em }
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"" ></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
</tbody>
</table>
</form>
Actually i want to calculate total price for each row which genered daynamically using jquery.The row generated usnig dynamicForm("#plus", "#minus", {limit:20});. Please help me to calculate total price.
<form action="previewStock.jsp" method="post" onsubmit="return validateAddStock()">
<table align="center" style="width: 900px;">
<tr>
<td colspan="10" align="center">
Supplier Name : <select class="hoverr" name="supplierName">
<option value="unknown">Unknown</option>
</select>
<!--<td>
Supplier Mob.</td><td><select class="hoverr" name="supplierMob">
<option>Unknown</option>
</select></td>-->
<input type="text" name="invoiceId" placeholder="Enter Invioce Id" >
<input type="button" name="addSupplier" id="addSupplier" value="Add New Supplier">
</td>
</tr>
<tr><td colspan="10" align="center"><hr></td></tr>
<tr style="background: brown; color: #ffffff;">
<td>Item Name</td>
<td>Quantity</td>
<td>Unit</td>
<td>Price/Unit</td>
<td>Total Price</td>
<td>Purchase Date</td>
<td>Expiry Date</td>
<td>MRP</td>
<td>Category</td>
<td>Description</td></tr>
<input type="hidden" name="menuId" value="1"/>
<tr id="duplicate">
<td><input type="text" name="itemName" id="itemName" value="" required="true" placeholder="Item Name" class="hoverr"/></td>
<td><input type="text" name="quantity"id="quantity" value="" required="true" pattern="[0-9]" size="5" placeholder="Qty." class="hoverr"/></td>
<td>
<select id="unit" name="unit" required="true" class="hoverr">
<option value="0">Select</option>
<option value="Kg">Kg</option>
<option value="Packet">Packet</option>
<option value="Litre">Litre</option>
<option value="Meter">Meter</option>
</select></td>
<td><input type="textr" name="pricePerUnit" id="pricePerUnit" size="7" value="" required="true" placeholder="Price P/U." class="hoverr"/></td>
<td><input type="text" name="totalPrice" id="totalPrice" size="7" value="" placeholder="Tot. Price" class="hoverr"/></td>
<td><input type="date" name="purchgeDate" id="purchageDate" size="12" value="" placeholder="Pur. Date" onfocus="showCalendar('',this,this,'','holder1',0,30,1)"></td>
<td><input type="date" name="expiryDate" id="expiryDate" size="12" value="" placeholder="Exp. Date" onfocus="showCalendar('',this,this,'','holder1',0,30,1)"></td>
<td><input type="number" name="MRP" id="MRP" size="14" value="" placeholder="MRP" /></td>
<td><select name="category" class="hoverr" id="category"><option value="0">Select</option></select></td>
<td><textarea name="description" id="description" class="textareaItem" placeholder="Description Here" cols="15" rows="1" class="hoverr"/></textarea></td>
<td></td><td><img src="images/addItem.png" width="17" style=" float: right;" title="Add Row"></td>
</tr>
<tr><td><div style="display: none; margin-left: 680px;" id="total">Grand Total:<lable for="grandTotal" id="grandTotal"><img src="images/rupee.png" height="14"> <input type="text" name="grandTotal"></lable></div></td></tr><br><br>
<tr><td colspan="10" align="center"><hr></td></tr>
<tr><td colspan="10" align="center"><input type="submit" name="submit" value="Save"> <input type="reset" name="reset" value="Reset"></td></tr>
</table>
<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>