I'm trying to edit my javascript code and having some undo and redo functionality to this crud design. When I click undo after I put the data from the table and delete it, an error comes up. The error message states that "Cannot read properties of null (reading 'pop')". I'm fairly new to coding so I know I have plenty to learn.
<!DOCTYPE html>
<html>
<head>
<title>
Html CRUD with Pure JavaScript
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<td>
<form onsubmit="event.preventDefault();onFormSubmit();">
<div>
<label>Product Name</label>
<input type="text" name="productName" id="productName">
</div>
<div>
<label>Product ID</label>
<input type="text" name="productID" id="productID">
</div>
<div>
<label>Product Location</label>
<input type="text" name="productLocation" id="productLocation">
</div>
<div>
<label>Comment</label>
<input type="text" name="comment" id="comment">
</div>
<div class="form-action-buttons">
<input type="submit" value="Submit">
</div>
<div class="form-action-buttons">
<input type="button" value="undo" onclick="onUndo();">
</div>
<div class="form-action-buttons">
<input type="button" value="redo" onclick="alert('You clicked the button!')">
</div>
</form>
</td>
<td>
<table class="list" id="fullList">
<thead>
<tr>
<th>Product Name</th>
<th>Product ID</th>
<th>Product Location</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
var selectedRow = null
const input = document.querySelector('input')
function onFormSubmit(){
var formData = readFormData();
if(selectedRow == null)
insertNewRecord(formData);
else
updateRecord(formData)
resetForm();
}
function saveSelectedRow(){
selectedRow.push(input.value)
}
function onUndo(){
const lastSelectedRow = selectedRow.pop()
input.value = lastSelectedRow ? lastSelectedRow : input.value
resetForm();
}
function readFormData(){
var formData= {};
formData["productName"] = document.getElementById("productName").value;
formData["productID"] = document.getElementById("productID").value;
formData["productLocation"] = document.getElementById("productLocation").value;
formData["comment"] = document.getElementById("comment").value;
return formData;
}
function insertNewRecord(data){
var table = document.getElementById("fullList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
cell1 = newRow.insertCell(0);
cell1.innerHTML = data.productName;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.productID;
cell3 = newRow.insertCell(2);
cell3.innerHTML = data.productLocation;
cell4 = newRow.insertCell(3);
cell4.innerHTML = data.comment;
cell4 = newRow.insertCell(4);
cell4.innerHTML = `<a onClick="onEdit(this)">Edit</a>
<a onClick="onDelete(this)">Delete/Comment</a>`;
}
function resetForm(){
document.getElementById("productName").value = "";
document.getElementById("productID").value = "";
document.getElementById("productLocation").value = "";
document.getElementById("comment").value = "";
selectedRow = null
}
function onEdit(td){
selectedRow = td.parentElement.parentElement;
document.getElementById("productName").value = selectedRow.cells[0].innerHTML;
document.getElementById("productID").value = selectedRow.cells[1].innerHTML;
document.getElementById("productLocation").value = selectedRow.cells[2].innerHTML;
document.getElementById("comment").value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.productName;
selectedRow.cells[1].innerHTML = formData.productID;
selectedRow.cells[2].innerHTML = formData.productLocation;
selectedRow.cells[3].innerHTML = formData.comment;
}
function onDelete(td) {
if (confirm('Are you sure to delete this record ?'))
row = td.parentElement.parentElement;
document.getElementById("fullList").deleteRow(row.rowIndex);;
onEdit(td);
}
function onUndelete(td){
if(confirm('Are you sure you want to undelete this record?'))
row = td.parentElement.parentElement;
document.getElementById("fullList");
undo();
}
body > table{
width: 80%;
}
table{
border-collapse: collapse;
}
table.list{
width:100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even),table.list thead>tr {
background-color: #dddddd;
}
input[type=text], input[type=number] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]{
width: 30%;
background-color: #ddd;
color: #000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]{
width: 30%;
background-color: #ddd;
color: #000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
form div.form-action-buttons{
text-align: right;
}
a{
cursor: pointer;
text-decoration: underline;
color: #0000ee;
margin-right: 4px;
}
label.validation-error{
color: red;
margin-left: 5px;
}
.hide{
display:none;
}
I am doing a department store automation project in rails for the first time, So I am encountering some problems in bill generation. I want to send all the details of the table to my controller where I can calculate cart price and total price. Help me out even if there is some other way to overcome this situation.
<html>
<head>
<style>
* {box-sizing: border-box}
label {
cursor: default;
color:black;
font-size: 15px;
}
.form-row {
padding: 5px 10px;
margin: 5px 0;
}
p {
color:black;
}
h1 {
color:black;
}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
background-color: white;
}
.container {
padding: 16px;
background-color: white;
text-align: left;
font-size: 15px;
margin-top: 100px;
}
table {
width: 500px;
font-size: 30px;
border: 5px solid blue;
}
th, td {
text-align: left;
padding: 8px;
}
td {
color: black;
}
tr:nth-child(odd){background-color: #ffffb3}
th {
background-color: #4000ff;
color: white;
}
input:invalid + span:after {
content: '✖';
color: #f00;
padding-left: 5px;
}
input:valid + span:after {
content: '✓';
color: #26b72b;
padding-left: 5px;
}
</style>
</head>
<body bgcolor="white">
<div id="POItablediv" class="container">
<form name="genbill" method="get" action="genCartAction">
<table border="1">
<tbody id="POITable">
<tr>
<td>CATEGORY ID</td>
<td>NUMBER OF PRODUCTS</td>
<td>DELETE PRODUCT</td>
<td>ADD PRODUCT</td>
<td>ACTIONS</td>
</tr>
<tr>
<form name="genbill" method="get" action="genCartAction">
<td> <SELECT NAME="cid" >
<% for x in #cid %>
<OPTION VALUE="<%= x %>" ><%= x %></OPTION>
<% end %></SELECT><br>
</td>
<td><input type="text" name="nop"></td>
<td><input type="button" value="DELETE PRODUCT" data-cmd="delRow"></td>
<td><input type="button" value="ADD PRODUCT" data-cmd="insRow"></td>
</tr>
</tbody>
</table></form>
<form name="genbill" method="get" action="genBillAction">
<input type="text" name="bid" readonly hidden="true">
<input type="submit" value="CLICK HERE TO GENERATE BILL" disabled="TRUE">
</form>
</div>
<script>
function tableClicks (e) {
let cmd = e.target.getAttribute('data-cmd');
if (cmd && (cmd in buttonEvents)) {
buttonEvents[cmd](e);
}
return;
}
let table = document.getElementById('POITable');
let buttonEvents = {
insRow: function () {
var newRow = table.rows[1].cloneNode(true);
table.appendChild(newRow);
newRow.firstElementChild.textContent = newRow.rowIndex;
return;
},
delRow: function (e) {
var rowIdx = e.target.closest('tr').rowIndex,
rows = null;
if (rowIdx === 1) return; // Don't delete the first row
table.deleteRow(rowIdx);
// Update row numbers
rows = table.rows;
for (const row of rows) {
let idx = row.rowIndex;
if (idx < 1) continue; // Skip the header row
row.firstElementChild.textContent = idx;
}
return;
}
};
table.addEventListener('click', tableClicks);
</script>
</body>
</html>
If it just to calculate the total price, you should do it in the javascript code, there is not need to make an endpoint just for that...
I have to design the following webpage using HTML, use CSS for styling and JS for validation:
On providing input, the output should be as follows:
The CSS and JS requirements are:
I have written the following code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-color:#99FFFF;
}
h1{
font-style:italic;
font-weight:bold;
text-align:center;
color:Maroon;
}
table{
border-collapse: collapse;
border:5px solid black;
width:30%;
margin-left:35%;
}
tr{
text-align:left;
}
td{
padding:10px;
border:2px solid black;
}
#submitbutton{
margin-left:45%;
}
#discount{
text-align:center;
font-weight:bold;
font-size:25px;
}
#result{
text-align:center;
font-weight:bold;
font-style:italic;
font-size:40px;
color:#FF0000;
}
</style>
<script type="text/javascript">
function validateForm()
{
var x=document.myForm.name.value;
var y=document.myForm.price.value;
var namechar= /^[\sa-zA-Z]+$/;
if(x=="") {alert("Product Name should not be empty");return false;}
else if(y=="") {alert("Product Price should not be empty");return false;}
else if(!/^[a-zA-Z\s]+$/.test(x)) {alert("Product Name should contain only alphabets and space");return false;}
else if(y<1) {alert("Product Price should be a number with value greater than 0");return false;}
else
{
var x=document.myForm.season.value;
var disc;
if(x.match("summer")) disc=10;
else if (x.match("newyear")) disc=5;
else if (x.match("clearance")) disc=15;
document.getElementById("discount").innerHTML="The discount is "+disc+"%";
var p=document.myForm.price.value;
p=p-(p*disc)/100;
document.getElementById("result").innerHTML="The discounted price : Rs "+p;
return true;
}
}
</script>
</head>
<body>
<h1>DISCOUNT PRICE</h1>
<form method="get" name="myForm" onsubmit="return validateForm()">
<table>
<tr>
<td>Product Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>Product Price</td>
<td><input type="number" name="price">
</td>
</tr>
<tr>
<td>Season</td>
<td><select name="season">
<option value="summer">SUMMER SALE</option>
<option value="newyear">NEW YEAR SALE</option>
<option value="clearance">CLEARANCE SALE</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" id="submitbutton" value="GET DISCOUNT PRICE">
</form>
<br/>
<div id="discount"></div>
<br/>
<div id="result"></div>
</body>
</html>
The output is obtained as desired (with some CSS styling errors), but the output does not last. The displayed values in both the div tags vanishes immediately.
How to make sure the output lasts?
Also please help with the CSS styling if possible. How to left align the table by 35% and submit button by 45%??
Obtained output webpage:
That's because the button is of type submit, which forwards theuser to the file that is specified in the <form>-tag. Just return false instead of true and the problem is solved.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #99FFFF;
}
h1 {
font-style: italic;
font-weight: bold;
text-align: center;
color: Maroon;
}
table {
border-collapse: collapse;
border: 5px solid black;
width: 30%;
margin-left: 35%;
}
tr {
text-align: left;
}
td {
padding: 10px;
border: 2px solid black;
}
#submitbutton {
margin-left: 45%;
}
#discount {
text-align: center;
font-weight: bold;
font-size: 25px;
}
#result {
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 40px;
color: #FF0000;
}
</style>
<script type="text/javascript">
function validateForm() {
var x = document.myForm.name.value;
var y = document.myForm.price.value;
var namechar = /^[\sa-zA-Z]+$/;
if (x == "") {
alert("Product Name should not be empty");
return false;
} else if (y == "") {
alert("Product Price should not be empty");
return false;
} else if (!/^[a-zA-Z\s]+$/.test(x)) {
alert("Product Name should contain only alphabets and space");
return false;
} else if (y < 1) {
alert("Product Price should be a number with value greater than 0");
return false;
} else {
var x = document.myForm.season.value;
var disc;
if (x.match("summer")) disc = 10;
else if (x.match("newyear")) disc = 5;
else if (x.match("clearance")) disc = 15;
document.getElementById("discount").innerHTML = "The discount is " + disc + "%";
var p = document.myForm.price.value;
p = p - (p * disc) / 100;
document.getElementById("result").innerHTML = "The discounted price : Rs " + p;
return false;
}
}
</script>
</head>
<body>
<h1>DISCOUNT PRICE</h1>
<form method="get" name="myForm" onsubmit="return validateForm()">
<table>
<tr>
<td>Product Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>Product Price</td>
<td><input type="number" name="price">
</td>
</tr>
<tr>
<td>Season</td>
<td><select name="season">
<option value="summer">SUMMER SALE</option>
<option value="newyear">NEW YEAR SALE</option>
<option value="clearance">CLEARANCE SALE</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" id="submitbutton" value="GET DISCOUNT PRICE">
</form>
<br/>
<div id="discount"></div>
<br/>
<div id="result"></div>
</body>
</html>
I am developing a webpage.
I need help adding plus one to the value on click.
I also need help adding the price of all the items that are collected in a section in the "number of items selected"
I want to add the total price of all the items in the "Total amount section".
When I click on Add to cart once it shows plus 1 in the text box but does not add more to it when the button is clicked again.
body {
margin: 0;
padding: 0;
line-height: 1.5em;
background: #782609 url(images/body_bg.jpg) repeat-x;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
a:link,
a:visited {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
a:active,
a:hover {
color: #621c03;
text-decoration: none;
font-weight: bold;
}
h1 {
font-size: 22px;
color: white;
font-weight: bold;
height: 27px;
padding-top: 40px;
padding-left: 70px;
}
h2 {
font-size: 13px;
font-weight: bold;
color: #fff;
height: 22px;
padding-top: 3px;
padding-left: 5px;
background: url(images/h2.jpg) no-repeat;
}
#maincontainer {
width: 1000px;
margin: 0 auto;
float: left;
}
#topsection {
background: url(images/header.jpg) no-repeat;
height: 283px;
}
#title {
margin: 0;
padding-top: 150px;
padding-left: 50px;
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
}
#slogan {
margin-top: 10px;
padding-left: 50px;
font-size: 12px;
font-weight: bold;
color: #ff9a59;
}
#left_column {
float: left;
width: 229px;
}
#menu_top {
float: left;
height: 33px;
width: 229px;
background: url(images/menu_top.jpg) no-repeat;
}
#right_column {
float: right;
width: 651px;
padding-right: 20px;
height: auto
}
#destination {
float: left;
padding: 10px 10px 0px 40px;
width: 280px;
border-right: dotted 1px #782609;
}
#search {
float: right;
padding: 0px 30px 0px 0px;
width: 262px;
background: url(images/form-bg.jpg) repeat-y;
}
.search_top {
background: url(images/=search.jpg) no-repeat;
width: 262px;
height: 76px;
}
.search_mid {
margin: 0px;
padding-left: 10px;
padding-top: 0px;
}
.search_bot {
background: url(images/search_bot.jpg) no-repeat;
height: 11px;
}
#contact {
width: 200px;
height: 96px;
background: url(images/contact.jpg) no-repeat;
color: #fff;
padding-left: 29px;
padding-top: 15px;
}
#bot {
float: left;
height: 22px;
width: 877px;
}
#footer {
float: left;
width: 100%;
padding-top: 16px;
height: 31px;
color: #fff;
text-align: center;
background: url(images/footer_bg.jpg) repeat-x;
}
#footer a {
color: #fff;
font-weight: bold;
}
.menu {
margin-top: 40px;
width: 210px;
}
.menu li {
list-style: none;
height: 30px;
display: block;
background: url(images/menu_bg.jpg) no-repeat;
font-weight: bold;
font-size: 12px;
padding-left: 30px;
padding-top: 7px;
}
.menu a {
color: #fff;
text-decoration: none;
}
.menu a:hover {
color: #f08661;
}
.innertube {
margin: 40px;
margin-top: 0;
margin-bottom: 10px;
text-align: justify;
border-bottom: dotted 1px #782609;
}
.post_date {
color: #177212;
}
<body>
<script>
var BOO = 1;
var COIN = 1;
var MAP = 1;
var WATCH = 1;
var HARM = 1;
var GUITAR = 1;
var incrementCount = function() {
clicks++;
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li>Home
</li>
<li>Tourism
</li>
<li>Education and Industry
</li>
<li>Culture
</li>
<li>Gallery
</li>
<li>Gift Shop
</li>
</ul>
</div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000
<br />Fax: 002-200-2000
<br />Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td>
<img src="images/BOOMRANG.jpg" width="151" height="148">
</td>
<td class="echo">
<input type="text" form="esp" id="push" value="" size="2" />
</td>
<td>
<img src="images/coin.jpg" width="140" height="139">
</td>
<td class="echo">
<input type="text" form="esp" id="q2" value="" size="2" />
</td>
<td>
<img src="images/FLAG.jpg" width="175" height="152">
</td>
<td class="echo">
<input type="text" form="esp" id="q3" value="" size="2" />
</td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3>
<input type="button" value="Add to Cart" onClick="incrementCount();" q1.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='COIN=1 ; q2.value="1" '/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='MAP=1 ; q3.value="1" '/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick='WATCH=1 ; q4.value="1" '/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick='HARM=1 ; q5.value="1" '/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick='GUITAR=1 ; q6.value="1" '/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS: </h2>
<h2> TOTAL VALUE: </h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Travel Company Red - Free Website Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
var BOO={price:10,qty:0}
var COIN = {price:10,qty:0}
var MAP = {price:10,qty:0}
var WATCH = {price:10,qty:0}
var HARM = {price:10,qty:0}
var GUITAR = {price:10,qty:0}
var setTotalValue=function(){
var totalvalue=BOO.price*BOO.qty+COIN.price*COIN.qty+MAP.price*MAP.qty+WATCH.price*WATCH.qty+HARM.price*HARM.qty+GUITAR.price*GUITAR.qty;
document.getElementById('totalvalue').innerHTML=totalvalue;
}
var setTotalCount=function(){
var totalitems=BOO.qty+COIN.qty+MAP.qty+WATCH.qty+HARM.qty+GUITAR.qty;
document.getElementById('totalitems').innerHTML=totalitems;
}
var addBoo = function(){
BOO.qty++;
document.getElementById('q1').setAttribute("value",BOO.qty);
setTotalValue();
setTotalCount();
}
var addCoin = function(){
COIN.qty++;
document.getElementById('q2').setAttribute("value",COIN.qty);
setTotalValue();
setTotalCount();
}
var addMap = function(){
MAP.qty++;
document.getElementById('q3').setAttribute("value",MAP.qty);
setTotalValue();
setTotalCount();
}
var addWatch = function(){
WATCH.qty++;
document.getElementById('q4').setAttribute("value",WATCH.qty);
setTotalValue();
setTotalCount();
}
var addHarm = function(){
HARM.qty++;
document.getElementById('q5').setAttribute("value",HARM.qty);
setTotalValue();
setTotalCount();
}
var addGuitar = function(){
GUITAR.qty++;
document.getElementById('q6').setAttribute("value",GUITAR.qty);
setTotalValue();
setTotalCount();
}
</script>
<div id="maincontainer">
<div id="topsection">
<div id="title">Welcome to Australia</div>
</div>
<div id="left_column">
<div id="menu_top"></div>
<div class="menu">
<ul>
<li>Home</li>
<li>Tourism</li>
<li>Education and Industry</li>
<li>Culture</li>
<li>Gallery</li>
<li>Gift Shop</li>
</ul></div>
<div id="contact">
<strong>QUICK CONTACT<br /></strong>
Tel: 001-100-1000<br />
Fax: 002-200-2000<br />
Email: info[at]company.com</div>
</div>
<br>
<br>
<div id="right_column">
<table>
<tr>
<td><img src="images/BOOMRANG.jpg" width="151" height="148"></td>
<td class="echo"><input type="text" form="esp" id="q1" value="" size="2" /></td>
<td><img src="images/coin.jpg" width="140" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q2" value="" size="2" /></td>
<td><img src="images/FLAG.jpg" width="175" height="152"></td>
<td class="echo"><input type="text" form="esp" id="q3" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onClick ="addBoo()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addCoin()"/>
</td><td></td>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addMap()"/>
</td><td></td>
</tr>
<tr>
<td><img src="images/watch.jpg" width="139" height="150"></td>
<td class="echo"><input type="text" form="esp" id="q4" value="" size="2" /></td>
<td><img src="images/harmoniam.jpg" width="147" height="131"></td>
<td class="echo"><input type="text" form="esp" id="q5" value="" size="2" /></td>
<td><img src="images/guitar.jpg" width="189" height="139"></td>
<td class="echo"><input type="text" form="esp" id="q6" value="" size="2" /></td>
</tr>
<tr>
<td>
<h3>Price: 10$</h3><input type="button" value="Add to Cart" onclick="addWatch()"/>
</td><td></td>
<td>
<h3>Price: 30$</h3><input type="button" value="Add to Cart" onclick="addHarm()"/>
</td><td></td>
<td>
<h3>Price: 20$</h3><input type="button" value="Add to Cart" onclick="addGuitar()"/>
</td><td></td>
</tr>
</table>
<p> </p>
<h2> TOTAL ITEMS:<span id="totalitems"></span> </h2>
<h2> TOTAL VALUE: <span id="totalvalue"></span></h2>
</div>
</div>
<div id="bot"></div>
</div>
<div id="footer">Copyright © Australia Expo</div>
</body>
</html>
How to remove this "Rs." part from this js ? if i remove it html page not providing correct value its not working well i wannt stop replacing "Rs." on to my html page ?
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("Rs.","");
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
update_balance();
}
function update_balance() {
var due = $("#total").html().replace("Rs.","") - $("#paid").val().replace("Rs.","");
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("Rs.","") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("Rs."+price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">Rs.0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">Rs.0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").live('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<!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=UTF-8' />
<title>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<?php
function wlcmMsg() {
echo "Welcome ! ".$name=$_SESSION['adminlog'];
}
session_start();
if(!isset($_SESSION['adminlog'])){
}
else if(isset($_SESSION['adminlog'])){
echo '<table align="right" border="0" class="dontprint">
<tr width="50%"><td>Hi! '.$name=$_SESSION['adminlog']; echo '</td>
<td><form align="right" action="menu.php"><input type="submit" value="Back" /></form></td>
<td><form align="right" action="logout.php"><input type="submit" value="logout" id="search"/></form></td>
</tr></table>';
}
//connecting to the database
define('DB_HOST', 'localhost');
define('DB_NAME', 'infinitiabill');
define('DB_USER','root');
define('DB_PASSWORD','');
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
//inserting Record to the database
$result = mysql_query('SELECT InvoiceNo FROM billdata ORDER BY InvoiceNo DESC LIMIT 1;');
if (mysql_num_rows($result) > 0) {
$max_InvoiceNo = mysql_fetch_row($result);
//echo $max_InvoiceNo[0]; //Here it is
}
mysql_close($con);
?>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due Rs.</td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">Rs.650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td>Rs.<span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">Rs.75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td>Rs.<span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal Rs.</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total Rs.</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid Rs.</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due Rs.</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>
here m add html and css codes too herer
Try doing split instead.
Ex:
function update_balance() {
var total= parseInt($("#total").html().split("Rs.")[1]);
var pval=parseInt($("#paid").val().split("Rs.")[1]);
var due = total-pval;
due = roundNumber(due,2);
$('.due').html("Rs."+due);
}
Same goes with update_price()
Edited, #Sampath M Jay, I just change some code you just post on your snippet to make it work. Something need to know:
Did you see the the code snippet needs jQuery? I think that may be the reason that your snippet is not working, anyway, I chose jQuery 1.11.0, which makes .live deprecated, so I change $(".delete").live(... to $(".delete").on(..., it just do the same thing.
The PHP part of your snippet is removed because stack snippet will not try to resolve it, so I believe whether to remove it or not is a minor issue.
Some of the html part also has the Rs. prefix, so remove them.
In js part, the update_total, update_balance, update_price and some part of the domready code which is
$("#addrow").click(function() {
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div...
bind();
...})
all of them have the relation with Rs., so removed them.
Left is 'should-be-ok' version without the bothering Rs., enjoy, and feel free to ask if there's any problem.
function print_today() {
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var now = new Date();
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
var today = months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
return today;
}
// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
function update_total() {
var total = 0;
$('.price').each(function(i){
price = parseInt($(this).html());
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html(total);
$('#total').html(total);
update_balance();
}
function update_balance() {
var due = parseInt($("#total").html(), 10) - $("#paid").val();
due = roundNumber(due,2);
$('.due').html(due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val() * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Item Name</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
bind();
$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#no_bodear_tbl{
border: 0px solid black; padding: 6px;
}
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!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=UTF-8' />
<title>infintiaLK Billing</title>
<link rel='stylesheet' type='text/css' href='css/style_bill.css' />
<link rel='stylesheet' type='text/css' href='css/print_bill.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min_bill.js'></script>
<script type='text/javascript' src='js/example_bill.js'></script>
<style type="text/css" media="print">
.dontprint
{ display: none; }
</style>
</head>
<body>
<script>
function myFunction() {
window.print();
}
</script>
<div id="page-wrap">
<form action="save_process.php" name="invicedata" method="post">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea id="address">infintiaLK
No.210,Temple Road,
Ulukade Junction, Ganemulla,
Sri Lanka 11020.
(+94)76 75 57 909 / (+94)71 95 57 909
infinitialk#gmail.com
</textarea>
<div id="logo">
<div id="logoctr">
<!--Change Logo-->
Save |
<!--Delete Logo-->
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo1_bill.png" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea name="CmpnyName" id="customer-title">Company Name</textarea>
<table id="meta">
<tr name="invno">
<td class="meta-head">Invoice #</td>
<td ><?php echo $max_InvoiceNo[0]+1; ?></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="issedate" id="date"></textarea></td>
</tr>
<tr>
<td class="meta-head">Created by</td>
<td><?php echo $name=$_SESSION['adminlog']; ?></div></td>
</tr>
<tr>
<td class="meta-head">Amount Due </td>
<td><textarea class="due" name="due" readonly>0.00</textarea></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea name="itemname">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
<td><textarea class="cost">650.00</textarea></td>
<td><textarea class="qty">1</textarea></td>
<td><span class="price">650.00</span></td>
</tr>
<tr class="item-row">
<td name="item_details" class="item-name"><div class="delete-wpr"><textarea name="itemname">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea name="item_details">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
<td><textarea class="cost">75.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">225.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a item</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value" >875.00</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><textarea id="total" name="total" readonly>875.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea name="paid" id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">0.00</div></td>
</tr>
</table>
<div id="terms">
<h5>Terms</h5>
NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.
Make all checks payable to infinitiaLK.<br> THANK YOU FOR YOUR BUSINESS!
</div>
<div class="dontprint"><br>
<center><table name="no_bodear_tbl">
<tr><td>
<form action="save_process.php">
<input type="submit" value="Save" ></form></td>
<td></td>
<td><form action="http://pdfcrowd.com/url_to_pdf/">
<input type="submit" value="Save to a PDF">
</form></td>
</tr></table></center>
</div>
<!--<button onclick="myFunction()">Print Bill</button>-->
</form>
<footer><br/>
<center> Copyright © 2012 - 2015 infinitiaLK Inc.
</footer><br/>
</body>
</html>
You should remove "Rs" string being added at locations mentioned below. Then you can remove all replace("Rs.","")
function update_total() {
...
$('#subtotal').html("Rs."+total);
$('#total').html("Rs."+total);
...
}
function update_balance() {
...
$('.due').html("Rs."+due);
...
}
function update_price() {
...
row.find('.price').html("Rs."+price);
...
}