<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add, delete rows in html table and submit inputs using jquery</title>
<link href="tablecss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script src="tablejs.js" type="text/javascript"></script>
</head>
<body>
<form name="form1" id="form1" method="post" runat="server">
<div id="all">
<div id="msg" class="hide"> </div>
<table id="table1">
<thead>
<tr>
<th>Sr.#</th>
<th>item name</th>
<th>Desc</th>
<th>quantity</th>
<th>unit price</th>
<th>Amount</th>
<th>Add</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>1 </span></td>
<td><input type="text" name="itemname[]" id="itemname1"/></td>
<td><input type="text" name="itemtmail[]" id="itemtmail1"/></td>
<td><input type="text" name="quantity[]" id="quantity1" onblur="javascript:calamountquan(this,1);"/></td>
<td><input type="text" name="price[]" class="priceclass" id="priceid1" onblur="javascript:calamountprice(this,1);"/></td>
<td><input type="text" name="amount[]" class="amountclass" id="amountid1"/></td>
<td><input type="button" value=" Add " name="add" id="add"/></td>
<td><input type="button" value=" Delete " name="delete" id="delete"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type="text" name="total" class="totalclass" id="total"/></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value=" Submit " id="submit" name="submit"/></td>
<td> </td>
</tr>
</tfoot>
</table>
<p>
<div id="disp"> </div>
</p>
</div>
</form>
</body>
</html>
table.js
$(function () {
$("#form1").validate({
rules: {
"itemname[]": "required",
"itemtmail[]": {
required: true,
email: true
}
},
messages: {
"itemname[]": "Required",
"itemtmail[]": {
required: "Required",
email: "valid email"
}
}
});
$("#delete").live("click", function (e) {
if ($('#table1 tbody > tr').length <= 1) {
return false;
}
if ($(this).parent().parent().find("input[name='add']").val()) {
return false;
}
if (confirm("Are you sure want to delete?")) {
$(this).parent().closest("tr").css("background-color", "#FFFFEA");
$(this).fadeOut('slow', function () {
$(this).parent().closest("tr").remove();
});
}
});
i = 2;
$("#add").live("click", function (e, index) {
var j = i;
var itemnameid = 'itemname'+i;
var itemtmailid = 'itemtmail'+i;
var quantityid = 'quantity'+i;
var priceid = 'priceid'+i;
var amountid = 'amountid'+i;
i++;
$('#table1 tbody > tr:last').after('<tr><td><span>' + (i) + ' </span></td><td><input type="text" name="itemname[]" id="'+itemnameid+'"/></td><td><input type="text" name="itemtmail[]" id="'+itemtmailid+'"/></td><td><input type="text" name="quantity[]" id="'+quantityid+'" onblur="javascript:calamountquan(this,'+j+');"/></td><td><input type="text" name="price[]" class="priceclass" id="'+priceid+'" onblur="javascript:calamountprice(this,'+j+');"/></td><td><input type="text" name="amount[]" id="'+amountid+'" class="amountclass"/></td><td><input type="button" value=" Add " name="add" id="add"></td><td><input type="button" value=" Delete " name="delete" id="delete"></td>');
$('#table1 tbody > tr:last').prev().find("input[name='add']").remove();
//alert(i);
});
});
function calamountprice(obj,countval)
{
var priceidval = $(obj).attr("id");
var quanidval = 'quantity'+countval;
var amountidval = 'amountid'+countval;
var priceval = $('#'+priceidval).val();
var quantityval = $('#'+quanidval).val();
if(quantityval != '' && quantityval > 0 && priceval != '' && priceval > 0)
{
var amounttotal = parseFloat(quantityval)*parseFloat(priceval);
$('#'+amountidval).val(amounttotal.toFixed(2));
calculateSum();
}
if(quantityval == '' || priceval == '')
{
$('#'+amountidval).val(0.00);
calculateSum();
}
}
function calamountquan(obj,countval)
{
var quanidval = $(obj).attr("id");
var priceidval = 'priceid'+countval;
var amountidval = 'amountid'+countval;
var quantityval = $('#'+quanidval).val();
var priceval = $('#'+priceidval).val();
if(quantityval != '' && quantityval > 0 && priceval != '' && priceval > 0)
{
var amounttotal = parseFloat(quantityval)*parseFloat(priceval);
$('#'+amountidval).val(amounttotal.toFixed(2));
calculateSum();
}
if(quantityval == '' || priceval == '')
{
$('#'+amountidval).val(0.00);
calculateSum();
}
}
function calculateSum()
{
var sum = 0;
//iterate through each textboxes and add the values
$(".amountclass").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#total").val(sum.toFixed(2));
}
Sunday, November 24, 2013
Add, delete rows in html table and submit inputs using jquery
Subscribe to:
Posts (Atom)
