Webpage output does not last

Webpage output does not last - javascript

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>

Related

How to pass a html table to controller in rails?

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...

Random number based on upper and lower limit from input

I can not for the life of me, figure out why this will not call the user input properly? The user is meant to give the upper and lower extremes of a range and then when they submit, they are given a random number between those two numbers. I would assume that the problem is when I call the ".value" but I don't know any other way to do it so any help is much appreciated.
function numberGen(){
var minimum = document.getElementById("minimum").value;
var maximum = document.getElementById("maximum").value;
var number = Math.floor((Math.random() * minimum) + maximum);
document.getElementById("output").innerHTML = number;
}
body{background-color: #000000;}
h1{font-family:sans-serif;
color:#ffffff}
p{font-family:sans-serif;
color:#ffffff;}
input[type=number] {
width: 150px;
border: 2px solid #ffffff;
border-radius: 4px;
font-size: 16px;
background-color: #262626;
padding:15px 30px;
color:#ffffff;
}
input[type=number]:hover {
background-color: #515151;
}
button{
border: 2px solid #ffffff;
background-color: #000000;
color:#ffffff;
padding:15px 40px;
font-size:16px;
border-radius:5px
}
button:hover{
background-color: #ffffff;
color:#5a5a5a;
}
.output{
border: 2px solid #ffffff;
background-color: #000000;
border-radius:5px;
padding:15px;
}
.blink_me {
animation: blinker .7s linear infinite;
}
#keyframes blinker {
from { opacity: 1; }
to{opacity:0;}
}
<center>
<h1>Random Generator</h1>
<br>
<p>Type your minimum and maximum veriables into the text boxs.</p>
<table cellspacing = 50px width = 100%>
<tr>
<td align = right width = 50%>
<form id="form" onsubmit="return false;">
<input type="number" id="minimum" placeholder="minimum"/>
</form>
</td>
<td align = left width = 50%>
<form id="form" onsubmit="return false;">
<input type="number" id="maximum" placeholder="maximum"/>
</form>
</td>
</tr>
</table>
<button onclick = "numberGen()">Submit</button>
<br>
<br>
<br>
<br>
<br>
<br>
<table class = output width = 50%>
<tr>
<td align = left>
<p id = output><font color = #A9A9A9 >Output<span class = blink_me>:</span></font></p>
</td>
</tr>
</table>
</center>
<script src = gen.js></script>

You need to use the delta of maximum and minimum for the factor for the random number and add the minimum afterwards.
function numberGen(){
var minimum = +document.getElementById("minimum").value;
// ^ convert number to string
var maximum = +document.getElementById("maximum").value;
// ^ convert number to string
var number = Math.floor((Math.random() * (maximum - minimum + 1)) + minimum);
// ^^^ correction for max val
document.getElementById("output").innerHTML = number;
}
This proposal retuns random values inclusive the given values.
function numberGen(){
var minimum = +document.getElementById("minimum").value;
var maximum = +document.getElementById("maximum").value;
var number = Math.floor((Math.random() * (maximum - minimum + 1)) + minimum);
document.getElementById("output").innerHTML = number;
}
body{background-color: #000000;}
h1{font-family:sans-serif;
color:#ffffff}
p{font-family:sans-serif;
color:#ffffff;}
input[type=number] {
width: 150px;
border: 2px solid #ffffff;
border-radius: 4px;
font-size: 16px;
background-color: #262626;
padding:15px 30px;
color:#ffffff;
}
input[type=number]:hover {
background-color: #515151;
}
button{
border: 2px solid #ffffff;
background-color: #000000;
color:#ffffff;
padding:15px 40px;
font-size:16px;
border-radius:5px
}
button:hover{
background-color: #ffffff;
color:#5a5a5a;
}
.output{
border: 2px solid #ffffff;
background-color: #000000;
border-radius:5px;
padding:15px;
}
.blink_me {
animation: blinker .7s linear infinite;
}
#keyframes blinker {
from { opacity: 1; }
to{opacity:0;}
}
<center>
<h1>Random Generator</h1>
<br>
<p>Type your minimum and maximum veriables into the text boxs.</p>
<table cellspacing = 50px width = 100%>
<tr>
<td align = right width = 50%>
<form id="form" onsubmit="return false;">
<input type="number" id="minimum" placeholder="minimum"/>
</form>
</td>
<td align = left width = 50%>
<form id="form" onsubmit="return false;">
<input type="number" id="maximum" placeholder="maximum"/>
</form>
</td>
</tr>
</table>
<button onclick = "numberGen()">Submit</button>
<br>
<table class = output width = 50%>
<tr>
<td align = left>
<p id = output><font color = #A9A9A9 >Output<span class = blink_me>:</span></font></p>
</td>
</tr>
</table>
</center>
<script src = gen.js></script>

jQuery Copy dynamically added table row values into next row

<table>
<tr>
<td>Name</td>
<td>Location</td>
<td>Date</td>
<td>Valid</td>
<td>Add</td>
</tr>
<tr class="tr_clone">
<td>
<input type="text" >
</td>
<td>
<input type="text" >
</td>
<td>
<input type="text" class="datepicker">
</td>
<td>
<input type="checkbox" >
</td>
<td>
<input type="button" name="add" value="Add">
</td>
</tr>
</table>
I need to insert only the values from the table row (not include the input filed) into next row in the table.
Please give your valuable suggestions.

i'll give you something for your information
var localDb = [];
var emptyVar = '';
(function(){
//define local storage
var dataFiles = JSON.parse(localStorage.getItem('key'));
console.log(dataFiles);
if (dataFiles == null){
$('#no-data').show();
//alert('its working');
}else{
$('#no-data').hide();
$('.data-box').html('<table><tbody><tr><th>Serial No</th><th>Name</th><th>Age</th><th>Email</th><th>Address</th><th>Options</th></tr></tbody><tbody id="uploadFiles"></tbody></table>');
for (var i=0; i<dataFiles.length; i++){
localDb.push(dataFiles[i]);
emptyVar += '<tr id="number'+i+'">';
emptyVar += '<td>'+i+'</td>';
emptyVar += '<td>'+dataFiles[i].name+'</td>';
emptyVar += '<td>'+dataFiles[i].age+'</td>';
emptyVar += '<td>'+dataFiles[i].email+'</td>';
emptyVar += '<td>'+dataFiles[i].address+'</td>';
emptyVar += '<td>'+'<input type="button" value="Remove" onclick="getId(this);" />'+'</td>';
emptyVar += '</tr>'
};
$('#uploadFiles').html(emptyVar);
};
})();
function add(){
var name = $('#name').val();
var age = $('#age').val();
var email = $('#email').val();
var address = $('#address').val();
var fullDetails = {};
fullDetails.name = name;
fullDetails.age = age;
fullDetails.email = email;
fullDetails.address = address;
localDb.push(fullDetails);
window.localStorage.setItem('key',JSON.stringify(localDb));
window.location.reload();
};
function getId(e){
var removeID = e.closest('tr').id;
//alert(removeID);
var dataFiles = JSON.parse(localStorage.getItem('key'));
localDb.pop(dataFiles[removeID]);
$('#'+removeID).remove();
window.localStorage.setItem('key',JSON.stringify(localDb));
window.location.reload();
};
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.outer-wrapper {
float:left;
width:100%;
}
.form-area {
width:100%;
float:left;
height:100%;
background:#CCC;
padding:15px;
}
.data-box {
width:100%;
float:left;
height:100%;
margin-top: 6px;
}
input[type='text']{
width:20%;
float:left;
padding:10px 15px;
margin-bottom:15px;
margin-right: 15px;
}
input[type='button']{
width:15%;
float:left;
margin-top: 1px;
padding:8px 15px;
margin-bottom:15px;
background:#F00;
border:none;
color:#fff;
font-size:15px;
text-transform:uppercase;
cursor:pointer;
}
#no-data {
font-size: 60px;
margin-top: 15%;
opacity: 0.5;
text-align: center;
text-transform: uppercase;
}
table,tbody {
width: 100%;
float: left;
}
tr {
width:100%;
float:left;
}
th {
font-size:18px;
color:#000;
font-weight:bold;
}
td , th{
width:18.3%;
float:left;
text-align:center;
border:1px solid #000;
padding: 15px;
}
td {
min-height:55px;
}
td input[type="button"] {
padding: 7px 15px;
font-size: 12px;
margin: 9px 0;
width: 100%;
}
td:last-child {
padding: 0 15px;
}
.form-area h2 {
margin: 0;
padding-bottom: 15px;
text-align: center;
}
td:first-child ,th:first-child {
width: 8%;
}
td:nth-child(2), th:nth-child(2) {
width: 8%;
}
td:nth-child(3), th:nth-child(3) {
width: 7%;
}
td:nth-child(5), th:nth-child(5) {
width: 50%;
}
td:last-child ,th:last-child {
width: 8%;
}
<div class="outer-wrapper">
<div class="form-area">
<h2>Fill your data</h2>
<input type="text" placeholder="Name" id="name" />
<input type="text" placeholder="Age" id="age" />
<input type="text" placeholder="Email" id="email" />
<input type="text" placeholder="Address" id="address" />
<input type="button" value="Submit" id="sumbit" onclick="add();" />
</div><!-- /.form-area -->
<div class="data-box">
<h2 id="no-data">No data found here </h2>
</div><!-- /.data-box -->
</div><!-- /.outer-wrapper -->

Try this code:
var new_row = '<tr>';
$('table .tr_clone td').each(function(){
new_row += '<td>'+$(this).find('input').val()+'</td>';
});
new_row += '</tr>';
$('table').append(new_row);

<--HTML--->
<table id="mytable">
<tr>
<td>Name</td>
<td>Location</td>
<td>Date</td>
<td>Valid</td>
<td>Add</td>
</tr>
<tr class="tr_clone">
<td>
<input type="text" id="tname">
</td>
<td>
<input type="text" id="tloc">
</td>
<td>
<input type="text" class="datepicker" id="tdate">
</td>
<td>
<input type="checkbox" class="datepicker">
</td>
<td>
<input type="button" name="add" value="Add" id="addbtn">
</td>
</tr>
</table>
/**JQUERY**/
$("#addbtn").click(function(){
var name = $("#tname").val();
var loc = $("#tloc").val();
var date = $("#tdate").val();
$('#mytable tr:last').after('<tr><td>'+name+'</td><td>'+loc+'</td><td>'+date+'</td></tr>');
});

Basic Javascript : using onclick to print a table

<!DOCTYPE html>
<html>
<head>
<title> Title </title>
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
</head>
<body>
Please select your price range (per hour) :
<select id="valueDropdown">
<option value="lessThanFive">below 5</option>
<option value="betweenSixAndTen">6-10</option>
<option value="tenPlus">10+</option>
</select>
<button type="button" onclick="toggleTable();" >Search</button>
<div id="cheapestTable" style="display: none;>
<table class="tableizer-table" >
<tr class="tableizer-firstrow"><th>SCHOOLS</th><th>Booking </th><th>web site</th><th> Price per hour </th><th> Columna1 </th><th>Courses English</th><th>Language</th><th>Social Media</th><th>Location</th></tr>
<tr><td>Brittannia</td><td>no</td><td>7</td><td> £4.00 </td><td> </td><td>General, Examn, 1to1, Business</td><td>English</td><td> </td><td>Manchester</td></tr>
<tr><td>ABLE</td><td>no</td><td>8</td><td> £5.00 </td><td> </td><td>General, Examn, 1to1</td><td>English Spanish</td><td>F, T, S, in, I</td><td>Manchester</td></tr>
</table>
</div>
<script>
function toggleTable(){
var e = document.getElementById("valueDropdown");
if(e.options[e.selectedIndex].value === 'lessThanFive'){
document.getElementById('cheapestTable').style.display = "table"
}else{
document.getElementById('result').innerHTML="hi2";
}
}
</script>
</body>
</html>
I'm trying to print a table using Javascript when the user presses a button. The button works fine.
The table is quite complex. What I've tried so far is setting the original location of the table off the screen and then bringing it back when the user pressed the button.
Table:
<div id="cheapestTable">
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: absolute ;
top: -99px;
left: -99px;
}
.. more here with formatting of individual cells etc.
Then when the button is pressed:
document.getElementById('cheapestTable').style.tableizer-table.left = "100px";
document.getElementById('cheapestTable').style.tableizer-table.top = "100px";
However the table is not appearing when the button is pressed.

You're missing the closing quote in <div id="cheapestTable" style="display: none;>.
Also, the proper style to display the DIV is block, not table.
function toggleTable() {
var e = document.getElementById("valueDropdown");
if (e.options[e.selectedIndex].value === 'lessThanFive') {
document.getElementById('cheapestTable').style.display = "block"
} else {
document.getElementById('result').innerHTML = "hi2";
}
}
table.tableizer-table {
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
Please select your price range (per hour) :
<select id="valueDropdown">
<option value="lessThanFive">below 5</option>
<option value="betweenSixAndTen">6-10</option>
<option value="tenPlus">10+</option>
</select>
<button type="button" onclick="toggleTable();">Search</button>
<div id="cheapestTable" style="display: none;">
<table class="tableizer-table ">
<tr class="tableizer-firstrow ">
<th>SCHOOLS</th>
<th>Booking</th>
<th>web site</th>
<th>Price per hour</th>
<th>Columna1</th>
<th>Courses English</th>
<th>Language</th>
<th>Social Media</th>
<th>Location</th>
</tr>
<tr>
<td>Brittannia</td>
<td>no</td>
<td>7</td>
<td>£4.00</td>
<td> </td>
<td>General, Examn, 1to1, Business</td>
<td>English</td>
<td> </td>
<td>Manchester</td>
</tr>
<tr>
<td>ABLE</td>
<td>no</td>
<td>8</td>
<td>£5.00</td>
<td> </td>
<td>General, Examn, 1to1</td>
<td>English Spanish</td>
<td>F, T, S, in, I</td>
<td>Manchester</td>
</tr>
</table>
</div>

how to remove this currency mark from js?

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);
...
}

We Keep Coding

JavaScript is the programming language of the Web.

Webpage output does not last - javascript

Related

How to pass a html table to controller in rails?

Random number based on upper and lower limit from input

jQuery Copy dynamically added table row values into next row

Basic Javascript : using onclick to print a table

how to remove this currency mark from js?

Categories

Resources